HTML 表格(table)結構化、合併、群組……

有一些類型的資訊需使用格子或 table(表格)這種使用 columns、rows 組成的方式,來呈現具有結構關係的數據,以便於閱讀和理解,例如:火車時刻表、體育賽事結果、圖書目錄、商品的清單和價格目錄、外匯或股票的報價......。這邊列出 HTML 表格(table)經常會使用的一些標籤及屬性,並以實例說明使用方式,且必須熟悉用法才有能力對 HTML 表格進行合併、編排及調整。

html

行、列,傻傻分不清?

台灣解讀為「橫列(─)直行(│)」;大陸、歐美則為「橫行(─)直列(│)」。

  • row(row 行):橫向(─)
  • col(column 列):直向(│圓柱是直的)

HTML 表格(table)標籤、屬性

HTML 表格(table)
標籤 標籤描述 屬性 屬性描述
<table> 定義表格
<tr> 定義表格的 row
<th> 定義表格的表頭單元格 addr text 指定表頭單元格內容的簡短描述
colspan number 設置 columns 表頭單元格應跨越的數量(水平;橫向合併)
headers header_id 指定與表頭單元格相關聯的一或多個表頭單元格的 id(以空格分隔建立多個)
rowspan number 設置 rows 表頭單元格應跨越的數量(垂直;直向合併)
scope col 指定該表頭單元格是一 column 的標題
row 指定該表頭單元格是一 row 的標題
colgroup 指定該表頭單元格是一群組 column 的標題
rowgroup 指定該表頭單元格是一群組 row 的標題
<td> 定義表格的資料單元格 colspan number 設置 columns 資料單元格應跨越的數量(水平;橫向合併)
headers header_id 指定與資料單元格相關聯的一或多個表頭單元格的 id(以空格分隔建立多個)
rowspan number 設置 rows 資料單元格應跨越的數量(垂直;直向合併)
<caption> 定義表格的標題
<colgroup> 將表格中的 columns 進行群組,以便進行格式化 span number 設置 <colgroup> 標籤應跨越的數量
<col> 指定在 <colgroup> 標籤中每一 column 的屬性 span number 設置 <col> 標籤應跨越的數量
<thead> 群組表格中的表頭內容
<tbody> 群組表格中的主體內容
<tfoot> 群組表格中的頁腳內容

<table>

在 <table> 標籤定義 HTML 表格

  • 一個 HTML 表格由 <table> 標籤和一或多個 <tr>、<th> 和 <td> 標籤組成
  • 在 <tr> 標籤定義表格的 row,在 <th> 標籤定義表格的表頭單元格;在 <td> 標籤定義表格的資料單元格
  • 一個更複雜的 HTML 表格還可包括 <caption>、<colgroup>、<col>、<thead>、<tbody> 和 <tfoot> 標籤
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table style="border: 1px solid red;">
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
Result
表頭單元格 表頭單元格
資料單元格 資料單元格
資料單元格 資料單元格

<tr>

在 <tr> 標籤定義 HTML 表格的 row

  • 一個 <tr> 標籤包含一或多個 <th> 或 <td> 標籤
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <tr style="background-color: red;">
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
Result
表頭單元格 表頭單元格
資料單元格 資料單元格
資料單元格 資料單元格

<th>

在 <th> 標籤定義 HTML 表格的表頭單元格

  • HTML 表格有兩種類型的單元格:
    • <th> 表頭單元格 – 包含標題 information
    • <td> 資料單元格 – 包含 data
  • <th> 標籤內部文本字體通常預設會呈現置中對齊的粗體文本;<th> 標籤內部文本字體通常預設會呈現靠左對齊的普通文本
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <th style="border: 1px solid red;">表頭單元格</th>
        <th style="border: 1px solid red;">表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
Result
表頭單元格 表頭單元格
資料單元格 資料單元格
資料單元格 資料單元格

<th> – addr 屬性

addr 屬性指定表頭單元格內容的簡短描述

  • addr 屬性在普通的 browser 沒有視覺效果,但可用於螢幕閱讀器
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <th addr="Company">Company in USA</th>
        <th>address</th>
    </tr>
    <tr>
        <td>Apple, Inc.</td>
        <td>Google, Inc.</td>
    </tr>
    <tr>
        <td>1 Infinite Loop Cupertino, CA 95014</td>
        <td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
    </tr>
</table>
Result
Company in USA Address
Apple, Inc. 1 Infinite Loop Cupertino, CA 95014
Google, Inc. 1600 Amphitheatre Parkway Mountain View, CA 94043

<th> – colspan 屬性

colspan 屬性設置 columns 表頭單元格應跨越的數量(水平;橫向合併)

Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <th colspan="2" style="border: 1px solid red;">合併表頭單元格</th>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
Result
合併表頭單元格 表頭單元格
資料單元格 資料單元格 資料單元格

<th> – headers 屬性

headers 屬性指定與表頭單元格相關聯的一或多個表頭單元格的 id(以空格分隔建立多個)

  • headers 屬性在普通的 browser 沒有視覺效果,但可用於螢幕閱讀器
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table class="table-page-share">
    <tr>
        <th id="name" colspan="2">Name</th>
    </tr>
    <tr>
        <th headers="name">Firsname</th>
        <th headers="name">Lastname</th>
    </tr>
</table>
Result
Name
Firsname Lastname

<th> – rowspan 屬性

rowspan 屬性設置 rows 表頭單元格應跨越的數量(垂直;直向合併)

Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <th rowspan="2" style="border: 1px solid red;">合併表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
Result
合併表頭單元格 表頭單元格
表頭單元格
資料單元格 資料單元格

<th> – scope 屬性

scope 屬性指定表頭單元格是否是 column、row、group columns 或 group rows 的標題

  • addr 屬性在普通的 browser 沒有視覺效果,但可用於螢幕閱讀器
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <th></th>
        <th scope="col">Month</th>
        <th scope="col"&>Savings</th>
    </tr>
    <tr>
        <th>1</th>
        <th>January</th>
        <th>$100</th>
    </tr>
    <tr>
        <th>1</th>
        <th>January</th>
        <th>$80</th>
    </tr>
</table>
Result
Month Savings
1 January $100
2 February $80

<td>

在 <td> 標籤定義 HTML 表格的資料單元格

  • HTML 表格有兩種類型的單元格:
    • <th> 表頭單元格 – 包含標題 information
    • <td> 資料單元格 – 包含 data
  • <th> 標籤內部文本字體通常預設會呈現置中對齊的粗體文本;<th> 標籤內部文本字體通常預設會呈現靠左對齊的普通文本
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td style="border: 1px solid red;">資料單元格</td>
        <td style="border: 1px solid red;">資料單元格</td>
    </tr>
    <tr>
        <td style="border: 1px solid red;">資料單元格</td>
        <td style="border: 1px solid red;">資料單元格</td>
    </tr>
</table>
Result
表頭單元格 表頭單元格
資料單元格 資料單元格
資料單元格 資料單元格

<td> – colspan 屬性

colspan 屬性設置 columns 資料單元格應跨越的數量(水平;橫向合併)

Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td colspan="2" style="border: 1px solid red;">合併資料單元格</td>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
Result
表頭單元格 表頭單元格 表頭單元格
合併資料單元格 資料單元格

<td> – headers 屬性

headers 屬性指定與資料單元格相關聯的一或多個表頭單元格的 id(以空格分隔建立多個)

  • headers 屬性在普通的 browser 沒有視覺效果,但可用於螢幕閱讀器
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table class="table-page-share">
    <tr>
        <th id="name">Name</th>
        <th id="email">Email</th>
        <th id="phone">Phone</th>
        <th id="addr">Address</th>
    </tr>
    <tr>
        <td headers="name">SmallJacky</td>
        <td headers="email">sample@example.com</td>
        <td headers="phone">0952000000</td>
        <td headers="addr">台南市成功路</td>
    </tr>

</table>
Result
Name Email Phone Address
SmallJacky sample@example.com 0952000000 台南市成功路

<td> – rowspan 屬性

rowspan 屬性設置 rows 資料單元格應跨越的數量(垂直;直向合併)

Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td rowspan="2" style="border: 1px solid red;">資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
    </tr>
</table>
Result
表頭單元格 表頭單元格
合併資料單元格 資料單元格
資料單元格

<caption>

在 <caption> 標籤定義 HTML 表格的標題

  • <caption> 標籤必須立即在 <table> 標籤之後插入
  • 您只能對每個表格指定一個 <caption>
  • <caption> 標籤通常預設會置中對齊在表格的上方。然而,CSS 屬性 text-aligncaption-side 能用來設置標題的對齊方式和顯示位置
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table>
    <caption style="color: red;">Monthly savings</caption>
    <tr>
        <th></th>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <th>1</th>
        <th>January</th>
        <th>$100</th>
    </tr>
    <tr>
        <th>1</th>
        <th>January</th>
        <th>$80</th>
    </tr>
</table>
Result
Monthly savings
Month Savings
1 January $100
2 February $80

<colgroup>

使用 <colgroup> 標籤將表格中的 columns 進行群組,以便進行格式化

  • <colgroup> 標籤可以向整 columns 套用樣式,而不需重複為每個單元格或每一 column 設置樣式
  • 只能在 <table> 標籤內的 <caption> 標籤後,且在任何一個 <thead>、<tbody>、<tfoot>、<tr> 標籤之前使用 <colgroup> 標籤
  • 要在 <colgroup> 標籤的 column 定義不同的屬性,請在 <colgroup> 標籤內使用 <col> 標籤
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table class="table-page-share">
    <colgroup style="background-color: red;"></colgroup>
    <colgroup style="background-color: green;"></colgroup>
    <colgroup style="background-color: yellow;"></colgroup>
    <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
    </tr>
    <tr>
        <td>5869207</td>
        <td>My first CSS</td>
        <td>$49</td>
    </tr>
</table>
Result
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49

<colgroup> – span 屬性

span 屬性設置 <colgroup> 標籤應跨越的數量

  • 要在 <colgroup> 標籤的 column 定義不同的屬性,請在 <colgroup> 標籤內使用 <col> 標籤
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table class="table-page-share">
    <colgroup span="2" style="background-color: red;"></colgroup>
    <colgroup style="background-color: yellow;"></colgroup>
    <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
    </tr>
    <tr>
        <td>5869207</td>
        <td>My first CSS</td>
        <td>$49</td>
    </tr>
</table>
Result
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49

<col>

使用 <col> 標籤指定在 <colgroup> 標籤中每一 column 的屬性

  • <col> 標籤可以向整 columns 套用樣式,而不需重複為每個單元格或每一 column 設置樣式
  • 在 HTML 中,<col> 標籤沒有結束標籤(如 <col>);在 XHTML 中,<col> 標籤必須被正確的關閉(如 <col />)
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table class="table-page-share">
    <colgroup>
        <col style="background-color: red;">
    </colgroup>
    <colgroup>
        <col style="background-color: green;">
    </colgroup>
    <colgroup>
        <col style="background-color: yellow;">
    </colgroup>
    <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
    </tr>
    <tr>
        <td>5869207</td>
        <td>My first CSS</td>
        <td>$49</td>
    </tr>
</table>
Result
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49

<col> – span 屬性

span 屬性設置 <col> 標籤應跨越的數量

Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table class="table-page-share">
    <colgroup>
        <col span="2" style="background-color: red;">
        <col style="background-color: yellow;">
    </colgroup>
    <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
    </tr>
    <tr>
        <td>5869207</td>
        <td>My first CSS</td>
        <td>$49</td>
    </tr>
</table>
Result
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49

<thead>

使用 <thead> 標籤群組表格中的表頭內容

  • <thead> 標籤應該與 <tbody> 和 <tfoot> 標籤結合使用,用來規定表格的各個部分(表頭、主體和頁腳)
  • 使用這些標籤,使瀏覽器有能力支持獨立於表頭和頁腳的表格主體滾動。當包含多個頁面的長表格被列印時,表頭和頁腳可被列印在包含表格 data 的每張頁面上
  • <thead> 標籤必須被用在以下情境中:作為 <table> 標籤的子標籤,出現在 <caption> 和 <colgroup> 標籤之後,<tbody>、<tfoot> 和 <tr> 標籤之前
  • <thead> 標籤內部必須包含一或多個 <tr> 標籤
  • <thead>、<tbody> 和 <tfoot> 標籤預設不會影響表格的外觀,不過您可以套用 CSS 樣式,來改變
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table class="table-page-share">
    <thead style="background-color: red;">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
</table>
Result
Month Savings
Sum $180
January $100
February $80

<tbody>

使用 <tbody> 標籤群組表格中的主體內容

  • <tbody> 標籤應該與 <thead> 和 <tfoot> 標籤結合使用,用來規定表格的各個部分(表頭、主體和頁腳)
  • 使用這些標籤,使瀏覽器有能力支持獨立於表頭和頁腳的表格主體滾動。當包含多個頁面的長表格被列印時,表頭和頁腳可被列印在包含表格 data 的每張頁面上
  • <tbody> 標籤必須被用在以下情境中:作為 <table> 標籤的子標籤,出現在 <caption>、<colgroup> 和 <thead> 標籤之後
  • <tbody> 標籤內部必須包含一或多個 <tr> 標籤
  • <thead>、<tbody> 和 <tfoot> 標籤預設不會影響表格的外觀,不過您可以套用 CSS 樣式,來改變
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table class="table-page-share">
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
    <tbody style="background-color: red;">
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
</table>
Result
Month Savings
Sum $180
January $100
February $80

<tfoot>

使用 <tfoot> 標籤群組表格中的主體內容

  • <tfoot> 標籤應該與 <thead> 和 <tbody> 標籤結合使用,用來規定表格的各個部分(表頭、主體和頁腳)
  • 使用這些標籤,使瀏覽器有能力支持獨立於表頭和頁腳的表格主體滾動。當包含多個頁面的長表格被列印時,表頭和頁腳可被列印在包含表格 data 的每張頁面上
  • <tfoot> 標籤必須被用在以下情境中:作為 <table> 標籤的子標籤,出現在 <caption>、<colgroup> 和 <thead> 標籤之後,<tbody> 和 <tr> 標籤之前
  • <tfoot> 標籤內部必須包含一或多個 <tr> 標籤
  • <thead>、<tfoot> 和 <tfoot> 標籤預設不會影響表格的外觀,不過您可以套用 CSS 樣式,來改變
Code
<style type="text/css">
// 設置表格邊框樣式
table, th, td {
    border: 1px solid black;
}
</style>

<table class="table-page-share">
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot style="background-color: red;">
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
</table>
Result
Month Savings
Sum $180
January $100
February $80

發表迴響