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
支持 支持 支持 支持 支持