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