thead 태그
thead 태그는 표의 상단 부분을 정의합니다.
일부 그룹에 즉시 CSS 스타일을 적용할 수 있도록
행을 그룹화하는 데 사용됩니다. 하나의 표에는
하나의 thead 태그만 존재할 수 있습니다.
thead 태그는 종종
tbody
및 tfoot
태그와 함께 사용되어 HTML 표의 상단, 본문,
하단 부분을 정의합니다.
예제
thead 태그로 그룹화된 행에
color 속성을 사용하여
빨간색 텍스트 색상을 적용해 보겠습니다:
<table>
<thead>
<tr>
<th>이름</th>
<th>성</th>
<th>급여</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>개수: 2</td>
<td>-</td>
<td>총계: 1200$</td>
</tr>
</tfoot>
</table>
thead {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
예제
여기서는 thead가 상단에,
tfoot가 하단에 있지 않지만,
브라우저가 이를 올바른 위치에 배치합니다:
<table>
<tfoot>
<tr>
<td>개수: 2</td>
<td>-</td>
<td>총계: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>이름</th>
<th>성</th>
<th>급여</th>
</tr>
</thead>
</table>
table, td, th {
border: 1px solid black;
}
:
