最新的Web開發教程

HTML表格

❮上一頁 下一頁章❯

HTML表範例

數 名字 姓 點
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

定義HTML表格

例

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
試一試»

為例進行了說明：

表與所定義的<table>標記。

表分為與表中的行 <tr>標記。

表中的行被劃分為與所述表中的數據 <td>標記。

表的行也可以分成表標題與<th>標記。

表中的數據<td>是表中的數據容器。
它們可以包含各種HTML元素，如文字，圖片，列表，其他表等。

一個HTML表格與邊框屬性

如果不為表指定的邊框，將無邊框顯示。

邊框可以使用添加border屬性：

例

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
試一試»

該border屬性是其出路HTML標準的！ 這是更好地使用CSS。

要添加邊框，使用CSS border屬性：

例

table, th, td {
    border: 1px solid black;
}
試一試»

記住要定義邊框的表格和表格單元格兩者。

一個HTML表格與邊框倒塌

如果你想在邊界折疊成一個邊框，添加CSS border-collapse ：

例

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
試一試»

一個HTML表格與單元格填充

單元格填充指定單元含量和其邊界之間的空間。

如果沒有指定填充，表格單元格將不填充顯示。

要設置填充，使用CSS padding屬性：

例

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
試一試»

HTML表格標題

表標題與所定義的<th>標記。

默認情況下，所有的主流瀏覽器顯示的表格標題為粗體並居中：

例

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
試一試»

左對齊表格標題中，使用CSS text-align屬性：

例

th {
    text-align: left;
}
試一試»

一個HTML表格與邊框間距

邊界間隔指定單元之間的空間中。

要設置邊框間距為一個表，使用CSS border-spacing屬性：

例

table {
    border-spacing: 5px;
}
試一試»

如果表已經倒塌邊框，邊框間距有沒有效果。

表格單元格跨越多列

為了使細胞跨越多個列，使用colspan屬性：

例

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
試一試»

表格單元格跨越多行

為了使細胞跨度多行，使用rowspan屬性：

例

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>
試一試»

一個HTML表格帶說明

到標題添加到表中，使用<caption>標籤：

例

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>
試一試»

所述<caption>標籤必須緊接在之後插入<table>標記。

風格獨特的一個表

要定義一個特殊的表一個特殊的風格，添加一個id屬性表：

例

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

現在，您可以定義此表獨特的風格：

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
試一試»

並添加更多的樣式：

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}
試一試»

章節總結

  • 使用HTML <table>元素定義一個表
  • 使用HTML <tr>元素定義一個表行
  • 使用HTML <td>元素來定義表中的數據
  • 使用HTML <th>元素定義一個表標題
  • 使用HTML <caption>元素定義一個表標題
  • 使用CSS border屬性來定義邊界
  • 使用CSS border-collapse屬性以折疊單元格邊框
  • 使用CSS padding屬性來填充添加到細胞
  • 使用CSS text-align屬性來對齊單元格文本
  • 使用CSS border-spacing屬性來設置單元格之間的間距
  • 使用colspan屬性，使細胞跨度多列
  • 使用rowspan屬性，使細胞跨度多行
  • 使用id屬性來唯一確定一個表

測試自己與練習！

練習1» 練習2» 練習3» 練習4» 練習5» 練習6»

HTML表格標籤

標籤 描述
<table> 定義表格
<th> 限定了頭單元格表中的
<tr> 定義行的表
<td> 定義單元格在一個表
<caption> 定義表格標題
<colgroup> 指定表中的一組一個或多個列的格式化
<col> 指定一個內的每個列的列屬性<colgroup>元件
<thead> 組在一個表中的標題內容
<tbody> 組在表中的主體內容
<tfoot> 組表中的頁腳內容

❮上一頁 下一頁章❯