<table>：表格元素

基線 廣泛可用

此功能已得到良好建立，並且可在許多裝置和瀏覽器版本中使用。它自以下時間起在所有瀏覽器中可用： 2015 年 7 月.

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

試一試

屬性

此元素包含 全域性屬性。

已棄用屬性

以下屬性已棄用，不應使用。在更新現有程式碼和出於歷史參考目的時，下面會記錄這些屬性。

align

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

bgcolor

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

border

定義表格周圍邊框的大小（以畫素為單位的非負整數）。如果設定為0，則frame屬性將設定為 void。請使用border CSS 屬性代替，因為此屬性已棄用。

cellpadding

定義單元格內容與其邊框之間的間距。此屬性已過時：請勿使用它，而是將padding CSS 屬性應用於<th>和<td>元素。

cellspacing

定義兩個單元格之間的間距大小。此屬性已過時：請勿使用它，而是將border-spacing CSS 屬性設定為<table>元素。請注意，如果<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>元素）相關聯。

示例

下面的示例包含複雜度逐漸增加的表格。有關其他示例（包括深入教程），請參閱HTML 表格系列，該系列位於學習 Web 開發區域，您將在其中學習如何使用表格元素及其屬性來正確構建表格資料。表格樣式指南提供了表格樣式資訊，包括常見的有用技術。

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

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

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

第一個示例是基本的，後續示例的複雜度會逐漸增加。首先，我們將為表格開發一個非常基本的 HTML 表格結構。前兩個示例不包含表格分節組（如定義的表頭、主體或腳註），也不涉及單元格跨越或明確定義的單元格關係。甚至沒有提供標題。在完成這些示例的過程中，它們將逐步增強，以包含複雜資料表格應具備的所有表格功能。

基本表格

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

HTML

表格行使用<tr>元素定義，列使用其中的表格標題和資料單元格定義。第一行包含標題單元格（<th>元素），它們用作資料單元格（<td>元素）的列標題。每行中的每個元素（<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-side 屬性將 <caption> 放置在表格的 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 規則設定表格表頭中所有 <tr> 元素的 background-color（如使用 <thead> 指定）。然後將表頭的底部邊框設定為兩畫素寬的線條。但是，請注意，我們正在使用 :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;
}

在小空間中顯示大型表格

Web 上表格的一個常見問題是，當內容量很大時，它們在小螢幕上不能很好地原生工作，並且使它們可滾動的操作並不明顯，尤其是在標記可能來自 CMS 並且無法修改為具有包裝器的情況下。

此示例提供了一種在小空間中顯示錶格的方法。我們隱藏了 HTML 內容，因為它非常大，並且沒有任何特別之處。在此示例中，CSS 更實用。

CSS

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

為了在向下滾動時使表格標題保持在頁面上，我們已將position設定為sticky，應用於<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: #fff;
  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

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱