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

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

Baseline 廣泛可用 *

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

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

<td> HTML 元素定義了表格中包含資料的單元格，可用作 <tr> 元素的子元素。

試一試

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

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

th[scope="col"] {
  background-color: #505050;
  color: white;
}

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

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

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;
}

屬性

此元素包含全域性屬性。

colspan

包含一個非負整數值，表示資料單元格跨越或延伸的列數。預設值為 1。使用者代理會將大於 1000 的值視為不正確，並將其設定為預設值 (1)。

headers

包含一個以空格分隔的字串列表，每個字串對應於為此表格單元格提供標題的 <th> 元素的 id 屬性。

rowspan

包含一個非負整數值，表示資料單元格跨越或延伸的行數。預設值為 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 單元格的可用空閒空間，如下圖所示

    Illustration demonstrating column and row spanning of table cells: cells 1, 3, and 4 spanning two rows; cell 2 spanning two columns; cells 5 and 6 fitting into the available cells that are the second and third columns in the second row

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

示例

請參閱 <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: #eeeeee;
}

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

結果

列和行跨越

此示例透過新增一個額外的“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

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

css
tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: white;
  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: #eeeeee;
}

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

結果

將資料單元格與標題單元格關聯

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

HTML

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

注意：建議為 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 角色 如果是一個 <table> 元素的後代，則為 cell；如果是一個具有 grid 角色的元素的後代，則為 gridcell
允許的 ARIA 角色 任意
DOM 介面 HTMLTableCellElement

規範

規範
HTML
# the-td-element

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面由 MDN 貢獻者 於 上次修改。

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