HTML 에서 <tfoot> 태그를 사용하여 테이블의 푸터 (footer) 내용을 그룹화할 수 있습니다. 테이블 푸터는 요약 정보, 설명 노트 또는 주석을 포함할 수 있습니다. <tfoot> 태그는 <table> 태그의 자식 중 하나이며, <thead> 및 <tbody> 태그와 함께 사용됩니다. 이 랩에서는 <tfoot> 태그를 사용하여 HTML 에서 테이블 푸터를 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
테이블 헤더 (header), 테이블 바디 (body) 및 테이블 푸터 (footer) 섹션을 포함하는 기본 테이블 구조를 생성하는 것으로 시작합니다.
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Table Footer</td>
</tr>
</tfoot>
</table>
</body>
</html>위 코드에서는 이름, 나이, 성별의 세 개의 열 (column) 을 가진 기본 테이블 구조를 생성했습니다. 또한 테이블에 세 개의 데이터 행 (row) 을 추가했습니다. <tfoot> 태그는 세 개의 열에 걸쳐 있는 하나의 셀 (<td>) 을 가진 하나의 행 (colspan="3") 만 포함합니다.
기본 테이블 구조를 생성한 후, <tfoot> 태그에 내용을 추가할 수 있습니다.
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average Age:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>이 예제에서는 테이블에 있는 사람들의 평균 나이를 포함하는 행을 <tfoot> 태그에 추가했습니다. 행의 첫 번째 셀은 두 개의 열 (colspan="2") 에 걸쳐 있으며 "Average Age:" 텍스트를 표시합니다. 두 번째 셀은 실제 평균 나이 값을 표시합니다.
<tfoot> 태그와 해당 자식 요소에 CSS 스타일을 적용하여 테이블 푸터의 모양을 조정할 수 있습니다.
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
<style>
tfoot {
background-color: #ccc;
font-weight: bold;
text-align: center;
}
tfoot td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Male</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Male</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Average Age:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>이 예제에서는 CSS tfoot 선택자를 사용하여 <tfoot> 태그에 배경 색상, 글꼴 굵기 및 텍스트 정렬 스타일을 적용했습니다. 또한 tfoot td 선택자를 사용하여 테이블 푸터 섹션 내의 셀에 패딩 (padding) 을 적용했습니다.
<tfoot> 태그는 테이블의 푸터 내용을 그룹화하는 데 사용됩니다. <thead> 및 <tbody> 태그와 함께 작동하여 완전한 테이블 구조를 만듭니다. HTML 및 CSS 를 사용하여 <tfoot> 태그와 해당 자식 요소에 내용과 스타일을 추가할 수 있습니다.
