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