[HTML5] 웹표준에 맞게 Table태그 구성하기

불필요한 경우에도 table 태그를 무분별하게 사용하는 것을 자주 보아왔기에 평소에 table 태그 사용을 지양 하는 편입니다.

그러나 필요한 부분에서는 table 태그를 사용 해야 할 때가 있습니다. 

그때마다 웹표준에 맞게 표를 작성해야하는데 헷갈릴 때가 많아 정리해두려합니다. 
참고로 이 내용은 웹 저작자를 위한 W3C의 HTML5 기술 표준 명세서를 바탕으로 작성한 것입니다.

표를 구성하기 위해서 필요한 것은 소개, 기본 적인 셀 구조, 사용법 등입니다. 
이 형태들은 단락을 만들어 사용하거나, caption 을 사용하거나, figure 안에 표를 작성하는 방법 등이 있습니다. 
저는 보통 caption 을 이용합니다. 아래와 같이 사용하시면 됩니다. caption 안에 details 엘리먼트를 사용할수도있습니다.

Table 구성

<table> 
  <caption> 
    각 태그의 이름과 설명 
    <details> 
      <summary>도움</summary> 
      <p>이 표는 태그와 그 설명에 대한 내용을 담고 있습니다.~단위는 ~</p> 
    </details> 
  </caption>
  //colgroup: 전체 열에 스타일을 적용하는 데 유용합니다
  <colgroup>
    <col>
  </colgroup>
  <thead> 
    <tr> 
     <th>태그이름</th> 
     <th>설명</th> 
    </tr> 
  </thead>
  <tbody> 
    <tr> 
     <td>p태그</td> 
     <td>단락을 표현할 때 사용합니다.</td> 
    </tr> 
  </tbody> 
</table>

* 열(row)(세로로) 을 합칠때는 rowspan, 행(colum) (가로로) 을 합칠때는 colspan 을 사용합니다.

* table의 summary 속성은 HTML5에서 지원하지 않으니 이점 유의하시기 바랍니다.

* HTML5를 기점으로 table 태그와 관련있는 속성들이 대거 CSS로 처리되도록 변경되었으니 이점 또한 유의해야합니다.

참고 URL

HTML 5.2