HTML 表格

HTML 表格例項:

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


Examples

線上例項

表格
這個例子演示如何在 HTML 文件中建立表格。

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


HTML 表格

表格由 <table> 標籤來定義。每個表格均有若干行(由 <tr> 標籤定義),每行被分割為若干單元格(由 <td> 標籤定義)。字母 td 指表格資料(table data),即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。

表格例項

例項

<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> 定義表格的頁尾