<table> - HTML（超文本标记语言） 编辑
HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
| 内容分类 | 流动内容 |
|---|---|
| 允许的内容 | 按照这个顺序： |
| 标签省略 | 不允许，开始标签和结束标签都不能省略。 |
| 允许的父元素 | 任何支持流内容的元素 |
| 允许的ARIA 角色 | Any |
| DOM 接口 | HTMLTableElement |
属性
表格标签支持全局属性。下面列出的属性现在已经弃用（请使用CSS代替）。
align- 这个枚举属性指定了包含在文档中的表格必须如何对齐。有如下值:
- left，表格将在文档左侧显示；
- center， 表格将在文档中央显示；
- right， 表格将在文档右侧显示；
- 不要使用这个属性，它已经不赞成被使用。
<table>元素应该使用CSS 制定样式。设置margin-left、margin-right为auto( 或者margin设置为 0 auto) 来实现类似于 align 属性的效果。 - Firefox 4 之前的版本，在 quirks mode 模式下它还支持
middle，absmiddle和近似于 center 的 abscenter。
bgcolor- 这个属性定义了表格的背景颜色。 它是一个6位的十六进制编码，定义于 sRGB，需要加上'#'作为前缀。 当然也可以使用下面已经被预先定义的字符串，来表示常用的16种颜色：
小贴士: 不要使用这个属性, 该属性已废弃，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属性被设置为空。如果设置为1，表示表格具有1px大小的边框。 小贴士: 不要使用这个属性, 该属性已废弃，<table>元素应当使用 CSS 定制样式。 CSS 属性border,border-color,border-width和border-style可实现相同效果。
cellpadding- 这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边；如果它是一个百分比的长度单位，内容将被作为中心，总的垂直（上和下）长度将代表这个百分比。这同样适用于总的水平（左和右）空间。 小贴士：不要使用这个属性，因为它已经被废弃。
<table>元素应该使用 CSS 定制样式。 在<table>元素上使用 CSS 属性值为 collapse 的border-collapse属性，在<td>元素上使用属性padding，以达到类似于 cellpadding 的效果。
cellspacing- 这个属性（使用百分比或像素）定义了两个单元格之间空间的大小（从水平和垂直方向上），包括了表格的顶部与第一行的单元格，表的左边与第一列单元格，表的右边与最后一列的单元格，表的底部与最后一行单元格之间的空间。 小贴士：不要使用这个属性，因为它已经被废弃。
<table>元素应该使用 CSS 定制样式。在<table>元素上使用 CSS 的属性border-spacing，以达到类似于 cellspacing 的效果。
frame- 这个枚举属性定义了包围在表格周围的框架的哪个边必须显示。它可能有下列值：
小贴士：不要使用这个属性，因为它已经被废弃。above below hsides vsides lhs rhs border box void <table>元素应该使用 CSS 定制样式。在<table>元素上使用 CSS 的属性border-style和border-width，以达到类似于 frame 的效果。
rules- 这个枚举属性定义了在一个表格中规则的显示位置。它可以有以下值：:
- none, 这表明没有规格将被显示；这是默认的值；
- groups, 这将使规则只显示在行组（row groups，通过
<thead>，<tbody>和<tfoot>元素定义）和列组（ column groups，通过<col>和<colgroup>元素定义）之间 - rows, 这将使规则在行之间显示；
- columns, 这将使规则在列之间显示；
all, 这将使规则在列和行之间显示；
小贴士：
summary- 该属性定义了一个替代文本，当表格无法在用户代理中显示的时候用来描述表格。通常，它被用来为残障人士提供可用性，比如，盲人使用盲文屏幕（Braille screen） 浏览网页，从中获取信息。如果要想对于非视力受限的人来说也可以提供作用，考虑使用
<caption>代替。summary 属性不是强制性的，当一个<caption>发挥它应有的作用时，可以省略summary 属性。 小贴士: 不要使用这个属性，因为它已经被废弃。 作为替代，选择其中一种方法为表格添加描述： 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>
<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" class="columns"></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 class="column1">
<col class="columns2plus3" 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;
}Accessibility concerns
Captions
By supplying a <caption> element whose value clearly and concisely describes the table's purpose, it helps the people decide if they need to read the rest of the table content or skip over it.
This helps people navigating with the aid of assistive technology such as a screen reader, people experiencing low vision conditions, and people with cognitive concerns.
- MDN Adding a caption to your table with <caption>
- Caption & Summary • Tables • W3C WAI Web Accessibility Tutorials
Scoping rows and columns
The scope attribute on header elements is redundant in simple contexts, because scope is inferred. However, some assistive technologies may fail to draw correct inferences, so specifying header scope may improve user experiences. In complex tables, scope can be specified so as to provide necessary information about the cells related to a header.
Example
<table>
<caption>Color names and values</caption>
<tbody>
<tr>
<th scope="col">Name</th>
<th scope="col">HEX</th>
<th scope="col">HSLa</th>
<th scope="col">RGBa</th>
</tr>
<tr>
<th scope="row">Teal</th>
<td><code>#51F6F6</code></td>
<td><code>hsla(180, 90%, 64%, 1)</code></td>
<td><code>rgba(81, 246, 246, 1)</code></td>
</tr>
<tr>
<th scope="row">Goldenrod</th>
<td><code>#F6BC57</code></td>
<td><code>hsla(38, 90%, 65%, 1)</code></td>
<td><code>rgba(246, 188, 87, 1)</code></td>
</tr>
</tbody>
</table>
Providing a declaration of scope="col" on a <th> element will help describe that the cell is at the top of a column. Providing a declaration of scope="row" on a <td> element will help describe that the cell is the first in a row.
- MDN Tables for visually impaired users
- Tables with two headers • Tables • W3C WAI Web Accessibility Tutorials
- Tables with irregular headers • Tables • W3C WAI Web Accessibility Tutorials
- H63: Using the scope attribute to associate header cells and data cells in data tables | W3C Techniques for WCAG 2.0
Complicated tables
Assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way. This is typically indicated by the presence of the colspan and rowspan attributes.
Ideally, consider alternate ways to present the table's content, including breaking it apart into a collection of smaller, related tables that don't have to rely on using the colspan and rowspan attributes. In addition to helping people who use assistive technology understand the table's content, this may also benefit people with cognitive concerns who may have difficulty understanding the associations the table layout is describing.
If the table cannot be broken apart, use a combination of the id and headers attributes to programmatically associate each table cell with the header(s) the cell is associated with.
- MDN Tables for visually impaired users
- Tables with multi-level headers • Tables • W3C WAI Web Accessibility Tutorials
- H43: Using id and headers attributes to associate data cells with header cells in data tables | Techniques for W3C WCAG 2.0
- Creating a bar chart from a HTML table
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard table element | Living Standard | |
| HTML5 table element | Recommendation |
Browser compatibility
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.相关
- 其它表格相关的HTML元素:
<caption>,<col>,<colgroup>,<tbody>,<td>,<tfoot>,<th>,<thead>,<tr>; - 可能特别有用的关于设定表格元素样式的 CSS 属性：
width控制表格的宽度；border,border-style,border-color,border-width,border-collapse,border-spacing控制单元格边框，规则和框架方面；margin和padding设定特定的单元格内容样式；text-align和vertical-align定义文本和单元格内容的对齐方式。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论