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>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</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>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</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>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</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>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</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>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</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