좌충우돌 웹퍼블리셔 일기

Table 요소는 2차원의 격자형 데이터를 표현할 때 사용되며 예외적으로 dt, dd 형식으로 마크업 할 수 있는 데이터도 표현할 수 있습니다. Table 요소는 표를 설명하는 적절한 제목을 지녀야 하는데 h1~h6, caption, summary 중 한가지 요소 또는 속성을 반드시 사용하여야 합니다. 아래 예제를 통하여 올바른 사용법을 익힐 수 있습니다.

• caption :표의 제목 요소. table요소 바로 뒤에만 허용되며 한 번만 표시할 수 있습니다.
• summary :표의 요약 속성. table요소에 동반되는 속성으로서 표의 제목caption이 존재하지 않는 경우나 표에 요약설명이 필요한 경우 사용할 수 있습니다.
• thead, tbody, tfoot :표의 행tr을 그룹핑하는 요소로서 표의 머리글, 본문, 풋터를 지정합니다. tfoot요소의 경우 보통 이에 해당하는 데이터가 없어서 생략되는 경우가 많습니다.
• th :표의 머리글 셀을 지정합니다. 표의 머리글 셀은 scope, abbr 과 같은 속성을 동반합니다. scope 속성은 사용이 강력하게 권장되며 abbr 속성은 필요에 따라 사용할 수 있습니다.
• scope :th 요소에 동반되는 속성으로서 현재의 셀이 어느 셀의 제목인지 그 범위를 명시합니다. scope 속성의 값으로는 col, colgroup, row, rowgroup 이 있습니다
• abbr :th 요소에 동반되는 속성으로서 포함하고 있는 콘텐츠에 대한 약식표기가 가능한 경우 약어를 표기하는데 사용합니다. th셀의 내용을 반복해서 음성으로 출력하는 도구들은 abbr 속성에 표기된 약어를 읽게 됩니다.

자장면과 짬뽕의 가격과 열량 비교

구분	가격(won)	열량(kcal)
자장면	3,000	300
짬뽕	3,500	350

<table summary="짬뽕은 자장면보다 500원 비싸고 열량이 50kcal 높다">
    <caption>
    자장면과 짬뽕의 가격과 열량 비교
    </caption>
    <thead>
        <tr>
            <th>구분</th>
            <th scope="col" abbr="가격">가격(won)</th>
            <th scope="col" abbr="열량">열량(kcal)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">자장면</th>
            <td>3,000</td>
            <td>300</td>
        </tr>
        <tr>
            <th scope="row">짬뽕</th>
            <td>3,500</td>
            <td>350</td>
        </tr>
    </tbody>
</table>

>>출처 NULI