HTML - 表格：結構化網頁內容的入門

你好，有抱負的網頁開發者！今天，我們將要深入HTML表格的奇妙世界。作為你們親切友善的鄰居計算機老師，我非常興奮能夠帶領你們踏上這次旅程。相信我，到了這個教程的結尾，你將會像專家一樣創建表格！

HTML - Tables

為什麼在HTML中使用表格？

想像一下你正在試圖組織你喜歡的書籍、作者和出版日期。你可以把所有內容寫在一段文字中，但那會很亂且難以閱讀。這就是HTML表格發揮作用的地方！

HTML表格讓我們能夠以結構化的、網格狀的格式呈現數據。它們完美適用於：

顯示表格數據（如電子表格）
為內容創建整齊的佈局
以易於閱讀的方式組織信息

如何在HTML中創建表格？

讓我們從基礎開始。在HTML中創建表格就像用樂高積木建築一樣。你從基礎開始，然後不斷添加部件，直到你的傑作完成。

這裡有一個簡單的例子：

<table>
<tr>
<th>書名</th>
<th>作者</th>
<th>出版年份</th>
</tr>
<tr>
<td>《梅根鳥的鳴叫》</td>
<td>哈珀·李</td>
<td>1960</td>
</tr>
<tr>
<td>《1984》</td>
<td>喬治·奧威爾</td>
<td>1949</td>
</tr>
</table>

讓我們分解這個例子：

<table>: 這個標籤告訴瀏覽器，“喂，我這裡開始一個表格！”
<tr>: 這代表“表格行”。它就像在表格中開始一行。
<th>: 這是一個“表格標題”。它用於列的標題。
<td>: 這意味著“表格數據”。這是你在表格中放置實際信息的地方。

HTML表格的一切

現在我們已經掌握了基礎，讓我們來探索HTML表格的一些更令人興奮的功能！

定義HTML表格

當定義一個表格時，把它想像成繪製一張地圖。你需要清楚地勾勒出它的結構。這裡有一個帶有一些附加屬性的例子：

<table border="1" cellpadding="5" cellspacing="0">
<caption>我最喜歡的書籍</caption>
<thead>
<tr>
<th>標題</th>
<th>作者</th>
<th>類型</th>
</tr>
</thead>
<tbody>
<tr>
<td>《了不起的盖茨比》</td>
<td>F. 斯科特·菲茨傑拉德</td>
<td>經典</td>
</tr>
<tr>
<td>《飢餓遊戲》</td>
<td>蘇珊·柯林斯</td>
<td>青少年文學</td>
</tr>
</tbody>
</table>

在這個例子中：

border="1" 在表格單元格周圍添加邊框。
cellpadding="5" 在每個單元格內添加一些空間。
cellspacing="0" 移除單元格之間的空間。
<caption> 為你的表格添加一個標題。
<thead> 將表頭內容分組。
<tbody> 將表格身體內容分組。

設計HTML表格

記得上學時我們裝飾筆記本的日子嗎？設計HTML表格與之非常相似！讓我們添加一些顏色：

<table style="border-collapse: collapse; width: 100%;">
<tr style="background-color: #f2f2f2;">
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">名稱</th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">年齡</th>
</tr>
<tr>
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">John Doe</td>
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">25</td>
</tr>
</table>

在這裡，我們使用內聯CSS來設計我們的表格。這就像為表格的每部分獨特地選擇一套衣服！

表格背景顏色和圖像

想要讓你的表格脫穎而出？讓我們添加一些背景花樣：

<table style="background-color: #e6f7ff; background-image: url('paper.gif');">
<tr>
<th>列 1</th>
<th>列 2</th>
</tr>
<tr>
<td>數據 1</td>
<td>數據 2</td>
</tr>
</table>

這個表格將具有淡藍色的背景和一個紙質纹理的圖像叠加。這就像給你的表格舉行一個主題派對！

表格寬度和高度

就像我們調整書桌空間一樣，我們可以設定表格的尺寸：

<table style="width: 100%; height: 200px;">
<tr>
<td style="width: 30%;">這個單元格佔據表格寬度的30%</td>
<td>這個單元格會調整以填滿其餘空間</td>
</tr>
</table>

這個表格將會伸展到容器的全寬並高200像素。第一個單元格將始終佔據總寬度的30%。

嵌套HTML表格

有時候，你需要一個表格內部的表格。這就像那些俄羅斯套娃，但用數據來表達！

<table border="1">
<tr>
<td>
主單元格
<table border="1">
<tr>
<td>嵌套表格單元格 1</td>
<td>嵌套表格單元格 2</td>
</tr>
</table>
</td>
<td>另一個主單元格</td>
</tr>
</table>

這會在另一個表格的單元格內創建一個表格。這對於複雜的數據結構非常完美！

HTML表格相關標籤

讓我們將我們學到的所有與表格相關的標籤以表格形式總結：

標籤	描述
`<table>`	定義一個表格
`<tr>`	定義一個表格行
`<th>`	定義一個表格頭
`<td>`	定義一個表格單元格
`<caption>`	定義一個表格標題
`<thead>`	在表格中分組表頭內容
`<tbody>`	在表格中分組身體內容
`<tfoot>`	在表格中分組頁腳內容
`<colgroup>`	指定一個表格中的一個或多個列的格式
`<col>`	指定 `<colgroup>` 元素內每個列的屬性

視頻 - HTML表格

雖然我這裡不能直接嵌入視頻，但我強烈推薦在YouTube上搜索“HTML Tables Tutorial”。實際看到表格是如何一步步建立的會非常有幫助！

這就是你的HTML表格速成課程。記住，熟能生巧。嘗試為不同類型的數據創建表格——也許是你的課程表、喜歡的電影列表，甚至是家族樹。可能性無限！

快樂編程，願你的表格總是完美對齊！

Credits: Image by storyset