<table>

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.

 属性

表格标签支持全局属性。下面列出的属性现在已经弃用（请使用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, 这将使规则在列和行之间显示；

小贴士：

• 规则的样式是依赖浏览器的（browser-dependant），并且 不能被修改。
• 不要使用这个属性，因为它已经被废弃。规则应该使用 CSS 定义和设计样式。使用 border 属性，在适当的 <thead>, <tbody>, <tfoot>, <col> 或 <colgroup> 元素上。

summary

该属性定义了一个替代文本，当表格无法在用户代理中显示的时候用来描述表格。通常，它被用来为残障人士提供可用性，比如，盲人使用盲文屏幕（Braille screen） 浏览网页，从中获取信息。如果要想对于非视力受限的人来说也可以提供作用，考虑使用 <caption> 代替。summary 属性不是强制性的，当一个 <caption> 发挥它应有的作用时，可以省略summary 属性。

小贴士: 不要使用这个属性，因为它已经被废弃。 作为替代，选择其中一种方法为表格添加描述：

• Use prose around the table (this method is less semantic).
• 在表格的 <caption> 元素中添加描述。
• 在表格的 <caption> 元素中，添加一个带有描述的 <details> 元素。
• 将 <table> 元素包含在一个<figure> 元素中，并且在旁边添加散文（prose ）描述。
• 将 <table> 元素包含在一个<figure> 元素中，并且在 <thead> 元素中添加散文（prose ）描述。
• 调整表格，以便不需要这样的描述 (比如，使用 <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>
  <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

Browser compatibility

相关

• 其它表格相关的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 定义文本和单元格内容的对齐方式。