初學者指南：HTML 表格

更新日期： 2024 年 10 月 16 日

在學習 HTML 的過程中，表格（Table） 是一個非常有用的工具。

它能夠幫助你以有序的方式顯示數據，無論是展示統計資訊、商品價格列表，還是課程時間表，HTML 表格都能夠讓信息清晰可見。

在這篇文章中，我們將介紹如何使用 HTML 創建表格，並幫助你掌握表格的基本用法。

HTML 表格的基本結構

在 HTML 中，表格是使用 <table> 標籤來創建的。表格的基本結構包含行和單元格，並使用以下幾個標籤來組織數據：

• <table>：定義整個表格。
• <tr>：定義表格中的一行（Table Row）。
• <th>：定義表頭中的一個單元格（Table Header），通常用來標示列標題，文字會被自動加粗且置中。
• <td>：定義表格中的一個數據單元格（Table Data）。

範例表格

下面是一個基本的表格範例：

<table border="1">
  <tr>
    <th>姓名</th>
    <th>年齡</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>25</td>
    <td>工程師</td>
  </tr>
  <tr>
    <td>小美</td>
    <td>30</td>
    <td>設計師</td>
  </tr>
</table>

在這個例子中：

• <table> 創建了一個表格，並設置了邊框（border="1"）以便更容易看清楚表格的結構。
• <tr> 用來創建表格的每一行。
• <th> 創建了表格的標題行，包含姓名、年齡、職業。
• <td> 創建了表格的數據行，每個 <td> 代表一個數據單元格。

表格的進階屬性

scope 屬性

scope 屬性用於 <th> 標籤，幫助屏幕閱讀器更好地理解表格的結構。

它可以有以下幾個值：

• col：表示標題適用於整列。
• row：表示標題適用於整行。
• colgroup 和 rowgroup：表示標題適用於列組或行組。

這對於無障礙設計非常有幫助，特別是在複雜表格中可以提高可讀性和可訪問性。

<table border="1">
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">年齡</th>
    <th scope="col">職業</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>25</td>
    <td>工程師</td>
  </tr>
</table>

border 屬性

border 用於設置表格的邊框。

例如 border="1" 可以為表格添加邊框，使表格更加清晰易見。

現代開發中更多使用 CSS 來設定樣式。

合併單元格：colspan 和 rowspan

• colspan：用於合併列。
  • 例如，如果你想讓某個單元格橫跨多列，可以使用 colspan。

  <tr>
    <td colspan="2">合併了兩列的單元格</td>
  </tr>

• rowspan：用於合併行。
  • 如果你想讓某個單元格縱跨多行，可以使用 rowspan。

  <tr>
    <td rowspan="2">合併了兩行的單元格</td>
    <td>第一行，第二列</td>
  </tr>
  <tr>
    <td>第二行，第二列</td>
  </tr>

表格標題：<caption>

<caption> 用於為表格添加標題，通常位於 <table> 標籤的第一個子元素。

<table border="1">
  <caption>員工信息表</caption>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
    <th>職業</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>25</td>
    <td>工程師</td>
  </tr>
</table>

這樣可以為表格增加一個描述性的標題，方便用戶理解表格的內容。

表格語意標籤：<thead>、<tbody>、<tfoot>

<thead>、<tbody> 和 <tfoot> 是用來將表格內容分組的語意標籤，這些標籤能幫助瀏覽器和開發者更好地理解表格的結構。

• <thead>：用於定義表格的表頭部分，通常包含列標題。
• <tbody>：用於定義表格的主體部分，包含實際的數據內容。
• <tfoot>：用於定義表格的表尾部分，通常包含總計或附加資訊，位於表格的最下方。

使用這些標籤可以使表格更有組織性，尤其在處理大型或複雜表格時更為重要。

<table border="1">
  <caption>商品清單</caption>
  <thead>
    <tr>
      <th>商品名稱</th>
      <th>價格</th>
      <th>數量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>蘋果</td>
      <td>$1</td>
      <td>50</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>$0.5</td>
      <td>100</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">總計</td>
      <td>150</td>
    </tr>
  </tfoot>
</table>

在這個例子中，<thead> 用於分組表格的標題行，<tbody> 用於分組主要的數據內容，而 <tfoot> 則用於分組總計部分，這樣可以讓代碼結構更清晰且易於維護。

使用 CSS 美化表格

雖然 HTML 本身可以創建表格，但如果想讓表格更加美觀，通常會使用 CSS 來美化表格。

範例：使用 CSS 美化表格

<style>
  table {
    width: 50%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <caption>商品價格表</caption>
  <thead>
    <tr>
      <th>商品名稱</th>
      <th>價格</th>
      <th>數量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>蘋果</td>
      <td>$1</td>
      <td>50</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>$0.5</td>
      <td>100</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">總計</td>
      <td>150</td>
    </tr>
  </tfoot>
</table>

在這裡，我們使用了 border-collapse 來使邊框合併，padding 用於增加單元格內的空白，使內容更易讀，而 background-color 則用於區分表頭和數據部分。

表格的應用場景

1. 數據展示：HTML 表格非常適合用來展示結構化數據，如商品清單、統計報告等。
2. 排程表：可以用來創建課程表、工作計劃等，讓內容一目了然。
3. 價格列表：展示商品或服務的價格、規格等詳細信息，讓用戶方便比較。

注意事項

1. 避免過度使用表格進行佈局：在早期網頁設計中，表格常被用來進行頁面佈局，但現代開發中更推薦使用 CSS 進行佈局，以提高代碼的語義性和可維護性。
2. 保持表格簡潔：對於複雜數據，應該合理分組和標註，讓表格更易於閱讀和理解。

結論

HTML 表格是一個非常強大的工具，可以用來顯示結構化的數據。

通過本文的介紹，你應該已經了解了如何創建表格、使用一些進階屬性來控制表格的顯示，以及如何通過 CSS 來美化表格。

希望這篇文章能幫助你掌握 HTML 表格的基本用法，讓你能夠輕鬆創建出清晰、美觀的數據展示。