HTML <table> 元件代表表格數據──換句話說,就是透過二維資料表來呈現資訊。

內容分類 流內容
允許內容
按照以下順序:
  1. 一個可選的<caption>元素,
  2. 零個或更多的<colgroup>元素,
  3. 一個可選的<thead>元素,
  4. 一個在以下元素之前或之後的可選 <tfoot> 元素:
    • 零個或更多的<tbody>元素,
    • 或者,一個或更多的<tr>元素
標籤省略 None, both the starting and ending tag are mandatory.
允許父元素 Any element that accepts flow content
允許 ARIA 規則 Any
DOM 介面 HTMLTableElement

屬性

這個元件包含了 全域屬性(global attributes)。本頁所列的以下屬性都被棄用了。

align
這個枚舉屬性會指示表格中的文字要如何對齊。可用值如下:
  • left:意思是表格應該顯示在文件的左方。
  • center:意思是表格應該顯示在文件的中間。
  • right:意思是表格應該顯示在文件的右方。
注意
  • 不要使用這個屬性,因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。你可以用 CSS 得出類似 align 屬性的效果,例如要置中的話,就把 margin-leftmargin-right 設為 auto(或把 margin 設為 0 auto)。
  • 在 Firefox 4 以前,Firefox 在怪異模式(quirks mode)下支援 middleabsmiddle、還有 abscentercenter 的同義詞。
bgcolor
這個屬性定義了表格的背景與內容顏色。它使用了由 sRGB 定義的六位十六進制數,前缀需要加上 '#' 。其中有十六種預先定義的顏色字串可用:
  black = "#000000"   green = "#008000"
  silver = "#C0C0C0"   lime = "#00FF00"
  gray = "#808080"   olive = "#808000"
  white = "#FFFFFF"   yellow = "#FFFF00"
  maroon = "#800000"   navy = "#000080"
  red = "#FF0000"   blue = "#0000FF"
  purple = "#800080"   teal = "#008080"
  fuchsia = "#FF00FF"   aqua = "#00FFFF"
注意:不要使用這個屬性,因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。要得出類似 bgcolor 屬性的效果,你可以用 CSSbackground-color 屬性。
border
這個屬性,以像素為單位,定義了圍繞於表格框架的大小。如果設為 0,代表 frame 屬性為空。
注意:不要使用這個屬性,因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。要得出類似 border 屬性的效果,你可以用 borderborder-colorborder-width 以及border-style
cellpadding
這個屬性定義了元件與邊界線之間的空白,要不要顯示。如果輸入像素,像素長度的空白會套用到四個邊;如果輸入百分比,內容將居中、整體的垂直空間(上與下)會使用這個百分比表示。橫向空間(左與右)也適用這個規則。
注意:不要使用這個屬性,因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。 要得出類似 cellpadding 屬性的效果,你可以用 CSS 針對 <table> 本身的 border-collapse 屬性加上 value collapse,以及 <td>padding 屬性。
cellspacing
這個屬性藉由百分比或是像素,定義了各框框之間、第一排與表格頂部的、左方第一列與表格最左邊、右方最後一列與表格最右邊、以及第最後一排與表格底部的,所有框框間空白的大小(無論直向或橫向)。
注意:不要使用這個屬性,因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。要得出類似 cellspacing 屬性的效果,你可以透過CSSborder-spacing 針對 <table> 本身實做。
frame
這個枚舉屬性定義圍繞在表格邊框的哪一邊要顯示。它可能有以下數值:
  above   below
  hsides   vsides
  lhs   rhs
  border   box
  void
注意:不要使用這個屬性,因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。 要得出類似 frame 屬性的效果,你可以用 CSSborder-styleborder-width 屬性。
rules
這個枚舉屬性定義諸如線條之類的規則,要如何出現在表格。它擁有以下數值:
  • none,代表沒有任何規則上的指示。這是預設值。
  • groups,只標示行群組和列群組(行群組由 <thead><tbody>、和 <tfoot> 定義;列群組由 <col><colgroup> 定義);
  • rows,會創立一組標示行的規則;
  • columns,會創立一組標示列的規則;
  • all,會創立一組同時標示行與列的規則。
注意::
  • 這個樣式的規則依賴瀏覽器且無法被更改。
  • 不要使用這個屬性,因為它已經被棄用。編排應該用 CSS 制定。適當地針對 <thead><tbody><tfoot><col><colgroup> 元素使用 CSSborder 屬性去編排。
summary
這個屬性規定了表格如果無法顯示,用戶應該用什麼可選文字作為代理。通常,它包含令視障使用者(例如使用點字螢幕的盲人)獲取表格的資訊。如果該資訊對非視障使用者也很重要的話,請考慮使用 <caption> 元素。summary 屬性並不是必要的:如果 <caption> 元素滿足其作用,這個屬性可以省略。
注意:不要使用這個屬性,因為它已經被棄用。作為描述表格的替代,請在這些方法之下擇一使用:
  • 表格旁邊的附註文(這種方法的語義表達較差)
  • 表格內的 <caption> 元素。
  • 表格內 <caption> 元素的 <details> 元素。
  • <table> 元素包在一個 <figure> 元素中,並在旁邊添加description in prose。
  • <table> 元素包在一個 <figure> 元素中,並在旁邊添加如<figcaption> 的元件。
  • 調整表格以使這種敘述不再需要,像是使用 <th><thead> 元素。
width
這個屬性定義了表格的寬度。它可以使用像素或是百分比數值。百分比數值意味著表格應當使用的容器長度之百分比。
注意:不要使用這個屬性,因為它已經被棄用。排版應當使用 CSS。請使用 CSSwidth 屬性。

範例

簡單的表格

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

更多範例

<p>Simple table with header</p>
<table>
  <tr>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

<p>Table with colgroup</p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col style="background-color: #0f0">
    <col span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

<p>Simple table with caption</p>
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

無障礙議題

字幕

提供 <caption> 元素,以便清晰而簡潔地描述表格主旨。他能讓用戶決定自己是否該閱讀表格內容,還是要略過就好。

如此也能幫助螢幕閱讀器之類的輔具使用者、視力條件差、還有認知障礙的人。

Scope 行列

雖然在 HTML5 裡面 scope 屬性已經過時,但很多螢幕閱讀器會利用這屬性,複製不使用屏幕閱讀器的人的視覺關聯,以便推斷可能的視覺位置。

示例

<table>
  <caption>Color names and values</caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>

<th> 元素提供 scope="col" 的宣告,有助於描述該單位屬於第一列。在 <td> 元素提供 scope="row" 則有助於描述該單位屬於第一行。

複雜的表格

針對單格複雜到無法歸類於直向或橫向的表格,諸如螢幕閱讀器之類的輔助技術,可能就無法解析。在這種情況下,通常就需要 colspanrowspan 屬性。

理想情況下,可以考慮使用其他方式來呈現表格的內容,例如把表格切分到不必依賴 colspan 和 rowspan 屬性。除了幫助使用輔助技術的人了解表格的內容之外,這樣也會使認知障礙者受益,因為他們可能難以理解表格佈局描述的關聯。

如果表格無法切分,請結合 idheaders 使用,以便程序化地關聯各表格單位與標題。

規範

規範 狀態 註解
HTML Living Standard
The definition of 'table element' in that specification.
Living Standard  
HTML5
The definition of 'table element' in that specification.
Recommendation  

瀏覽器相容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1 Yes Yes Yes
align1 Yes1 Yes Yes Yes
bgcolor1 Yes1 Yes Yes Yes
border1 Yes1 Yes Yes Yes
cellpadding1 Yes1 Yes Yes Yes
cellspacing1 Yes1 Yes Yes Yes
frame1 Yes1 Yes Yes Yes
rules1 Yes1 Yes Yes Yes
summary1 Yes1 Yes Yes Yes
width1 Yes1 Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support118 Yes4 Yes Yes Yes
align118 Yes4 Yes Yes Yes
bgcolor118 Yes4 Yes Yes Yes
border118 Yes4 Yes Yes Yes
cellpadding118 Yes4 Yes Yes Yes
cellspacing118 Yes4 Yes Yes Yes
frame118 Yes4 Yes Yes Yes
rules118 Yes4 Yes Yes Yes
summary118 Yes4 Yes Yes Yes
width118 Yes4 Yes Yes Yes

參見

文件標籤與貢獻者

此頁面的貢獻者: iigmir
最近更新: iigmir,