<table>

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>

規範

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

瀏覽器相容性

功能 Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
基本支援 1.0 1.0 (1.7 or earlier) (Yes) 4.0[1] 7.0 1.0
功能 Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
基本支援 1.0 1.0 (1) (Yes) 6.0[1] 6.0 1.0

[1] Internet Explorer 9 的 <table>:hover 有一個涉及渲染的錯誤;請參見 :hover 的「瀏覽器相容性」章節以獲取更多資訊。

參見

文件標籤與貢獻者

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