- 표의 기본 구조
<table> 태그에
행(table row)을 의미하는 <tr> 태그를 자식 요소로 포함하고,
<tr> 태그안애서는
제목 셀(table header cell)인 <th> 태그와 데이터 셀(table data cell)인 <td> 태그를 자식 요소로 포함한다.
- <tr> 태그는 <th> 태그와 <td> 태그만 포함하고 반드시 한 개 이상의 <th> 태그 또는 <td> 태그를 포함해야 한다.
- 표 안의 항목을 ‘셀(cell)’, 가로줄을 ‘행(row)’, 세로줄을 ‘열(column)' 이라고 표현한다.
![](https://t1.daumcdn.net/cfile/cafe/2633CF43548134EC34)
■ <th> 태그의 scope 속성
<th> 태그는 테이블의 제목 셀을 의미하며,
<th> 태그에 scope속성을 사용하여 해당 셀이 영향을 주는 내용 셀의 범위를 지정할 수 있다.
<th> 태그가 동일한 열에 있는 내용 셀과 연관성이 있는 경우 <th scope="col">
<th> 태그가 동일한 행에 있는 내용 셀과 연관성이 있는 경우 <th scope="row">
■ 테이블 제목 <caption> 태그
<caption> 태그는 <table> 태그의 시작 태그 바로 뒤에 기술하며 필수 요소는 아니다.
테이블의 내용을 대표할 수 있는 간단한 제목이나 설명을 넣는다.
많은 브라우저에서 <caption> 태그의 내용은 테이블 위에 중앙 정렬로 표시한다.
■ 열(column) 그룹화를 위한 <colgroup>, <col> 태그
<col> 태그는 테이블의 각 열을 그룹화하며 <colgroup> 태그는 <col> 태그들을 그룹화한다.
이들은 <table> 태그 또는 <caption> 태그의 바로 뒤에 지정한다.
<col> 태그에 span 속성을 사용하여 테이블의 열(column)끼리 스타일을 그룹화할 수 있다.
■ 행(row) 그룹화를 위한 <thead>, <tfoot>, <tbody> 태그
테이블의 행(row)을 그룹화하기 위한 태그.
<thead> 태그는 제목 셀 그룹,
<tbody> 태그는 본문 행 그룹, <tbody> 태그는 필수 요소이며 생략하더라도 대다수의 웹 브라우저에서 있는 것으로 간주한다.
<tfoot>태그는 합계와 같은 정보에 해당하는 푸터 행 그룹.
<caption>, <colgroup>과 <col> 태그 다음에
<thead>, <tbody>, <tfoot> 또는 <thead>, <tfoot>, <tbody> 순서로 작성할 수 있으며
두 가지 경우 모두 <tfoot> 태그는 테이블의 가장 마지막에 렌더링된다.
■ 셀 결합(rowspan, colspan 속성)
th 또는 td 태그에 rowspan 속성으로 세로 방향의 행에 걸쳐, colspan 속성으로 가로 방향의 열에 걸쳐 셀을 결합한다.
[Best Case]
<table>
<caption>브라우저 이용자 비율</caption>
<colgroup>
<col span="2" class="browserName">
<col class="browserVersion">
<col class="percentage">
</colgroup>
<thead>
<tr>
<th colspan="2" scope="col">브라우저명</th>
<th scope="col">비율</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">인터넷 익스플로러</td>
<td>10이하</td>
<td>10%</td>
</tr>
<tr>
<td>11</td>
<td>30%</td>
</tr>
<tr>
<td>구글 크롬</td>
<td rowspan="2"> </td>
<td>30%</td>
</tr>
<tr>
<td>기타</td>
<td>30%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><strong>합계</strong></td>
<td>100%</td>
</tr>
</tfoot>
</table>
![](https://t1.daumcdn.net/cfile/cafe/2563CD335978BEC732)