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