HTML - 頭部與標題

歡迎，有志於網頁開發的各位！今天，我們將進入HTML頭部與標題的精彩世界。作為一個教學多年的老師，我可以告訴你，精通這些元素會讓你的表格看起來專業且有序。那麼，我們開始吧！

語法

在我們深入細節之前，讓我們先來討論我們將要使用的語法。在HTML中，我們使用特定的標籤來定義表格的頭部和標題。以下是一個快速概覽：

標籤	說明
<thead>	定義表格中的一個頭部組
<th>	定義表格中的一個頭部單元格
<caption>	為表格指定一個標題

現在，如果這些看起來像是一堆字母湯，請不要擔心。我們會一步步分解，很快你就會像專家一樣使用這些標籤！

HTML頭部和標題的例子

讓我們從一個簡單的例子開始，看看這些標籤是如何實際運作的。

<table>
<caption>我最喜歡的書籍</caption>
<thead>
<tr>
<th>書名</th>
<th>作者</th>
<th>年份</th>
</tr>
</thead>
<tbody>
<tr>
<td>《梅岡城故事》</td>
<td>哈珀·李</td>
<td>1960</td>
</tr>
<tr>
<td>《1984》</td>
<td>喬治·奧威爾</td>
<td>1949</td>
</tr>
</tbody>
</table>

讓我們來分解這個例子：

1. 我們從<table>標籤開始創建我們的表格。
2. <caption>標籤給我們的表格加上了一個標題："我最喜歡的書籍"。
3. <thead>部分包含我們的表頭行。
4. 在<thead>內部，我們有一個<tr>（表格行），其中有三個<th>（表格頭部）單元格。
5. <tbody>部分包含我們的數據行，每行都有<td>（表格數據）單元格。

當這個表格被渲染時，它將有一個清晰的表頭行，文字為粗體，這樣可以讓人容易理解每個列代表的是什麼。

結合使用''和' '

現在，讓我們更進一步，並為我們的表格添加一個腳部使用<tfoot>標籤。

<table>
<caption>書籍銷量</caption>
<thead>
<tr>
<th>書名</th>
<th>作者</th>
<th>銷量</th>
</tr>
</thead>
<tbody>
<tr>
<td>《了不起的盖茨比》</td>
<td>F. 斯科特·菲茨傑拉德</td>
<td>25,000,000</td>
</tr>
<tr>
<td>《麥田捕手》</td>
<td>J.D. 塞林格</td>
<td>65,000,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">總銷量：</th>
<td>90,000,000</td>
</tr>
</tfoot>
</table>

在這個例子中：

1. 我們在<tbody>後面添加了一個<tfoot>部分。
2. 腳部行使用<th colspan="2">來創建一個跨越兩列的表頭單元格。
3. 腳部的最後一個單元格顯示總銷量。

這種結構有助於將主要內容（<tbody>）與摘要信息（<tfoot>）分開，使表格更加有組織且容易閱讀。

<thead>與<th>的區別

現在，我常看到學生將<thead>和<th>搞混，所以讓我們來澄清一下：

• <thead>：這是一個用於表格頭部內容的容器。它將頭部信息組織在一起。
• <th>：這定義了表格中的一個個別的頭部單元格。

將<thead>想像成一個裝滿所有頭部信息的盒子，而<th>是盒子中的每一個標籤。

讓我們看看這是如何實際運作的：

<table>
<thead>
<tr>
<th>名字</th>
<th>年齡</th>
<th>國家</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>美國</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>加拿大</td>
</tr>
</tbody>
</table>

在這個例子中：

1. <thead>包圍了整個頭部部分。
2. 在<thead>內部，我們有一個單一的<tr>（表格行）。
3. 在那個行內，我們有三個<th>單元格作為我們的列標題。

記住，如果你需要，你可以在你的<thead>中有多個行。

總結來說，讓我們看看一個總結我們學到的所有標籤的表格：

標籤	用途	示例
<table>	創建一個表格	<table>...</table>
<caption>	為表格添加一個標題	<caption>我的表格</caption>
<thead>	組合頭部內容	<thead>...</thead>
<th>	定義一個頭部單元格	<th>列名</th>
<tbody>	組合正文內容	<tbody>...</tbody>
<tfoot>	組合腳部內容	<tfoot>...</tfoot>
<tr>	創建一個表格行	<tr>...</tr>
<td>	創建一個標準數據單元格	<td>數據</td>

就是这样！你现在已經有了创建结构良好、可读性强的HTML表格的知识。记住，熟能生巧，所以不要害怕尝试这些标签。在你意识到之前，你将能够创建出任何数据分析师都会自豪的表格！

Credits: Image by storyset