HTML <table> 元素

HTML <table> 元素表示表格数据 - 即在由包含数据的单元格的行和列组成的二维表格中呈现的信息。

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

<table>
  <tr>
    <th>月份</th>
    <th>存款</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>600元</td>
  </tr>
</table>

尝试一下 »

截图

特性

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

属性

该元素包含了全局属性。以下列出属性现在已被弃用。

`align`

已废弃 HTML4.01；已过时 HTML5

该枚举属性表示在文档中如何对齐表格。它可以有以下值：

left：表格显示在文档的左侧；
center：表格显示在文档的中间；
right：表格显示在文档的右侧；

使用注意

不要使用该属性，因为它已经被废弃了。<table> 元素应该使用 CSS 来设置样式。设置 margin-left 和 margin-right 为 auto 或者 margin 为 0 auto 可以实现 align 属性类似的效果。

在 Firefox 4 之前，Firefox 也支持在 quirks 模式下的使用 middle，absmiddle 和 abscenter 作为 center 的同义词。

`bgcolor`

已废弃 HTML4.01；已过时 HTML5

该属性定义了表格的背景颜色。它是 sRGB 中定义的 6 位十六进制代码之一，以 '#' 为前缀。也可以使用十六种预定义颜色字符串中的一种：

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

已废弃 HTML4.01；已过时 HTML5

该整数属性以像素为单位定义表格周围框架的大小。如果设置为 0，则 frame 属性设置为 void。

使用说明： 不要使用该属性，因为它已经被废弃了。<table> 元素应该使用 CSS 来设置样式。要实现类似 border 属性的效果，可以使用 CSS 的 border，border-color，border-width 和 border-style 属性。

`cellpadding`

已废弃 HTML4.01；已过时 HTML5

该属性定义了单元格的内容与其边框之间的空间，显示与否。如果 cellpadding 的长度以像素定义，则该像素大小的空间将应用于单元格内容的四个边上。如果长度是使用百分比值定义的，内容将居中，总的垂直（上和下）长度将代表这个百分比。这同样适用于总的水平（左和右）空间。

使用说明： 不要使用该属性，因为它已经被废弃了。<table> 元素应该使用 CSS 来设置样式。要实现类似 cellpadding 属性的效果，可以为 <table> 元素设置 border-collapse 属性，其值为 collapse，同时为 <td> 元素设置 padding 属性。

`cellspacing`

已废弃 HTML4.01；已过时 HTML5

该属性以百分比值或像素定义两个单元格之间的空间大小。该属性在水平和垂直方向上应用到表格的顶部和第一行的单元格之间，表格和第一列的左侧，表格的右侧以及最后一列和底部表和最后一行。

使用说明： 不要使用该属性，因为它已经被废弃了。<table> 元素应该使用 CSS 来设置样式。要实现类似 cellspacing 属性的效果，可以为 <table> 元素设置 border-spacing 属性。 <td> 元素设置 padding 属性。如果设置了 border-collapse 为 collapse，则 border-spacing 将不起作用。

`frame`

已废弃 HTML4.01；已过时 HTML5

该枚举属性定义了表格周围框架的哪个边必须显示。它可能有以下值：

above，below，hsides，vsides，lhs，rhs，border，box 和 void。

使用说明： 不要使用该属性，因为它已经被废弃了。<table> 元素应该使用 CSS 来设置样式。要实现类似 frame 属性的效果，可以使用 border-style 和 border-width 属性。

`rules`

已废弃 HTML4.01；已过时 HTML5

该枚举属性定义规则（即行）应出现在表中的位置。它可以有以下值：

none，表示不会显示任何规则；它是默认值；
groups，这会使规则只在行组（由 <thead>，<tbody> 和 <tfoot> ）和列组之间（由 <col> 和 <colgroup> 元素定义）显示；
rows，这将使规则在行之间显示；
columns，这将使规则在列之间显示；
all，这将使规则列和行之间显示。

注意:

规则的样式依赖于浏览器，不能修改的。

不要使用该属性，因为它已经被废弃了。规则应该使用 CSS 来设置样式。可以在相应的 <thead>，<tbody>，<tfoot>，<col> 或 <colgroup> 元素上使用 border 属性。

`summary`

已废弃 HTML4.01；已过时 HTML5

该属性定义了表格内容摘要的替代文本。通常情况下，它用于有盲人屏幕浏览网页的视障人士获取关于表格的信息。如果要想对于非视力受限的人来说也可以提供作用，请考虑使用 <caption> 替代。summary 属性不是必需的，当有 <caption> 元素发挥它应有的作用时，则可以省略 summary。

使用说明： 不要使用该属性，因为它已经被废弃了。作为替代，请选择其中一种方法来添加表格的说明：

在表格周围直接添加说明（这种方法语义化较低）。

在表格的 <caption> 元素中添加说明。

在表格的 <caption> 元素内的 <details> 元素中添加说明。

将 <table> 元素包含在 <figure> 元素中，并在其旁边添加说明。

在 <figure> 元素中包含 <table> 元素，并在 <figcaption> 元素中添加说明。

调整表格以便不需要描述（例如，使用 <th> 和<thead>元素）。

`width`

已废弃 HTML4.01；已过时 HTML5

该属性定义了表格的宽度。宽度可以是像素或百分比值。百分比的值将由表格的父容器的宽度来定义，即 100% 为父容器的宽度。

使用说明： 不要使用该属性，因为它已经被废弃了。<table> 元素应该使用 CSS 来设置样式。请改用 width 和 border-width 属性。

事件属性

<table> 元素支持 HTML 的事件属性。

更多实例

简单表格

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0px;
  }

  table,
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<table>
  <tbody>
    <tr>
      <td>张</td>
      <td>三</td>
    </tr>
    <tr>
      <td>李</td>
      <td>四</td>
    </tr>
  </tbody>
</table>

尝试一下 »

截图

带有头部的简单表格

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0px;
  }

  table,
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<p>带有头部的简单表格</p>
<table>
  <tr>
    <th>姓</th>
    <th>名</th>
  </tr>
  <tr>
    <td>张</td>
    <td>三</td>
  </tr>
  <tr>
    <td>李</td>
    <td>四</td>
  </tr>
</table>

尝试一下 »

截图

带有 `thead`，`tfoot` 和 `tbody` 的表格

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0px;
  }

  table,
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<p>带有 <code>thead</code>，<code>tfoot</code> 和 <code>tbody</code> 的表格</p>
<table>
  <thead>
    <tr>
      <th>头部内容 1</th>
      <th>头部内容 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>主体内容 1</td>
      <td>主体内容 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>底部内容 1</td>
      <td>底部内容 2</td>
    </tr>
  </tfoot>
</table>

尝试一下 »

截图

带有 `colgroup` 的表格

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0px;
  }

  table,
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<p>带有 <code>colgroup</code> 的表格 </p>
<table>
  <colgroup span="4"></colgroup>
  <tr>
    <th>国家</th>
    <th>首都</th>
    <th>人口</th>
    <th>语言</th>
  </tr>
  <tr>
    <td>美国</td>
    <td>华盛顿特区</td>
    <td>3.09 亿</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>瑞典</td>
    <td>斯德哥尔摩</td>
    <td>900 万</td>
    <td>瑞典語</td>
  </tr>
</table>

尝试一下 »

截图

带有 `colgroup` 和 `col` 的表格

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0px;
  }

  table,
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<p>带有 <code>colgroup</code> 和 <code>col</code> 的表格</p>
<table>
  <colgroup>
    <col style="background-color: #0f0">
    <col span="2">
  </colgroup>
  <tr>
    <th>青柠</th>
    <th>柠檬</th>
    <th>橙子</th>
  </tr>
  <tr>
    <td>绿色</td>
    <td>黄色</td>
    <td>橙色</td>
  </tr>
</table>

尝试一下 »

截图

带有标题的简单表格

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0px;
  }

  table,
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<p>带有标题的简单表格</p>
<table>
  <caption>非常棒的标题</caption>
  <tr>
    <td>非常棒的数据</td>
  </tr>
</table>

尝试一下 »

截图

使用水平和垂直标题的表格

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0px;
  }

  table,
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<h4>表格使用水平标题</h4>
<table>
  <tr>
    <th>姓名</th>
    <th>电话</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>555 77 854</td>
  </tr>
</table>

<h4>表格使用垂直标题</h4>
<table>
  <tr>
    <th>姓名：</th>
    <td>小明:</td>
  </tr>
  <tr>
    <th>Telephone:</th>
    <td>555 77 854</td>
  </tr>
</table>

尝试一下 »

截图

在表格内显示其他的元素

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0px;
  }

  table,
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<table>
  <tr>
    <td>
      <p>这是一个段落</p>
      <p>这是另一个段落</p>
    </td>
    <td>这个单元格包含一个表格：
      <table>
        <tr>
          <td>A</td>
          <td>B</td>
        </tr>
        <tr>
          <td>C</td>
          <td>D</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>这个单元格包含一个列表
      <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>菠萝</li>
      </ul>
    </td>
    <td>HELLO</td>
  </tr>
</table>

尝试一下 »

截图

跨行或跨列的表格单元格

<style>
  table {
    border-collapse: collapse;
    border-spacing: 0px;
  }

  table,
  th,
  td {
    padding: 5px;
    border: 1px solid black;
  }
</style>

<h4>单元格跨两格</h4>
<table>
  <tr>
    <th>姓名</th>
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

<h4>单元格跨两列</h4>
<table>
  <tr>
    <th>姓名：</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">电话：</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

尝试一下 »

截图

规范

规范	状态	备注
HTML Living Standard table element 的定义	现行的标准	-
HTML5 table element 的定义	推荐	-

桌面浏览器兼容性

特性	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基础支持	1	支持	1	支持	支持	支持
`align`	1	支持	1	支持	支持	支持
`bgcolor`	1	支持	1	支持	支持	支持
`border`	1	支持	1	支持	支持	支持
`cellpadding`	1	支持	1	支持	支持	支持
`cellspacing`	1	支持	1	支持	支持	支持
`frame`	1	支持	1	支持	支持	支持
`rules`	1	支持	1	支持	支持	支持
`summary`	1	支持	1	支持	支持	支持
`width`	1	支持	1	支持	支持	支持

移动浏览器兼容性

特性	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
基础支持	1	1	支持	1	支持	支持	支持
`align`	1	1	支持	1	支持	支持	支持
`bgcolor`	1	1	支持	1	支持	支持	支持
`border`	1	1	支持	1	支持	支持	支持
`cellpadding`	1	1	支持	1	支持	支持	支持
`cellspacing`	1	1	支持	1	支持	支持	支持
`frame`	1	1	支持	1	支持	支持	支持
`rules`	1	1	支持	1	支持	支持	支持
`summary`	1	1	支持	1	支持	支持	支持
`width`	1	1	支持	1	支持	支持	支持

HTML <table> 元素

截图

特性

属性

事件属性

更多实例

简单表格

截图

带有头部的简单表格

截图

带有 thead，tfoot 和 tbody 的表格

截图

带有 colgroup 的表格

截图

带有 colgroup 和 col 的表格

截图

带有标题的简单表格

截图

使用水平和垂直标题的表格

截图

在表格内显示其他的元素

截图

跨行或跨列的表格单元格

截图

规范

桌面浏览器兼容性

移动浏览器兼容性

相关链接

HTML

HTML 元素

更多教程

Sponsors

带有 `thead`，`tfoot` 和 `tbody` 的表格

带有 `colgroup` 的表格

带有 `colgroup` 和 `col` 的表格