Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

<table>

此文件需要技術審查。看看您能幫什麼忙。

此文件需要編輯審查。看看您能幫什麼忙。

HTML Table 元素 (<table>) 可以顯示兩行以上的資料。

注意:CSS 誕生以前,HTML <table> 元素常被用做排版。這種用法從 HTML 4 後就不鼓勵。<table> 元素也不應該作為排版用途。
不過,HTML 電子郵件是 table 仍常被用作排版用途的例外。之所以保留這種用法,是因為大多數的電子郵件用戶端對 CSS 的支援很糟糕

使用環境

內容分類 内容流
獲許可的內容
按照以下順序:
  1. 一個可選的<caption>元素,
  2. 零個或更多的<colgroup>元素,
  3. 一個可選的<thead>元素,
  4. 二選一:
    • 一個<tfoot>元素,後方接著:
      • 零個或更多的<tbody>元素,
      • 或者,一個或更多的<tr>元素,
    • 第二可選的,跟隨著一個可選的<tfoot>元素:
      • 零個或更多的<tbody>元素,
      • 或者,一個或更多的<tr>元素
標籤省略 不可。開始標籤與結束標籤都是強制要求。
獲許可的父元素 所有允許內容流的元素
規範文件 HTML5, section 4.9.1 (HTML4.01, section 11.2.1)

屬性

這個元件包含了 全域屬性(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> 元素。
  • Include the <table> element in a <figure> element and add the description in prose next to it.
  • Include the <table> element in a <figure> element and add the description in prose inside a <figcaption> element.
  • 調整表格以使這種敘述不再需要,像是使用 <th><thead> 元素。
width
這個屬性定義了表格的寬度。它可以使用像素或是百分比數值。百分比數值意味著表格應當使用的容器長度之百分比。
注意:不要使用這個屬性,因為它已經被棄用。排版應當使用 CSS。請使用 CSSwidth 屬性。

DOM 介面

這個元素實做了 HTMLTableElement 介面。

範例

簡單的表格

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

瀏覽器相容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0[1] 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0[1] 6.0 1.0

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

參見

文件標籤與貢獻者

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