HTML <table> 标签

定义和用法

<table> 标签定义了 HTML 表格。

一个 HTML 表格由一个 <table> 元素和一个或多个 <tr>、<th> 和 <td> 元素组成：

HTML 表格还可以包含以下元素：

另请参阅：

HTML 教程：HTML 表格

HTML DOM 参考手册：Table 对象

CSS 教程：设置表格的样式

实例

例子 1

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

<table>
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
</table>

亲自试一试

例子 2

如何向表格添加折叠边框（使用 CSS）：

<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>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

</body>
</html>

亲自试一试

例子 3

如何右对齐表格（使用 CSS）：

<table style="float:right">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

亲自试一试

例子 4

如何居中对齐表格（使用 CSS）：

<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>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

亲自试一试

例子 5

如何为表格添加背景颜色（使用 CSS）：

<table style="background-color:#00FF00">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

亲自试一试

例子 6

如何向表格添加内边距（使用 CSS）：

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}

th, td {
  padding: 10px;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

</body>
</html>

亲自试一试

例子 7

如何设置表格宽度（使用 CSS）：

<table style="width:400px">
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

亲自试一试

例子 8

如何创建表头：

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th>电话</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

亲自试一试

例子 9

如何创建带标题的表格：

<table>
  <caption>每月储蓄</caption>
  <tr>
    <th>月份</th>
    <th>储蓄</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>￥4500</td>
  </tr>
</table>

亲自试一试

例子 10

如何定义跨越多行或多列的表格单元格：

<table>
  <tr>
    <th>姓名</th>
    <th>电邮</th>
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

亲自试一试

全局属性

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

事件属性

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

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <table> 元素：

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

亲自试一试

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持