7.1 태그 <caption>
<caption>, <thead>, <tbody> 그리고 <tfoot> 태그는
HTML에서 표의 구조화를 개선하고 의미론적 마크업을 위해 사용돼. 이 태그들은 데이터를 정리하여 사용자와 검색 엔진 모두에게 더 이해하기 쉽게 만들어줘.
<caption> 태그
<caption> 태그는 표에 제목을 추가하는 데 사용돼. 이건 표의 내용을 설명하는 데 도움을 주고, 사용자와 검색 엔진에게 더 이해하기 쉽게 만들어줘.
문법:
HTML
<table>
<caption>표 제목</caption>
<!-- 표 내용 -->
</table>
예제:
HTML
<table>
<caption>표 제목</caption>
<tr>
<th>이름</th>
<th>점수</th>
</tr>
<tr>
<td>이반</td>
<td>90</td>
</tr>
<tr>
<td>마리야</td>
<td>85</td>
</tr>
</table>
7.2 태그 <thead>
<thead> 태그는 표 머리글 행을 그룹화하는 데 사용돼. 표의 머리글을 주요 내용과 논리적으로 구분하는 데 도움을 줘.
문법:
HTML
<table>
<thead>
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
</thead>
<!-- 표 내용 -->
</table>
예제:
HTML
<table>
<thead>
<tr>
<th>이름</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>이반</td>
<td>90</td>
</tr>
<tr>
<td>마리야</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 태그 <tbody>
<tbody> 태그는 표의 주요 내용을 그룹화하는 데 사용돼. 이 태그는 주요 내용을 표의 머리글과 풋터(꼬리글)와 구분하는 데 도움을 줘.
문법:
HTML
<table>
<thead>
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
</thead>
<tbody>
<!-- 표 내용 -->
</tbody>
</table>
예제:
HTML
<table>
<thead>
<tr>
<th>이름</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>이반</td>
<td>90</td>
</tr>
<tr>
<td>마리야</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 태그 <tfoot>
<tfoot> 태그는 표의 풋터(하단)을 그룹화하는 데 사용돼. 주로 요약 정보를 포함하고 있어.
문법:
HTML
<table>
<thead>
<tr>
<th>제목 1</th>
<th>제목 2</th>
</tr>
</thead>
<tbody>
<!-- 표 내용 -->
</tbody>
<tfoot>
<tr>
<td>합계 1</td>
<td>합계 2</td>
</tr>
</tfoot>
</table>
전체 예제:
HTML
<table>
<thead>
<tr>
<th>이름</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>이반</td>
<td>90</td>
</tr>
<tr>
<td>마리야</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>평균 점수</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
이걸 외우는 건 사실 아주 간단해:
표 구조 설명
<table>: 전체 표의 외부 컨테이너<caption>: 표의 내용을 설명하는 제목<thead>: 표 머리글 행을 그룹화<tbody>: 표의 주요 내용을 그룹화<tfoot>: 표의 풋터(하단) 행을 그룹화
자료를 다지는 시간
이번에는 모든 태그를 사용해서 표를 만들고 스타일링을 해보자.
HTML
<table>
<caption>시험 결과</caption>
<thead>
<tr>
<th>이름</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<td>이반</td>
<td>91</td>
</tr>
<tr>
<td>마리야</td>
<td>94</td>
</tr>
<tr>
<td>니나</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>평균 점수</td>
<td>91.33</td>
</tr>
</tfoot>
</table>
CSS
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION