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>[email protected]</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>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
自己试试 »
相关页面
HTML 教程：HTML 表格
HTML DOM 参考：表格对象
CSS 教程：表格样式
默认 CSS 设置
大多数浏览器将使用以下默认值显示 <table> 元素
示例
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
自己试试 »
