<table>

HTML的<table>元素表示表格数据，即通过二维数据表表示的信息。

浏览器支持


所有浏览器都支持`<table>`

示例

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

<style>
table,
td {
    border: 1px solid #333;
}

thead,
tfoot {
    background-color: #333;
    color: #fff;
}

</style>

内容分类	流式内容元素
允许的内容	按照这个顺序：一个可选的`<caption>`元素零个或多个的`<colgroup>`元素一个可选的`<thead>`元素任意一个：零个或多个`<tbody>`或者零个或多个`<tr>` 一个可选的`<tfoot>`元素
标签省略	开始标签和结束标签都不能省略。
允许的父元素	任何支持流内容的元素
允许的ARIA角色	任意
DOM接口	`HTMLTableElement`

属性

表格标签支持全局属性。下面列出的属性现在已经弃用（请使用CSS代替）。

border这个整型元素使用像素，定义了表格边框的大小。如果设置为0，这意味着frame属性被设置为空。如果设置为1，表示表格具有1px大小的边框。
THML5中废弃。此功能已过时。尽量避免使用它。

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,这将使规则在列和行之间显示；
小贴士：
- 规则的样式是依赖浏览器的（browser-dependant），并且不能被修改。
- 不要使用这个属性，因为它已经被废弃。规则应该使用CSS定义和设计样式。使用border属性，在适当的<thead>,<tbody>,<tfoot>,<col>或<colgroup>元素上。
summary该属性定义了一个替代文本，当表格无法在用户代理中显示的时候用来描述表格。通常，它被用来为残障人士提供可用性，比如，盲人使用盲文屏幕（Braille screen）浏览网页，从中获取信息。如果要想对于非视力受限的人来说也可以提供作用，考虑使用<caption>代替。summary 属性不是强制性的，当一个<caption>发挥它应有的作用时，可以省略summary 属性。
小贴士:不要使用这个属性，因为它已经被废弃。作为替代，选择其中一种方法为表格添加描述：
- Useprosearoundthe table(this method is lesssemantic).
- 在表格的<caption>元素中添加描述。
- 在表格的<caption>元素中，添加一个带有描述的<details>元素。
- 将<table>元素包含在一个<figure>元素中，并且在旁边添加散文（prose ）描述。
- 将<table>元素包含在一个<figure>元素中，并且在<thead>元素中添加散文（prose ）描述。
- 调整表格，以便不需要这样的描述(比如，使用<th>和<thead>元素)。
width该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。
小贴士:不要使用这个属性，因为它已经被废弃。规则应该使用CSS定义和设计样式。使用width属性代替。

无障碍问题

字幕

通过提供<caption>其值清楚，简洁地描述表格目的的元素，它可以帮助人们决定是否需要阅读表格的其余内容或跳过表格的其余内容。

这可以帮助人们借助辅助技术（例如屏幕阅读器），经历低视力条件的人们以及有认知问题的人们进行导航。

范围行和列

scope标头元素上的属性在简单上下文中是多余的，因为可以推断范围。但是，某些辅助技术可能无法得出正确的推论，因此指定标头范围可能会改善用户体验。在复杂表中，可以指定范围，以便提供有关与标头相关的单元格的必要信息。

例子

<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>

提供元素scope="col"上的声明将有助于描述该单元格在列的顶部。提供元素scope="row"上的声明<td>将有助于描述该单元格是行中的第一个单元格。

视障用户的MDN表
具有两个标题的表•表•W3C WAI Web Accessibility教程
具有不规则标题的表•表•W3C WAI Web Accessibility教程
H63：使用scope属性将数据表中的标头单元格和数据单元格关联| WCAG 2.0的W3C技术

复杂表

诸如屏幕阅读器之类的辅助技术可能难以解析非常复杂的表，以致无法以严格的水平或垂直方式关联标题单元格。通常通过colspan和rowspan属性的存在来表明这一点。

理想情况下，考虑呈现表内容的其他方法，包括将其分解为较小的相关表的集合，这些表不必依赖于colspan和rowspan属性。除了帮助使用辅助技术的人员了解表格的内容外，这还可能使那些可能难以理解表格布局所描述的关联的认知问题人士受益。

如果无法拆分表，请使用id和headers属性的组合，以编程方式将每个表单元格与该单元格所关联的标头相关联。

定义和用法

<table>标签可定义表格。在<table>标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中，不赞成使用"align"和"bgcolor"属性。

在 HTML 5 中，不支持<table>标签的任何属性。

例子

<table>
<tr>
<td>cell a</td>
<td>cell b</td>
</tr>
</table>

一个简单的 HTML 表格，包含两列两行：

<table border="1">
<tr>
<th>month</th>
<th>savings</th>
</tr>
<tr>
<td>january</td>
<td>$100</td>
</tr>
</table>

简单的表格

<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>

above	below
hsides	vsides
lhs	rhs
border	box
void