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;
}
自己動手試一試 »
