[HTML5] 웹표준에 맞게 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>

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

참고 URL

HTML 5.2