<td>: 表格資料單元格元素

基線廣泛可用

此功能已久經考驗，並在許多裝置和瀏覽器版本上正常工作。它自 2015 年 7 月.

The <td> HTML 元素定義表格中的一個單元格，它包含資料，可以作為 <tr> 元素的子元素使用。

試一試

屬性

此元素包括全域性屬性.

colspan: 包含一個非負整數，指示資料單元格所跨越或擴充套件的列數。預設值為 1。使用者代理會將超過 1000 的值視為不正確，並設定為預設值 (1)。
表頭: 包含一個空格分隔的字串列表，每個字串對應於為該表格單元格提供表頭的 <th> 元素的 id 屬性。
行跨度: 包含一個非負整數，指示資料單元格所跨越或擴充套件的行數。預設值為 1；如果其值為 0，則擴充套件到單元格所屬的表格分組部分（<thead>、<tbody>、<tfoot>，即使是隱式定義的）的末尾。大於 65534 的值將被擷取為 65534。

已棄用的屬性

以下屬性已棄用，不應再使用。它們在下面列出是為了參考更新現有程式碼和了解歷史資訊。

abbr 已棄用: 包含資料單元格內容的簡短縮寫描述。一些使用者代理（如語音閱讀器）可能會在內容本身之前呈現此描述。將縮寫的內容放在單元格內，並將（更長的）描述放在 title 屬性中，因為此屬性已棄用。或者，最好將內容包含在資料單元格中，並使用 CSS 來視覺上剪裁溢位文字。
align 已棄用: 指定資料單元格的水平對齊方式。可能的列舉值為 left、center、right、justify 和 char。如果支援，char 值將文字內容對齊到在 char 屬性中定義的字元，以及在 charoff 屬性中定義的偏移量。使用 text-align CSS 屬性代替，因為此屬性已棄用。
axis 已棄用: 包含一個空格分隔的字串列表，每個字串對應於資料單元格所應用的一組單元格的 id 屬性。
bgcolor 已棄用: 定義資料單元格的背景顏色。該值是一個 HTML 顏色；可以是 6 位十六進位制 RGB 程式碼（以 '#' 為字首），或顏色關鍵字。其他 CSS <color> 值不受支援。使用 background-color CSS 屬性代替，因為此屬性已棄用。
char 已棄用: 不執行任何操作。它最初的目的是指定內容對齊到資料單元格的一個字元。這方面的一些典型值包括句點 (.)，當嘗試對齊數字或貨幣值時。如果 align 未設定為 char，則會忽略此屬性。
charoff 已棄用: 不執行任何操作。它最初的目的是指定將資料單元格內容從由 char 屬性指定的對齊字元偏移多少個字元。
height 已棄用: 定義推薦的資料單元格高度。使用 height CSS 屬性代替，因為此屬性已棄用。
scope 已棄用: 定義標題（在 <th> 中定義）元素所關聯的單元格。可能的列舉值為 row、col、rowgroup 和 colgroup。僅將此屬性與 <th> 元素一起使用來定義它是哪個行的標題，因為此屬性已在 <td> 元素中棄用。
valign 已棄用: 指定資料單元格的垂直對齊方式。可能的列舉值為 baseline、bottom、middle 和 top。使用 vertical-align CSS 屬性代替，因為此屬性已棄用。
width 已棄用: 定義推薦的資料單元格寬度。使用 width CSS 屬性代替，因為此屬性已棄用。

使用注意事項

<td> 只能在 <tr> 元素內使用。
當使用 colspan 和 rowspan 屬性將資料單元格跨越多列和多行時，未定義這些屬性的單元格（預設值為 1）會自動填充到表格結構中跨越 1x1 單元格的可用空間，如下圖所示：

注意：這些屬性不能用於使單元格重疊。

示例

有關完整表格示例，請參閱 <table>，其中介紹了常見標準和最佳實踐。

基本資料單元格

此示例使用 <td> 元素以及其他與表格相關的元素來介紹一個包含語音字母資料的基本表格。

HTML

一些表格行（<tr> 元素）包含表頭單元格（<th> 元素）和資料單元格 <td> 元素。作為每行的第一個子元素的 <th> 元素構成表格的第一列，每個 <th> 為該行內的資料單元格提供行表頭。每個相應的 <td> 元素包含與其各自的列表頭和行表頭單元格對齊的資料。

注意：通常，會實現包含列表頭的表格頭組，以便更容易理解列中的資訊。 <thead> 和 <tbody> 元素將用於將此類表頭行和資料行分組到各自的表格頭部分和主體部分。為了集中討論資料單元格並降低此示例的複雜性，此示例中未實現這一點。

html

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

一些基本的 CSS 用於為表格及其單元格設定樣式。CSS 屬性選擇器和 :nth-of-type 偽類用於交替更改單元格的外觀，以便更容易理解和識別表格中的資訊。

css

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

tr:nth-of-type(odd) td {
  background-color: #eee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

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

結果

列跨度和行跨度

此示例透過新增一個額外的“ABC”單元格來擴充套件和增強上一個示例中的基本表格。

HTML

在第一行（<tr> 元素）中引入了一個額外的表格資料單元格 (<td> 元素)。這會在表格中建立第四列。

使用 rowspan 屬性，“ABC”單元格跨越了表格的前三行。後續行的最後一個數據單元格都跨越了兩列。這透過使用 colspan 屬性完成，將它們正確地對齊到表格結構中。請注意，添加了一行（<tr> 元素）到表格中以說明這一點。

html

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td rowspan="3">ABC</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

CSS

:first-of-type 和 :last-of-type 偽類在 CSS 中使用，以選擇和設定新增的“ABC”資料單元格的樣式。

css

tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

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

tr:nth-of-type(odd) td {
  background-color: #eee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

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

結果

將資料單元格與表頭單元格關聯

對於資料單元格 (<td> 元素) 和表頭單元格（<th> 元素）之間更復雜的關係，僅使用具有 scope 屬性的 <th> 元素可能不足以滿足輔助技術（特別是螢幕閱讀器）的需求。

HTML

為了提高上一個示例的可訪問性，並使螢幕閱讀器能夠說出與每個資料單元格關聯的表頭，可以引入 headers 屬性和 id 屬性。與“ABC”資料單元格關聯的每個行表頭單元格（<th> 元素），即字母“A”、“B”和“C”，都使用 id 屬性獲得唯一的識別符號。“ABC”資料單元格 (<td> 元素) 然後在 headers 屬性的空格分隔列表中使用這些 id 值。

注意：建議為 id 屬性使用更具描述性和更有用的值。文件中的每個 id 必須在該文件中是唯一的。在此示例中，id 值是單個字元，以便集中關注 headers 屬性的概念。

html

<table>
  <tr>
    <th id="a" scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td headers="a b c" rowspan="3">ABC</td>
  </tr>
  <tr>
    <th id="b" scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th id="c" scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

結果

雖然視覺結果與上一個示例表格相同，但現在每個資料單元格 (<td>) 都明確地與其行表頭單元格 (<th>) 關聯。

技術摘要

內容類別	分割槽根。
允許的內容	流內容.
標籤省略	開始標籤是必需的。如果結束標籤緊隨其後的是一個 `<th>` 或 `<td>` 元素，或者父元素中沒有更多資料，則可以省略結束標籤。
允許的父元素	一個 `<tr>` 元素。
隱式 ARIA 角色	`cell`（如果它是 `<table>` 元素的後代）
允許的 ARIA 角色	任何
DOM 介面	`HTMLTableCellElement`

規範

規範
HTML 標準 # the-td-element

瀏覽器相容性

BCD 表格僅在瀏覽器中載入

另請參閱

瞭解：HTML 表格
<caption>、<col>、<colgroup>、<table>、<tbody>、<tfoot>、<th>、<thead>、<tr>：其他與表格相關的元素
background-color：用於設定每個資料單元格背景顏色的 CSS 屬性
border：用於控制資料單元格邊框的 CSS 屬性
height：用於控制推薦資料單元格高度的 CSS 屬性
text-align：用於水平對齊每個資料單元格內容的 CSS 屬性
vertical-align：用於垂直對齊每個資料單元格內容的 CSS 屬性
width：用於控制推薦資料單元格寬度的 CSS 屬性
:nth-of-type、:first-of-type、:last-of-type：用於選擇所需資料單元格的 CSS 偽類