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

小贴士:CSS 创建之前, HTML <table> 元素常常被用于布局页面。 这种用法在 HTML 4之后不被推荐使用,并且 <table>元素 不应该 被用于此目的。
内容分类 流动内容
允许的内容
按照这个顺序:
  • 一个可选的 <caption> 元素
  • 零个或多个的 <colgroup> 元素
    • 零个或多个的 <col> 元素
  • 一个可选的 <thead> 元素
  • 一个可选的 <tfoot> 元素(tfoot元素出现在tbody或tr元素前后都可以。在HTML4中,它只能出现在这些元素之前)
  • 零个或多个 <tbody> 元素
  • 一个或多个 <tr> 元素
标签省略 不允许,开始标签和结束标签都不能省略。
允许的父元素 任何支持流内容的元素
允许的ARIA 角色 Any
DOM 接口 HTMLTableElement

 属性

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

align
 这个枚举属性指定了包含在文档中的表格必须如何对齐。有如下值:
  • left,表格将在文档左侧显示;
  • center, 表格将在文档中央显示;
  • right, 表格将在文档右侧显示;
小贴士: 
  • 不要使用这个属性,它已经不赞成被使用。  <table> 元素应该使用CSS 制定样式。设置 margin-leftmargin-rightauto ( 或者 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>

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 6.0 6.0 1.0

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

相关

文档标签和贡献者

 最后编辑者: xgqfrms-GitHub,