在學習 HTML 的過程中，表格（Table） 是一個非常有用的工具。
它能夠幫助你以有序的方式顯示數據，無論是展示統計資訊、商品價格列表，還是課程時間表，HTML 表格都能夠讓信息清晰可見。
在這篇文章中，我們將介紹如何使用 HTML 創建表格，並幫助你掌握表格的基本用法。
HTML 表格的基本結構
在 HTML 中，表格是使用
標籤來創建的。表格的基本結構包含行和單元格，並使用以下幾個標籤來組織數據：
：定義整個表格。
：定義表格中的一行（Table Row）。
| ：定義表頭中的一個單元格（Table Header），通常用來標示列標題，文字會被自動加粗且置中。
| ：定義表格中的一個數據單元格（Table Data）。
範例表格
下面是一個基本的表格範例：
| 姓名 |
年齡 |
職業 |
| 小明 |
25 |
工程師 |
| 小美 |
30 |
設計師 |
在這個例子中：
創建了一個表格，並設置了邊框（border="1"）以便更容易看清楚表格的結構。
用來創建表格的每一行。
| 創建了表格的標題行，包含姓名、年齡、職業。
| 創建了表格的數據行，每個 | 代表一個數據單元格。
表格的進階屬性
scope 屬性
scope 屬性用於 | 標籤，幫助屏幕閱讀器更好地理解表格的結構。
它可以有以下幾個值：
col：表示標題適用於整列。
row：表示標題適用於整行。
colgroup 和 rowgroup：表示標題適用於列組或行組。
這對於無障礙設計非常有幫助，特別是在複雜表格中可以提高可讀性和可訪問性。
border 屬性
border 用於設置表格的邊框。
例如 border="1" 可以為表格添加邊框，使表格更加清晰易見。
現代開發中更多使用 CSS 來設定樣式。
合併單元格：colspan 和 rowspan
colspan：用於合併列。
例如，如果你想讓某個單元格橫跨多列，可以使用 colspan。
|
| 合併了兩列的單元格 |
rowspan：用於合併行。
如果你想讓某個單元格縱跨多行，可以使用 rowspan。
| 合併了兩行的單元格 |
第一行，第二列 |
| 第二行，第二列 |
表格標題：
用於為表格添加標題，通常位於 標籤的第一個子元素。
這樣可以為表格增加一個描述性的標題，方便用戶理解表格的內容。
表格語意標籤：、 、
、 和 是用來將表格內容分組的語意標籤，這些標籤能幫助瀏覽器和開發者更好地理解表格的結構。
：用於定義表格的表頭部分，通常包含列標題。
：用於定義表格的主體部分，包含實際的數據內容。
：用於定義表格的表尾部分，通常包含總計或附加資訊，位於表格的最下方。
使用這些標籤可以使表格更有組織性，尤其在處理大型或複雜表格時更為重要。
商品清單
| 商品名稱 |
價格 |
數量 |
| 蘋果 |
$1 |
50 |
| 香蕉 |
$0.5 |
100 |
| 總計 |
150 |
在這個例子中， 用於分組表格的標題行， 用於分組主要的數據內容，而 則用於分組總計部分，這樣可以讓代碼結構更清晰且易於維護。
使用 CSS 美化表格
雖然 HTML 本身可以創建表格，但如果想讓表格更加美觀，通常會使用 CSS 來美化表格。
範例：使用 CSS 美化表格
商品價格表
| 商品名稱 |
價格 |
數量 |
| 蘋果 |
$1 |
50 |
| 香蕉 |
$0.5 |
100 |
| 總計 |
150 |
在這裡，我們使用了 border-collapse 來使邊框合併，padding 用於增加單元格內的空白，使內容更易讀，而 background-color 則用於區分表頭和數據部分。
表格的應用場景
數據展示：HTML 表格非常適合用來展示結構化數據，如商品清單、統計報告等。
排程表：可以用來創建課程表、工作計劃等，讓內容一目了然。
價格列表：展示商品或服務的價格、規格等詳細信息，讓用戶方便比較。
注意事項
避免過度使用表格進行佈局：在早期網頁設計中，表格常被用來進行頁面佈局，但現代開發中更推薦使用 CSS 進行佈局，以提高代碼的語義性和可維護性。
保持表格簡潔：對於複雜數據，應該合理分組和標註，讓表格更易於閱讀和理解。
結論
HTML 表格是一個非常強大的工具，可以用來顯示結構化的數據。
通過本文的介紹，你應該已經了解了如何創建表格、使用一些進階屬性來控制表格的顯示，以及如何通過 CSS 來美化表格。
希望這篇文章能幫助你掌握 HTML 表格的基本用法，讓你能夠輕鬆創建出清晰、美觀的數據展示。
|