1. Web
  2. HTML
  3. 參考
  4. 元素
  5. <table>

<table>：Table 元素

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

<table> HTML 元素表示表格資料，即以二維表格形式呈現的資訊，該表格由包含資料的行和列組成。

試一試

<table>
  <caption>
    Front-end web developer course 2021
  </caption>
  <thead>
    <tr>
      <th scope="col">Person</th>
      <th scope="col">Most interest in</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML tables</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">Dennis</th>
      <td>Web accessibility</td>
      <td>45</td>
    </tr>
    <tr>
      <th scope="row">Sarah</th>
      <td>JavaScript frameworks</td>
      <td>29</td>
    </tr>
    <tr>
      <th scope="row">Karen</th>
      <td>Web performance</td>
      <td>36</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Average age</th>
      <td>33</td>
    </tr>
  </tfoot>
</table>

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

thead,
tfoot {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td:last-of-type {
  text-align: center;
}

tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

屬性

此元素包含全域性屬性。

已棄用屬性

以下屬性已棄用，不應使用。它們僅在更新現有程式碼時作為參考和出於歷史興趣而在此處記錄。

align

指定表格在其父元素中的水平對齊方式。可能的列舉值包括left、center和right。請改用margin-inline-start和margin-inline-end CSS 屬性，因為此屬性已棄用。

bgcolor

定義表格的背景顏色。該值是 HTML 顏色；可以是帶#字首的6 位十六進位制 RGB 程式碼，也可以是顏色關鍵字。不支援其他 CSS <color> 值。請改用background-color CSS 屬性，因為此屬性已棄用。

border

定義圍繞表格的框架大小（以畫素為單位的非負整數值）。如果設定為0，則frame屬性將設定為空。請改用border CSS 屬性，因為此屬性已棄用。

cellpadding

定義單元格內容與其邊框之間的空間。此屬性已過時：請改用將padding CSS 屬性應用於<th>和<td>元素。

cellspacing

定義兩個單元格之間空間的尺寸。此屬性已過時：請改用在<table>元素上設定border-spacing CSS 屬性。請注意，如果<table>元素的border-collapse CSS 屬性設定為collapse，則此屬性無效。

frame

定義必須顯示錶格周圍框架的哪一側。可能的列舉值包括void、above、below、hsides、vsides、lhs、rhs、box和border。請改用border-style和border-width CSS 屬性，因為此屬性已棄用。

rules

定義表格中規則（邊框）的顯示位置。可能的列舉值包括none（預設值）、groups（<thead>、<tbody>和<tfoot>元素）、rows（水平線）、cols（垂直線）和all（每個單元格周圍的邊框）。請改用在適當的表格相關元素以及<table>本身上設定border CSS 屬性，因為此屬性已棄用。

summary

定義總結表格內容的替代文字。請改用<caption>元素，因為此屬性已棄用。

width

指定表格的寬度。請改用width CSS 屬性，因為此屬性已棄用。

注意：雖然 HTML 規範中不包含height作為<table>屬性，但某些瀏覽器支援對height的非標準解釋。無單位值設定最小絕對高度（以畫素為單位）。如果設定為百分比值，則最小表格高度將相對於父容器的高度。請改用min-height CSS 屬性，因為此屬性已棄用。

表格內容的視覺佈局

以下元素是表格結構的一部分

<table>框建立了一個表格格式化上下文。<table>內的元素根據以下規則生成矩形框

  1. 行框按照原始碼順序從上到下填充表格。每個行框佔據一列單元格。
  2. 行組框佔據一個或多個行框。
  3. 列框按照原始碼順序彼此相鄰放置。根據dir屬性的值，列從左到右或從右到左排列。列框佔據一個或多個表格單元格列。
  4. 列組框佔據一個或多個列框。
  5. 單元格框可以跨越多個行和列。使用者代理會修剪單元格以適應可用的行和列數。

表格單元格具有內邊距。構成表格的框沒有外邊距。

表格圖層和透明度

出於樣式目的，表格元素可以被認為是放置在六個疊加層上

Table element layers

僅當其上方的圖層具有透明背景時，一個圖層上設定的元素背景才可見。缺失的單元格將像一個匿名錶格單元格框佔據該位置一樣呈現。

無障礙

標題

透過提供一個清晰簡潔地描述表格用途的<caption>元素，可以幫助人們決定是否需要查看錶格的其餘內容或跳過它。

這有助於藉助輔助技術（如螢幕閱讀器）進行導航的人、視力低下者以及有認知障礙的人。

作用域行和列

在簡單上下文中，表頭單元格（<th>元素）上的scope屬性是多餘的，因為作用域是推斷出來的。但是，某些輔助技術可能無法進行正確的推斷，因此指定表頭作用域可以改善使用者體驗。在複雜的表格中，可以指定scope以提供有關與表頭相關的單元格的必要資訊。

複雜表格

螢幕閱讀器等輔助技術可能難以解析過於複雜的表格，因為表頭單元格無法以嚴格的水平或垂直方式關聯。這通常由colspan和rowspan屬性的存在表示。

理想情況下，考慮其他方式呈現表格內容，包括將其分解為一組更小的、相關的表格，這些表格不必依賴使用colspan和rowspan屬性。除了幫助使用輔助技術的人理解表格內容外，這還可能使有認知障礙的人受益，他們可能難以理解表格佈局所描述的關聯。

如果表格無法拆分，請結合使用id和headers屬性，以程式設計方式將每個表格單元格與其關聯的表頭（<th>元素）關聯起來。

示例

以下示例包含複雜性逐步增加的表格。另請參閱我們的初學者表格樣式指南，瞭解表格樣式資訊，包括常見且有用的技術。

由於<table>的結構涉及使用多個表格相關的 HTML 元素以及各種關聯屬性，因此以下示例旨在提供一個涵蓋基礎知識和常見標準的簡化解釋。可以在相應的連結頁面上找到更多詳細資訊。

這些表格示例演示瞭如何建立使用 HTML 構建並使用 CSS 樣式化的可訪問表格。

由於 HTML 表格的結構方式，標記可能會迅速增長。因此，明確定義表格的用途和最終外觀以建立適當的結構非常重要。使用語義標記開發的邏輯結構不僅更容易設定樣式，而且能夠建立有用且可訪問的表格，所有人都（包括搜尋引擎和輔助技術使用者）都能理解和導航。

第一個例子是基礎的，隨後的例子複雜性逐漸增加。首先，我們將為表格開發一個非常基本的 HTML 表格結構。前兩個例子不包含定義的頭部、主體或底部等表格分割槽組，不涉及單元格跨越或明確定義的單元格關係。甚至沒有提供標題。在我們完成這些例子時，它們將逐步增強以包含複雜資料表格應具備的所有表格特性。

基本表格

此示例包含一個非常基本的表格，有三行兩列。為了演示預設瀏覽器表格樣式，此示例中未包含任何 CSS。

HTML

表格行由<tr>元素定義，列由其中的表頭和資料單元格定義。第一行包含用作資料單元格（<td>元素）列標題的表頭單元格（<th>元素）。每行中的每個元素（<th>或<td>）都位於其各自的列中——即，一行中的第一個元素位於第一列，該行中的第二個元素位於第二列。

html
<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Maria Sanchez</td>
    <td>28</td>
  </tr>
  <tr>
    <td>Michael Johnson</td>
    <td>34</td>
  </tr>
</table>

結果

此表格未應用自定義 CSS 或 使用者樣式表。樣式結果純粹來自 使用者代理樣式表。

帶表頭單元格的擴充套件表格

此示例擴充套件了基本表格，擴充套件了內容並添加了基本的 CSS 樣式。

HTML

該表格現在包含四行（<tr>元素），每行有四列。第一行是表頭單元格行（第一行只包含<th>元素）。隨後的行包括一個表頭列（<th>元素作為每行的第一個子元素）和三個資料列（<td>元素）。由於未使用表格分割槽元素，瀏覽器會自動定義內容組結構，即所有行都包含在隱式<tbody>元素的表格主體中。

html
<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS

使用 CSS，我們提供了基本樣式，在表格元件周圍建立線條，以使資料結構更清晰。CSS 在<table>周圍和表格的每個單元格周圍添加了一個實心邊框，包括那些用<th>和<td>元素指定的單元格，從而劃分每個表頭和資料單元格。

css
table {
  border: 2px solid rgb(140 140 140);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

結果

指定表格單元格關係

在以更高階的方式擴充套件表格之前，建議透過定義表頭和資料單元格（<th>和<td>元素）之間的關係來提高可訪問性。

HTML

這透過在<th>元素上引入scope屬性並將其值設定為相應的col（列）或row值來完成。

html
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">ID</th>
    <th scope="col">Member Since</th>
    <th scope="col">Balance</th>
  </tr>
  <tr>
    <th scope="row">Margaret Nguyen</th>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <th scope="row">Edvard Galinski</th>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th scope="row">Hoshi Nakamura</th>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

CSS 和視覺結果不變——該適配為螢幕閱讀器等輔助技術提供了有價值的上下文資訊，以幫助識別表頭與哪些單元格相關。

注意：如果表格結構更復雜，在<th>和<td>元素上（額外）使用headers屬性可以改善可訪問性並幫助輔助技術識別單元格之間的關係；請參閱複雜表格。

明確指定表格分割槽組

除了透過指定單元格關係來提高可訪問性之外，還可以透過引入表格分割槽組來改進表格的語義。

HTML

由於第一行（<tr>元素）只包含列標題單元格併為表格其餘內容提供標題，因此可以將其包含在<thead>元素中，以明確指定該行作為表格的頭部。此外，瀏覽器自動完成的內容也可以明確定義——表格的主體部分，包含表格的主要資料，透過將相應的行包含在<tbody>元素中來指定。明確使用<tbody>元素有助於瀏覽器建立預期的表格結構，避免不需要的結果。

html
<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">ID</th>
      <th scope="col">Member Since</th>
      <th scope="col">Balance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

再次強調，CSS 和視覺效果不變——指定此類表格分割槽組為輔助技術（包括螢幕閱讀器和搜尋引擎）以及 CSS 中的樣式提供了有價值的上下文資訊，這將在後續示例中展示。

列和行跨越

在此示例中，我們透過新增一列並引入多行頭部部分來進一步擴充套件表格。

HTML

在迄今為止建立的表格基礎上，在每個主體行中添加了一個新的“會員結束日期”列，使用<td>元素。在頭部部分（<thead>元素）內還添加了一行（<tr>元素），以引入“會員日期”標題作為“加入”和“取消”列的標題。

第二個標題行的建立涉及向<th>元素新增colspan和rowspan屬性，以將標題單元格分配到正確的列和行。

html
<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

結果

頭部部分現在有兩行，一行包含標題單元格（<th>元素）“姓名”、“ID”、“會員日期”和“餘額”，以及一個“會員日期”標題，該標題在第二行中包含兩個子標題：“加入”和“取消”。這是透過以下方式實現的

  • 第一行的“姓名”、“ID”和“餘額”標題單元格使用rowspan屬性跨越了兩個表格標題行，使它們各高兩行。
  • 第一行的“會員日期”標題單元格使用colspan屬性跨越了兩列，使其寬度為兩列。
  • 第二行只包含“加入”和“取消”這兩個表頭單元格，因為其他三列與第一行中跨越兩行的單元格合併。這兩個表頭單元格正確地位於“會員日期”表頭下方。

表格標題和列摘要

為表格內容提供摘要是一種常見且值得推薦的做法，它可以讓使用者快速判斷表格的相關性。此外，“餘額”列透過顯示各個成員的餘額總和進行彙總。

HTML

透過使用表格標題（<caption>元素）作為<table>的第一個子元素來新增表格摘要。標題為表格提供了可訪問名稱或可訪問描述。

最後，在表格主體下方添加了一個表格腳註部分（<tfoot>元素），其中包含一行，透過顯示總和來彙總“餘額”列。應用了之前介紹的元素和屬性。

html
<table>
  <caption>
    Status of the club members 2021
  </caption>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="col" rowspan="2">ID</th>
      <th scope="col" colspan="2">Membership Dates</th>
      <th scope="col" rowspan="2">Balance</th>
    </tr>
    <tr>
      <th scope="col">Joined</th>
      <th scope="col">Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</th>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</th>
      <td>533175</td>
      <td><time datetime="2011-01-13">January 13, 2011</time></td>
      <td><time datetime="2017-04-08">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</th>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="4">Total balance</th>
      <td>52.00</td>
    </tr>
  </tfoot>
</table>

結果

基本表格樣式

讓我們為表格應用基本樣式，調整字型併為頭部和腳部行新增background-color。這次 HTML 沒有變化，所以我們直接來看 CSS。

CSS

雖然這裡向<table>元素添加了font屬性以設定更具視覺吸引力的字型（或根據您的個人觀點，可能是一種令人厭惡的無襯線字型），但有趣的部分是第二個樣式，其中位於<thead>和<tfoot>內的<tr>元素被樣式化，添加了淺藍色background-color。這是一種快速同時為特定部分中的所有單元格應用背景顏色的方法。

css
table {
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

thead > tr,
tfoot > tr {
  background-color: rgb(228 240 245);
}

th,
td {
  border: 1px solid rgb(160 160 160);
}

結果

高階表格樣式

現在我們將全力以赴，對標題和正文區域中的行都進行樣式設定，包括交替行顏色、根據行內位置的不同顏色單元格等等。這次我們先看看結果。

結果

這是最終表格的外觀

HTML 再次沒有變化。看到了嗎，適當的 HTML 結構準備能帶來什麼？

CSS

這次 CSS 更加複雜。它不難，但涉及的內容很多。讓我們來分解一下。

這裡添加了border-collapse和border-spacing屬性，以消除單元格之間的間距，並使相互接觸的邊框合併為一個邊框，而不是出現雙重邊框。此外，<caption>使用caption-side屬性放置在表格的bottom

css
table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 2px solid rgb(140 140 140);
  font:
    16px "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

接下來，使用padding屬性為所有表格單元格的內容周圍留出空間。vertical-align屬性將表頭單元格的內容與單元格的bottom對齊，這可以在跨兩行的表頭單元格上看到

css
th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 4px 6px;
}

th {
  vertical-align: bottom;
}

下一個 CSS 規則設定表格頭部（使用<thead>指定）中所有<tr>元素的background-color。然後將頭部的下邊框設定為兩畫素寬的線。然而，請注意，我們使用:nth-of-type選擇器將border-bottom屬性應用於頭部的第二行。為什麼？因為頭部由一些單元格跨越的兩行組成。這意味著實際上有兩行；將樣式應用於第一行不會得到預期的結果

css
thead > tr {
  background-color: rgb(228 240 245);
}

thead > tr:nth-of-type(2) {
  border-bottom: 2px solid rgb(140 140 140);
}

讓我們用綠色和紅色來樣式化“已加入”和“已取消”這兩個表頭單元格，分別代表新成員的“好”和取消會員資格的“遺憾”。這裡我們使用:last-of-type選擇器深入到表格頭部部分的最後一行，並給它裡面的第一個表頭單元格（“已加入”表頭）一個綠色調，給它裡面的第二個表頭單元格（“已取消”表頭）一個紅色調

css
thead > tr:last-of-type > th:nth-of-type(1) {
  background-color: rgb(225 255 225);
}

thead > tr:last-of-type > th:nth-of-type(2) {
  background-color: rgb(255 225 225);
}

由於第一列也應該突出顯示，這裡也添加了一些自定義樣式。此 CSS 規則使用text-align屬性將表格主體每行中的第一個表頭單元格（成員姓名）左對齊，並使用略微不同的background-color進行樣式化

css
tbody > tr > th:first-of-type {
  text-align: left;
  background-color: rgb(225 229 244);
}

透過交替行顏色來提高表格資料的可讀性是很常見的——這有時被稱為“斑馬條紋”。讓我們為每個偶數行新增一點background-color

css
tbody > tr:nth-of-type(even) {
  background-color: rgb(237 238 242);
}

由於在表格中右對齊貨幣值是標準做法，我們在這裡也這樣做。這只是將每個主體行中最後一個<td>的text-align屬性設定為right

css
tbody > tr > td:last-of-type {
  text-align: right;
}

最後，對錶格的腳部部分應用了類似於頭部的樣式，使其也突出顯示

css
tfoot > tr {
  border-top: 2px dashed rgb(140 140 140);
  background-color: rgb(228 240 245);
}

tfoot th,
tfoot td {
  text-align: right;
  font-weight: bold;
}

在小空間中顯示大型表格

網頁表格的一個常見問題是，當內容量很大時，它們在小螢幕上的原生表現不佳，而且使其可滾動的方式並不明顯，特別是當標記可能來自 CMS 且無法修改以包含包裝器時。

此示例提供了一種在小空間中顯示錶格的方法。我們隱藏了 HTML 內容，因為它非常大，並且沒有什麼值得注意的地方。此示例中的 CSS 更值得檢查。

CSS

檢視這些樣式時，您會注意到表格的display屬性已設定為block。雖然這允許滾動，但表格失去了一些完整性，並且表格單元格會嘗試變得儘可能小。為了緩解這個問題，我們已將white-space設定為<tbody>上的nowrap。但是，我們不對<thead>執行此操作，以避免長標題強制列比顯示資料所需的寬度更寬。

為了在向下滾動時保持表格標題在頁面上，我們將position設定為<th>元素的粘性。請注意，我們沒有將border-collapse設定為collapse，因為如果我們這樣做，標題就無法正確地與表格的其餘部分分離。

考慮到<table>具有固定大小，此處將overflow設定為auto是重要部分，因為它使表格可滾動。

css
table,
th,
td {
  border: 1px solid black;
}

table {
  overflow: auto;
  width: 100%;
  max-width: 400px;
  height: 240px;
  display: block;
  margin: 0 auto;
  border-spacing: 0;
}

tbody {
  white-space: nowrap;
}

th,
td {
  padding: 5px 10px;
  border-top-width: 0;
  border-left-width: 0;
}

th {
  position: sticky;
  top: 0;
  background: white;
  vertical-align: bottom;
}

th:last-child,
td:last-child {
  border-right-width: 0;
}

tr:last-child td {
  border-bottom-width: 0;
}

結果

技術摘要

內容類別 流內容
允許內容 按此順序
  1. 一個可選的<caption>元素，
  2. 零個或多個<colgroup>元素，
  3. 一個可選的<thead>元素，
  4. 以下兩者之一
    • 零個或多個<tbody>元素
    • 一個或多個<tr>元素
  5. 一個可選的<tfoot>元素
標籤省略 無，起始標籤和結束標籤都必須存在。
允許父級 任何接受流內容的元素
隱式 ARIA 角色 table
允許的 ARIA 角色 任意
DOM 介面 HTMLTableElement

規範

規範
HTML
# the-table-element

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 ，由 MDN 貢獻者修訂。

在 GitHub 上檢視此頁面 • 報告此內容存在的問題
© . Content available under a Creative Commons license.