HTML 表格


表格由 <table> 標簽來定義。每個表格均有若幹行(由 <tr> 標簽定義),每行被分割為若幹單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。

數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。

HTML 表格生成器:https://c.runoob.com/front-end/7688/

HTML 表格實例:

First Name Last Name Points
Jill Smith 50
Eve Jackson 94
John Doe 80
Adam Johnson 67


Examples

在線實例

實例

<h4>一列:</h4> <table border="1"> <tr> <td>100</td> </tr> </table> <h4>一行三列:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <h4>兩行三列:</h4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>

嚐試一下 »

(可以在本頁底端找到更多實例。)

表格實例

實例

<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

在瀏覽器顯示如下::


HTML 表格和邊框屬性

如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。

使用邊框屬性來顯示一個帶有邊框的表格:

實例

<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

HTML 表格表頭

表格的表頭使用 <th> 標簽進行定義。

大多數瀏覽器會把表頭顯示為粗體居中的文本:

實例

<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

在瀏覽器顯示如下:



Examples

更多實例

沒有邊框的表格
本例演示一個沒有邊框的表格。

表格中的表頭(Heading)
本例演示如何顯示表格表頭。

帶有標題的表格
本例演示一個帶標題 (caption) 的表格

跨行或跨列的表格單元格
本例演示如何定義跨行或跨列的表格單元格。

表格內的標簽
本例演示如何在不同的元素內顯示元素。

單元格邊距(Cell padding)
本例演示如何使用 Cell padding 來創建單元格內容與其邊框之間的空白。

單元格間距(Cell spacing)
本例演示如何使用 Cell spacing 增加單元格之間的距離。

漂亮的表格


HTML 表格標簽

標簽 描述
<table> 定義表格
<th> 定義表格的表頭
<tr> 定義表格的行
<td> 定義表格單元
<caption> 定義表格標題
<colgroup> 定義表格列的組
<col> 定義用於表格列的屬性
<thead> 定義表格的頁眉
<tbody> 定義表格的主體
<tfoot> 定義表格的頁腳