©
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
HTML <table> 元素表示表格数据-即，通过两维数据表表示的信息。
内容类别 | 流量内容 |
|---|---|
允许的内容 | 按以下顺序：可选的<caption>元素，零个或多个<colgroup>元素，可选的<thead>元素，可以是以下任一元素：零个或多个<tbody>元素一个或多个<tr>元素可选<tfoot >元素 |
标记遗漏 | 没有，起始和结束标签都是强制性的。 |
允许父母 | 任何接受流内容的元素 |
允许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)
属性
该元素包含全局属性。此页面上列出的以下属性现在已被弃用。
align此枚举属性指示如何在包含文档中对齐表。它可能有以下值：
left：表格显示在文档的左侧;
center：表格显示在文档的中心;
right：表格显示在文档的右侧。
用法说明
不要使用此属性，因为它已被弃用。该
<table>元素应该使用CSS进行样式化。设置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属性创建与bgcolor属性类似的效果。
border此整数属性以像素为单位定义表格周围框架的大小。如果设置为0，则该frame属性设置为void。
使用说明：不要使用此属性，因为它已被弃用。该<table>元素应该使用CSS进行样式化。要创建类似border属性的效果border，border-color，border-width 和border-styleCSS属性应该被使用。
cellpadding属性定义了单元格的内容与其边框之间的空格，显示与否。如果cellpadding的长度以像素定义，则此像素大小的空间将应用于单元格内容的所有四边。如果长度是使用百分比值定义的，则内容将居中并且总的垂直空间（顶部和底部）将表示该值。总水平空间也是如此（左侧和右侧）。
使用说明：不要使用此属性，因为它已被弃用。该<table>元素应该使用CSS进行样式化。要创建类似的cellpadding属性的效果，适用于border-collapse属性的<table>元素，它的值设置为崩溃，该padding财产的<td>元素。
cellspacing属性以百分比值或像素定义两个单元格之间的空间大小。该属性在水平和垂直方向上应用到表格的顶部和第一行的单元格之间，表格和第一列的左侧，表格的右侧以及最后一列和底部表和最后一行。
使用说明：不要使用此属性，因为它已被弃用。<table>元素应该使用CSS进行样式化。要创建与cellspacing属性类似的效果，请将该属性应用于border-spacing<table>元素。如果border-collapse设置为折叠，则边框间距不起任何作用。
frame此枚举属性定义了必须显示表格周围框架的哪一侧。它可能有以下值：
above | below | ||
|---|---|---|---|
hsides | vsides | ||
lhs | rhs | ||
border | box | ||
void |
使用说明：不要使用此属性，因为它已被弃用。该<table>元素应该使用CSS进行样式化。要创建类似于框架属性的效果，请使用border-style和border-width属性。
rules此枚举属性定义规则（即行）应出现在表中的位置。它可以有以下值：
无，表示不会显示任何规则; 它是默认值;
行组（由定义的之间被显示的组，这将导致的规则
<thead>，<tbody>和<tfoot>元素）和列组之间（由定义<col>和<colgroup>元素）仅;行，这将导致规则在行之间显示;
列，这将导致规则在列之间显示;
所有这些都会导致规则在行和列之间显示。
注意：
规则的样式依赖于浏览器，不能修改。
不要使用此属性，因为它已被弃用。应该使用CSS定义和设置规则。在应用
border属性到合适的<thead>，<tbody>，<tfoot>，<col>或<colgroup>元素。
summary属性定义了汇总表格内容的替代文本。通常情况下，它允许有盲人屏幕浏览网页的视障人士获取关于表格的信息。如果通过此属性添加的信息对未视觉障碍的人也有用，请考虑使用<caption>替代方法。摘要属性不是强制性的，当<caption>元素履行其职责时可以省略。
用法注意：不要使用此属性，因为它已被弃用。相反，请选择其中一种方法来添加表格的说明：
在表格周围使用散文（这种方法语义较少）。
在表格
<caption>元素中添加说明。<details>在表格的<caption>元素内添加一个元素的描述。将
<table>元素包含在元素中，<figure>并在旁边添加散文中的描述。将
<table>元素包含在元素中<figure>，并将元素中的描述添加为散文<figcaption>。调整表格以便不需要描述（例如使用
<th>和<thead>元素）。
width属性定义了表格的宽度。宽度可以由像素或百分比值来定义。百分比值将由放置表的容器的宽度来定义。
用法注意：不要使用此属性，因为它已被弃用。应该使用CSS定义和设置规则。改用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>
规范
规范 | 状态 | 评论 |
|---|---|---|
HTML Living Standard规范中'表元素'的定义。 | Living Standard | |
HTML5该规范中'表元素'的定义。 | 建议 |
浏览器兼容性
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) |