<table>

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

 属性

表格标签支持 全局属性。下面列出的属性现在已经弃用（请使用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 属性代替。

DOM 接口

这个元素实现 HTMLTableElement 接口。

示例

简单的表格

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

浏览器兼容性

有一个 Internet Explorer 9 呈现错误涉及 <table> 和 :hover；详情参见 浏览器兼容性：hover章节 。

相关

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