표

표(table 요소, tr요소, th요소, td요소)

표 를 작성할 때는 블록 레벨 요소인 table요소를 사용한다. 표의 기본 구조는 먼저 tr요소로 행(table row)을 정의하고 내용으로 제목 셀(table header cell)인 th요소와 데이터 셀(table data cell)인 td요소를 포함하여 전체를 table요소로 둘러싼다.
table요소에 summary속성을 사용하여 요약문을 작성하고, th요소에는 abbr속성으로 약어를 지정할 것을 권고한다.
표의 제목은 table요소의 시작태그 뒤에 caption요소를 사용한다.
표의 행을 그룹화하기 위해서 thead 요소, tbody 요소, tfoot 요소를 사용할 수 있다.

th에는 어떤 방향의 제목임을 알려주는 scope 속성을 지정할 수 있고, id 와 headers 를 이용해서 그 관계를 좀 더 명확히 할 수도 있다.

예제)

<table summary="연도별 품질마크 신청 및 합격률 자료" border="1"> <caption>품질마크 연도별 통계</caption> <thead> <tr> <th scope="col">연도</th> <th scope="col">신청 사이트 수</th> <th scope="col">인증 사이트 수</th> <th scope="col">합격률</th> </tr> </thead> <tfoot> <tr> <th scope="row">합계</th> <td>1489</td> <td>448</td> <td>30.09%</td> </tr> </tfoot> <tbody> <tr> <th scope="row">2007년</th> <td>40</td> <td>15</td> <td>37.5%</td> </tr> <tr> <th scope="row">2008년</th> <td>123</td> <td>44</td> <td>35.77%</td> </tr> <tr> <th scope="row">2009년</th> <td>579</td> <td>96</td> <td>16.58%</td> </tr> <tr> <th scope="row">2010년</th> <td>616</td> <td>293</td> <td>47.56%</td> </tr> <tr> <th scope="row">2011년</th> <td>131</td> <td>0</td> <td>0%</td> </tr> </tbody> </table> -------------- <table summary="연도별 품질마크 신청 및 합격률 자료" border="1"> <caption>품질마크 연도별 통계</caption> <thead> <tr> <th scope="col" id="a01">연도</th> <th scope="col" id="a02">신청 사이트 수</th> <th scope="col" id="a03">인증 사이트 수</th> <th scope="col" id="a04">합격률</th> </tr> </thead> <tfoot> <tr> <th scope="row" id="total">합계</th> <td headers="a02 total">1489</td> <td headers="a03 total">448</td> <td headers="a04 total">30.09%</td> </tr> </tfoot> <tbody> <tr> <th scope="row" id="y07">2007년</th> <td headers="a02 y07">40</td> <td headers="a03 y07">15</td> <td headers="a04 y07">37.5%</td> </tr> <tr> <th scope="row" id="y08">2008년</th> <td headers="a02 y08">123</td> <td headers="a03 y08">44</td> <td headers="a04 y08">35.77%</td> </tr> <tr> <th scope="row" id="y09">2009년</th> <td headers="a02 y09">579</td> <td headers="a03 y09">96</td> <td headers="a04 y09">16.58%</td> </tr> <tr> <th scope="row" id="y10">2010년</th> <td headers="a02 y10">616</td> <td headers="a03 y10">293</td> <td headers="a04 y10">47.56%</td> </tr> <tr> <th scope="row" id="y11">2011년</th> <td headers="a02 y11">131</td> <td headers="a03 y11">0</td> <td headers="a04 y11">0%</td> </tr> </tbody> </table> ------------------- 테이블의 각 셀마다 크기를 지정하고 싶다면 colgroup 으로 묶고 col 요소로 크기를 지정하는 방법이 있다. <table summary="한국정보문화 진흥원 및 홈페이지 이용 공지사항" width="100%" border="1"> <caption>공지사항 목록</caption> <colgroup> <col width="60" /> <col width="*" /> <col width="100" /> <col width="100" /> <col width="50" /> </colgroup> <thead> <tr> <th scope="col">No.</th> <th scope="col">제목</th> <th scope="col">작성자</th> <th scope="col">작성일</th> <th scope="col">조회</th> </tr> </thead> <tfoot> <tr> <td colspan="5"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> </td> </tr> </tfoot> <tbody> <tr> <td>71</td> <td><a href="#">게시판 제목이 나타나는 부분</a></td> <td>홍길동</td> <td>2011-03-10</td> <td>444</td> </tr> <tr> <td>70</td> <td><a href="#">게시판 제목이 나타나는 부분</a></td> <td>홍길동</td> <td>2011-02-21</td> <td>1026</td> </tr> </tbody> </table>