<table>

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

使用環境

屬性

這個元件包含了 全域屬性（global attributes）。被列在本頁的其他屬性可能會被棄用。

align

這個枚舉屬性會指示表格中的文字要如何對齊。可用值如下：

• left，意思是表格應該顯示在文件的左方。
• center，意思是表格應該顯示在文件的中間。
• right，意思是表格應該顯示在文件的右方。

注意

• 不要使用這個屬性，因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。你可以用 CSS 得出類似 align 屬性的效果，例如要置中的話，就把 margin-left 與 margin-right 設為 auto（或把 margin 設為 0 auto）。
• 在 Firefox 4 以前，Firefox 在怪異模式（quirks mode）下支援 middle、absmiddle、還有 abscenter：center 的同義詞。

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 屬性的效果，你可以用 CSS 的 background-color 屬性。

border

這個屬性，以像素為單位，定義了圍繞於表格框架的大小。如果設為 0，代表 frame 屬性為空。

注意：不要使用這個屬性，因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。要得出類似 border 屬性的效果，你可以用 border、border-color、border-width 以及border-style。

cellpadding

這個屬性定義了元件與邊界線之間的空白，要不要顯示。如果輸入像素，像素長度的空白會套用到四個邊；如果輸入百分比，內容將居中、整體的垂直空間（上與下）會使用這個百分比表示。橫向空間（左與右）也適用這個規則。

注意：不要使用這個屬性，因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。 要得出類似 cellpadding 屬性的效果，你可以用 CSS 針對 <table> 本身的 border-collapse 屬性加上 value collapse，以及 <td> 的 padding 屬性。

cellspacing

這個屬性藉由百分比或是像素，定義了各框框之間、第一排與表格頂部的、左方第一列與表格最左邊、右方最後一列與表格最右邊、以及第最後一排與表格底部的，所有框框間空白的大小（無論直向或橫向）。

注意：不要使用這個屬性，因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。要得出類似 cellspacing 屬性的效果，你可以透過CSS 的 border-spacing 針對 <table> 本身實做。

frame

這個枚舉屬性定義圍繞在表格邊框的哪一邊要顯示。它可能有以下數值：

	above		below
	hsides		vsides
	lhs		rhs
	border		box
	void

注意：不要使用這個屬性，因為它已經被棄用。<table> 元素的樣式應該用 CSS 制定。 要得出類似 frame 屬性的效果，你可以用 CSS 的 border-style 與 border-width 屬性。

rules

這個枚舉屬性定義諸如線條之類的規則，要如何出現在表格。它擁有以下數值：

• none，代表沒有任何規則上的指示。這是預設值。
• groups，只標示行群組和列群組（行群組由 <thead>、<tbody>、和 <tfoot> 定義；列群組由 <col> 與 <colgroup> 定義）；
• rows，會創立一組標示行的規則；
• columns，會創立一組標示列的規則；
• all，會創立一組同時標示行與列的規則。

注意：:

• 這個樣式的規則依賴瀏覽器且無法被更改。
• 不要使用這個屬性，因為它已經被棄用。編排應該用 CSS 制定。適當地針對 <thead>、<tbody>、<tfoot>、<col>、<colgroup> 元素使用 CSS 的 border 屬性去編排。

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。請使用 CSS 的 width 屬性。

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>

table
{
border-collapse: collapse;
border-spacing: 0px;
}
table, th, td
{
padding: 5px;
border: 1px solid black;
}

瀏覽器相容性

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

參見

• 其他與表格相關的元素：<caption>、<col>、<colgroup>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>；
• 可能在裝飾 <table> 元素的時候，派得上用場的 CSS 屬性：
  • 控制表格寬度的 width；
  • 控制格子邊界、規則和與框框方面的 border、border-style、border-color、border-width、border-collapse、border-spacing；
  • 裝飾各格子內部的 margin 與 padding；
  • 定義文字與格子內部對齊方式的text-align、vertical-align。