HTML <table> 标签
示例
一个简单的 HTML 表格，包含两列和两行
<table>
<tr>
<th>月份</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
</table>
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
<table> 标签定义了一个 HTML 表格。
HTML 表格由一个 <table> 元素和至少一个 <tr>、<th> 和 <td> 元素组成。
<tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元格。
HTML 表格还可以包含 <caption>、<colgroup>、<thead>、<tfoot> 和 <tbody> 元素。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <table> | 是 | 是 | 是 | 是 | 是 |
全局属性
<table> 标签还支持 HTML 中的全局属性。
事件属性
<table> 标签还支持 HTML 中的事件属性。
更多示例
示例
如何为表格添加折叠边框（使用 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>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
自己动手试一试 »
示例
如何右对齐表格（使用 CSS）
<table style="float:right">
<tr>
<th>月份</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
自己动手试一试 »
示例
如何居中对齐表格（使用 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>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
自己动手试一试 »
示例
如何为表格添加背景色（使用 CSS）
<table style="background-color:#00FF00">
<tr>
<th>月份</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
自己动手试一试 »
示例
如何为表格添加内边距（使用 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>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
自己动手试一试 »
示例
如何设置表格宽度（使用 CSS）
<table style="width:400px">
<tr>
<th>月份</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
自己动手试一试 »
示例
如何创建表头
<table>
<tr>
<th>姓名</th>
<th>电子邮件</th>
<th>电话</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
自己动手试一试 »
示例
如何创建带标题的表格
<table>
<caption>每月储蓄</caption>
<tr>
<th>月份</th>
<th>储蓄</th>
</tr>
<tr>
<td>一月</td>
<td>$100</td>
</tr>
<tr>
<td>二月</td>
<td>$80</td>
</tr>
</table>
自己动手试一试 »
示例
如何定义跨越多行或多列的表格单元格
<table>
<tr>
<th>姓名</th>
<th>电子邮件</th>
<th colspan="2">电话</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>
自己动手试一试 »
相关页面
HTML 教程：HTML 表格
HTML DOM 参考：Table 对象
CSS 教程：表格样式
默认 CSS 设置
大多数浏览器将 <table> 元素显示为以下默认值：
示例
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
自己动手试一试 »
