?
This document uses PHP Chinese website manual Release
HTML <table>
元素表示表格數(shù)據(jù)-即,通過兩維數(shù)據(jù)表表示的信息。
內(nèi)容類別 | 流量內(nèi)容 |
---|---|
允許的內(nèi)容 | 按以下順序:可選的<caption>元素,零個或多個<colgroup>元素,可選的<thead>元素,可以是以下任一元素:零個或多個<tbody>元素一個或多個<tr>元素可選<tfoot >元素 |
標記遺漏 | 沒有,起始和結(jié)束標簽都是強制性的。 |
允許父母 | 任何接受流內(nèi)容的元素 |
允許ARIA角色 | 任何 |
DOM界面 | HTMLTableElement |
一個可選<caption>
元素,
零個或多個<colgroup>
元素,
一個可選<thead>
元素,
以下任何一項:
零個或多個<tbody>
元素
一個或多個<tr>
元素
一個可選<tfoot>
元素
Tag omission None, both the starting and ending tag are mandatory. Permitted parents Any element that accepts flow content Permitted ARIA roles Any DOM interface [`HTMLTableElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement)
該元素包含全局屬性。此頁面上列出的以下屬性現(xiàn)在已被棄用。
align
此枚舉屬性指示如何在包含文檔中對齊表。它可能有以下值:
left:表格顯示在文檔的左側(cè);
center:表格顯示在文檔的中心;
right:表格顯示在文檔的右側(cè)。
用法說明
不要使用此屬性,因為它已被棄用。該<table>
元素應該使用CSS進行樣式化。設(shè)置margin-left
并margin-right
以auto
或margin
以0 auto
達到類似于align屬性的效果。
之前火狐4,火狐也支持middle
,absmiddle
和abscenter
值作為同義詞center
,僅在特殊模式。
bgcolor
屬性定義表格的背景顏色。它由sRGB中定義的6位十六進制代碼組成,前綴為'#'。該屬性可以與十六個預定義顏色字符串中的一個一起使用:
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進行樣式化。使用CSS中的background-color
屬性創(chuàng)建與bgcolor
屬性類似的效果。
border
此整數(shù)屬性以像素為單位定義表格周圍框架的大小。如果設(shè)置為0,則該frame
屬性設(shè)置為void。
使用說明:不要使用此屬性,因為它已被棄用。該<table>
元素應該使用CSS進行樣式化。要創(chuàng)建類似border屬性的效果border
,border-color
,border-width
和border-style
CSS屬性應該被使用。
cellpadding
屬性定義了單元格的內(nèi)容與其邊框之間的空格,顯示與否。如果cellpadding的長度以像素定義,則此像素大小的空間將應用于單元格內(nèi)容的所有四邊。如果長度是使用百分比值定義的,則內(nèi)容將居中并且總的垂直空間(頂部和底部)將表示該值??偹娇臻g也是如此(左側(cè)和右側(cè))。
使用說明:不要使用此屬性,因為它已被棄用。該<table>
元素應該使用CSS進行樣式化。要創(chuàng)建類似的cellpadding屬性的效果,適用于border-collapse
屬性的<table>
元素,它的值設(shè)置為崩潰,該padding
財產(chǎn)的<td>
元素。
cellspacing
屬性以百分比值或像素定義兩個單元格之間的空間大小。該屬性在水平和垂直方向上應用到表格的頂部和第一行的單元格之間,表格和第一列的左側(cè),表格的右側(cè)以及最后一列和底部表和最后一行。
使用說明:不要使用此屬性,因為它已被棄用。<table>
元素應該使用CSS進行樣式化。要創(chuàng)建與cellspacing屬性類似的效果,請將該屬性應用于border-spacing
<table>
元素。如果border-collapse
設(shè)置為折疊,則邊框間距不起任何作用。
frame
此枚舉屬性定義了必須顯示表格周圍框架的哪一側(cè)。它可能有以下值:
above | below | ||
---|---|---|---|
hsides | vsides | ||
lhs | rhs | ||
border | box | ||
void |
使用說明:不要使用此屬性,因為它已被棄用。該<table>
元素應該使用CSS進行樣式化。要創(chuàng)建類似于框架屬性的效果,請使用border-style
和border-width
屬性。
rules
此枚舉屬性定義規(guī)則(即行)應出現(xiàn)在表中的位置。它可以有以下值:
無,表示不會顯示任何規(guī)則; 它是默認值;
行組(由定義的之間被顯示的組,這將導致的規(guī)則<thead>
,<tbody>
和<tfoot>
元素)和列組之間(由定義<col>
和<colgroup>
元素)僅;
行,這將導致規(guī)則在行之間顯示;
列,這將導致規(guī)則在列之間顯示;
所有這些都會導致規(guī)則在行和列之間顯示。
注意:
規(guī)則的樣式依賴于瀏覽器,不能修改。
不要使用此屬性,因為它已被棄用。應該使用CSS定義和設(shè)置規(guī)則。在應用border
屬性到合適的<thead>
,<tbody>
,<tfoot>
,<col>
或<colgroup>
元素。
summary
屬性定義了匯總表格內(nèi)容的替代文本。通常情況下,它允許有盲人屏幕瀏覽網(wǎng)頁的視障人士獲取關(guān)于表格的信息。如果通過此屬性添加的信息對未視覺障礙的人也有用,請考慮使用<caption>
替代方法。摘要屬性不是強制性的,當<caption>
元素履行其職責時可以省略。
用法注意:不要使用此屬性,因為它已被棄用。相反,請選擇其中一種方法來添加表格的說明:
在表格周圍使用散文(這種方法語義較少)。
在表格<caption>
元素中添加說明。
<details>
在表格的<caption>
元素內(nèi)添加一個元素的描述。
將<table>
元素包含在元素中,<figure>
并在旁邊添加散文中的描述。
將<table>
元素包含在元素中<figure>
,并將元素中的描述添加為散文<figcaption>
。
調(diào)整表格以便不需要描述(例如使用<th>
和<thead>
元素)。
width
屬性定義了表格的寬度。寬度可以由像素或百分比值來定義。百分比值將由放置表的容器的寬度來定義。
用法注意:不要使用此屬性,因為它已被棄用。應該使用CSS定義和設(shè)置規(guī)則。改用width
屬性。
<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> <tbody> <tr> <td>Body content 1</td> <td>Body content 2</td> </tr> </tbody> <tfoot> <tr> <td>Footer content 1</td> <td>Footer content 2</td> </tr> </tfoot> </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>
規(guī)范 | 狀態(tài) | 評論 |
---|---|---|
HTML Living Standard規(guī)范中'表元素'的定義。 | Living Standard | |
HTML5該規(guī)范中'表元素'的定義。 | 建議 |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic Support | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
align | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
bgcolor | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
border | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
cellpadding | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
cellspacing | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
frame | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
rules | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
summary | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
width | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
align | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
bgcolor | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
border | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
cellpadding | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
cellspacing | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
frame | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
rules | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
summary | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |
width | 1 | 1 | (Yes) | 1 | (Yes) | (Yes) | (Yes) |