HTML <table> 标签

HTML的 table 元素表示表格数据，即通过二维数据表表示的信息。其中 table 元素一般包含一个或多个 tr、th 或 td 元素。

实例

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

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<h1>table 元素</h1>
<table>
  <tr>
    <th>月份</th>
    <th>每月结余</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>$80</td>
  </tr>
</table>
</body>
</html>

运行一下

定义和用法

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

浏览器支持

元素
<table>	Yes	Yes	Yes	Yes	Yes

所有浏览器都支持 <table> 标签。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 属性是不建议使用的。

在 XHTML 1.0 Strict DTD中，不支持 table 元素的 "align" 和 "bgcolor" 属性。

可选的属性

属性	值	描述
align	left center right	不建议使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x) #xxxxxx colorname	不建议使用。请使用样式代替。规定表格的背景颜色。
border	pixels	规定表格边框的宽度。
cellpadding	pixels %	规定单元边沿与其内容之间的空白。不建议使用，推荐在<table> 元素上使用 CSS 属性值为 collapse 的 border-collapse 属性，在 <td> 元素上使用属性 padding，以达到类似于 cellpadding 的效果。
cellspacing	pixels %	规定单元格之间的空白。不建议使用，推荐在 <table> 元素上使用 CSS 的属性 border-spacing ，以达到类似于 cellspacing 的效果。
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的。
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。通常，它被用来为残障人士提供可用性，比如，盲人使用盲文屏幕（Braille screen）浏览网页，从中获取信息。如果要想对于非视力受限的人来说也可以提供作用，考虑使用 <caption> 代替。
width	% pixels	该属性定义了表格的宽度。宽度可以是像素或者是百分比值，宽度的百分比值将被定义为表格容器的宽度。

全局属性

<table> 标签支持 HTML 中的全局属性。

事件属性

<table> 标签支持 HTML 中的事件属性。

更多实例

去掉重合的边框

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>月份</th>
    <th>每月结余</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>$80</td>
  </tr>
</table>
</body>
</html>

运行一下

table 结合 caption一起使用

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<h1>caption 元素</h1>
<table>
  <caption>每月结余</caption>
  <tr>
    <th>月份</th>
    <th>结余</th>
  </tr>
  <tr>
    <td>2月</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>3月</td>
    <td>$50</td>
  </tr>
</table>
</body>
</html>

运行一下

table 内文本对齐方式

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
table.center {
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
  <tr>
    <th>月份</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>$80</td>
  </tr>
</table>

运行一下

单元格占多行或多列

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<h1>Colspan 和 rowspan</h1>
<h3>单元格占两列:</h3>
<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>
<h3>单元格占两行:</h3>
<table>
  <tr>
    <th>Name:</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Email:</th>
    <td>john.doe@example.com</td>
  </tr>
  <tr>
    <th rowspan="2">Phone:</th>
    <td>123-45-678</td>
  </tr>
  <tr>
    <td>212-00-546</td>
  </tr>
</table>
</body>
</html>

运行一下

table标签默认样式

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

HTML <table> 标签

实例

定义和用法

浏览器支持

HTML 与 XHTML 之间的差异

可选的属性

全局属性

事件属性

相关页面

更多实例

table标签默认样式

分类导航