HTML 表格基礎

本文將帶你瞭解 HTML 表格，涵蓋行、單元格、標題等基礎知識，以及如何使單元格跨越多列和多行，以及如何將列中的所有單元格分組以進行樣式設定。

預備知識	熟悉 HTML 基礎，如HTML 基礎語法中所述。
學習成果	表格的用途——組織表格資料。表格的非用途——佈局，或任何其他用途。基本表格語法——`<table>`、`<tr>` 和 `<td>`。使用 `<th>` 定義表頭。使用 `colspan` 和 `rowspan` 跨越多列和多行。

什麼是表格？

表格是由行和列組成的結構化資料集（表格資料）。表格允許你快速輕鬆地查詢表示不同型別資料之間某種連線的值，例如人與年齡、星期幾，或當地游泳池的時間表。

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

A swimming timetable showing a sample data table

表格在人類社會中被廣泛使用，並且已經使用了很長時間，如這份 1800 年的美國人口普查檔案所證明

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

因此，HTML 的創造者提供了在網路上結構化和呈現表格資料的方法也就不足為奇了。

表格是如何工作的？

表格的要點在於它的嚴格性。透過在行和列標題之間建立視覺關聯，資訊可以輕鬆解釋。例如，查看下錶，找出擁有 62 顆衛星的木星氣體巨行星。你可以透過關聯相關的行和列標題來找到答案。

<table>
  <caption>
    Data about the planets of our solar system (Source:
    <a href="https://nssdc.gsfc.nasa.gov/planetary/factsheet/"
      >Nasa's Planetary Fact Sheet - Metric</a
    >).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <td>
        Declassified as a planet in 2006, but this
        <a
          href="https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/"
          >remains controversial</a
        >.
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}

如果實施正確，HTML 表格可以很好地被螢幕閱讀器等輔助工具處理，因此一個成功的 HTML 表格應該能同時提升有視力障礙和無視力障礙使用者的體驗。

表格樣式

你還可以檢視 GitHub 上的行星資料即時示例！你會注意到，那裡的表格看起來更具可讀性——這是因為你在此頁面上看到的表格樣式極少，而 GitHub 版本則應用了更重要的 CSS。

毫無疑問，為了讓表格在網路上發揮作用，你需要使用 CSS 提供一些樣式資訊，並使用 HTML 提供良好的堅實結構。在本課中，我們將重點關注 HTML 部分；你將在我們未來的表格樣式課程中瞭解表格的樣式。

在本模組中，我們不會重點介紹 CSS，但我們為你提供了一個最小的 CSS 樣式表，你可以使用它使你的表格比沒有任何樣式時的預設表格更具可讀性。你可以在此處找到樣式表，你還可以找到一個應用了樣式表的HTML 模板——它們將為你嘗試 HTML 表格提供一個很好的起點。

何時應避免使用 HTML 表格？

HTML 表格應用於表格資料（易於處理行和列的資訊）——這是它們設計的初衷。不幸的是，很多人過去使用 HTML 表格來佈局網頁，例如一行包含頁面標題，一行包含每個內容列，一行包含頁尾等。這種技術過去之所以被使用，是因為瀏覽器對 CSS 的支援曾經非常有限。現代瀏覽器對 CSS 有很好的支援，因此不再需要基於表格的佈局。表格佈局現在極為罕見，但你可能仍然會在網路的某些角落看到它們。

簡而言之，使用表格進行佈局而不是CSS 佈局技術是一個糟糕的主意。主要原因如下：

佈局表格降低了視障使用者的可訪問性：盲人使用的螢幕閱讀器會解釋 HTML 頁面中存在的標籤並向用戶朗讀內容。由於表格不是佈局的正確工具，並且標記比 CSS 佈局技術更復雜，因此螢幕閱讀器的輸出會讓使用者感到困惑。
表格會產生標籤湯：如上所述，表格佈局通常涉及比適當佈局技術更復雜的標記結構。這可能導致程式碼更難編寫、維護和除錯。
表格並非自動響應式：當你使用適當的佈局容器（例如<header>、<section>、<article> 或<div>）時，它們的寬度預設為其父元素的 100%。另一方面，表格預設根據其內容調整大小，因此需要額外的措施才能使表格佈局樣式在各種裝置上有效工作。

建立你的第一個表格

我們已經討論了足夠的表格理論，現在，讓我們深入研究一個實際示例，讓你構建一個簡單的表格。

首先，在本地機器上的新目錄中複製 blank-template.html 和 minimal-table.css。HTML 模板已經包含一個 <link> 元素來將 CSS 應用到 HTML，所以你無需擔心。
每個表格的內容都包含在以下兩個標籤中：<table></table>。將它們新增到 HTML 的 body 中。
表格中最小的容器是表格單元格，它透過 <td> 元素建立（“td”代表“table data”）。將以下內容新增到你的表格標籤中
html
```
<td>Hi, I'm your first cell.</td>
```
如果我們想要一行四個單元格，我們需要複製這些標籤三次。更新你的表格內容，使其看起來像這樣
html
```
<td>Hi, I'm your first cell.</td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>
```

正如你所看到的，單元格不是彼此放置在下方，而是自動在同一行中對齊。每個 <td> 元素建立一個單元格，它們共同構成第一行。我們新增的每個單元格都會使行變長。

為了阻止此行增長並開始在第二行放置後續單元格，我們需要使用 <tr> 元素（“tr”代表“table row”）。現在我們來研究一下。

將你已經建立的四個單元格放置在 <tr> 標籤內，如下所示

html

<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>

現在你已經建立了一行，嘗試再建立一兩行——每行都需要用額外的 <tr> 元素包裹，每個單元格都包含在 <td> 中。

點選此處顯示解決方案

您完成的 HTML 應該看起來像這樣

html

<table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>

  <tr>
    <td>Second row, first cell.</td>
    <td>Cell 2.</td>
    <td>Cell 3.</td>
    <td>Cell 4.</td>
  </tr>
</table>

你還可以在 GitHub 上找到此程式碼：simple-table.html（也可在此處檢視即時執行）。

使用 <th> 元素新增標題

現在讓我們把注意力轉向表頭——位於行或列開頭，定義該行或列所含資料型別的特殊單元格（例如，本文第一個示例中顯示的“人物”和“年齡”單元格）。為了說明它們的用途，請看以下表格示例。首先是原始碼

html

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

現在是實際渲染的表格

這裡的問題在於，雖然你大致可以理解發生了什麼，但交叉引用資料並沒有那麼容易。如果列和行標題以某種方式突出顯示，那會好得多。

為狗的表格新增標題

現在我們希望你嘗試透過新增一些標題來改進狗的表格示例。

首先，在本地計算機上的新目錄中複製我們的 dogs-table.html 和 minimal-table.css 檔案。
要將表格標題識別為標題，無論是在視覺上還是語義上，你都可以使用 <th> 元素（“th”代表“table header”）。它的工作方式與 <td> 完全相同，只是它表示標題，而不是普通單元格。進入你的 HTML，將所有圍繞表格標題的 <td> 元素更改為 <th> 元素。
儲存你的 HTML 並在瀏覽器中載入它，你應該會看到標題現在看起來像標題。

點選此處顯示解決方案

您完成的 HTML 應該看起來像這樣

html

<table>
  <tr>
    <td>&nbsp;</td>
    <th>Knocky</th>
    <th>Flor</th>
    <th>Ella</th>
    <th>Juan</th>
  </tr>
  <tr>
    <th>Breed</th>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <th>Age</th>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <th>Owner</th>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <th>Eating Habits</th>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

你還可以在 GitHub 上找到此程式碼：dogs-table-fixed.html（也可在此處檢視即時執行）。

標題為何有用？

我們已經部分回答了這個問題——當標題清晰突出時，更容易找到你要查詢的資料，而且設計通常看起來更好。

注意：表格標題帶有預設樣式——它們是粗體和居中的，即使你不向表格新增自己的樣式，以幫助它們突出顯示。

表格標題還有一個額外的好處——結合 scope 屬性（我們將在下一篇文章中學習），它們可以透過將每個標題與同一行或列中的所有資料關聯起來，從而使表格更具可訪問性。然後，螢幕閱讀器能夠一次性讀出整行或整列資料，這非常有用。

允許單元格跨越多行和多列

有時我們希望單元格跨越多行或多列。以下是一個簡單的示例，展示了常見動物的名稱。在某些情況下，我們希望在動物名稱旁邊顯示雄性和雌性的名稱。有時我們不希望，在這種情況下，我們只希望動物名稱跨越整個表格。

最初的標記如下所示

html

<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

但輸出結果與我們想要的並不完全一致

使用 `rowspan` 和 `colspan` 修復佈局

我們需要一種方法讓“動物”、“河馬”和“鱷魚”跨越兩列，而“馬”和“雞”向下跨越兩行。幸運的是，表格標題和單元格具有 colspan 和 rowspan 屬性，它們允許我們做這些事情。兩者都接受一個無單位的數字值，該值等於你希望跨越的行數或列數。例如，colspan="2" 使一個單元格跨越兩列。

讓我們使用 colspan 和 rowspan 來改進這個表格。

首先，在本地計算機上的新目錄中複製我們的 animals-table.html 和 minimal-table.css 檔案。HTML 包含你上面看到的相同的動物示例。
接下來，使用 colspan 讓“動物”、“河馬”和“鱷魚”跨越兩列。
最後，使用 rowspan 讓“馬”和“雞”跨越兩行。
儲存程式碼並在瀏覽器中開啟，檢視改進效果。

點選此處顯示解決方案

您完成的 HTML 應該看起來像這樣

html

<table>
  <tr>
    <th colspan="2">Animals</th>
  </tr>
  <tr>
    <th colspan="2">Hippopotamus</th>
  </tr>
  <tr>
    <th rowspan="2">Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th colspan="2">Crocodile</th>
  </tr>
  <tr>
    <th rowspan="2">Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

你還可以在 GitHub 上找到此程式碼：animals-table-fixed.html（也可在此處檢視即時執行）。

總結

這總結了 HTML 表格的基礎知識。在下一篇文章中，我們將探討一些可以使 HTML 表格對視障人士更易於訪問的更多功能。

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於2025 年 8 月 28 日，由MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題