<table>
HTML table
元素表示表格数据——即通过二维数据表表示的信息。
尝试一下
内容分类 | 流动内容 |
---|---|
允许的内容 | |
标签省略 | 不允许,开始标签和结束标签都不能省略。 |
允许的父元素 | 任何支持流内容 (en-US)的元素 |
允许的 ARIA 角色 | Any |
DOM 接口 | HTMLTableElement |
属性
表格标签支持全局属性 (en-US)。下面列出的属性现在已经弃用(请使用 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 种颜色。
备注: 不要使用这个属性,该属性已废弃,
<table>
元素应当使用 CSS 定制样式。 CSS 中的background-color
属性能够和 bgcolor 属性达到一样的效果。 border
已弃用-
这个整型元素使用像素,定义了表格边框的大小。如果设置为 0,这意味着
frame
属性被设置为空。如果设置为 1,表示表格具有 1px 大小的边框。备注: 不要使用这个属性,该属性已废弃,
<table>
元素应当使用 CSS 定制样式。 CSS 属性border
,border-color
,border-width
和border-style
可实现相同效果。 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
已弃用-
该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值,宽度的百分比值将被定义为表格容器的宽度。
示例
简单的表格
<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>
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.
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.
Specifications
Specification |
---|
HTML Standard # the-table-element |
Browser compatibility
BCD tables only load in the browser
相关
- 其它表格相关的 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
定义文本和单元格内容的对齐方式。