腳印網頁資訊設計 logo

腳印網頁資訊設計

SEO 行銷導向網頁設計

HTML 表格 (table) 結構化、合併和群組教學範例

HTML

該文章列出 HTML 表格 (table) 經常會使用的一些標籤及屬性，並以範例說明使用方式，且必須熟悉用法才有能力對 HTML 表格進行合併、編排及調整。

有些類型的資訊需使用格子或表格 (table) 這種由 columns、rows 組成的方式，來呈現具有結構關係的數據，以便於閱讀和理解。

例如火車時刻表、體育賽事結果、圖書目錄、商品的清單和價格目錄、外匯或股票的報價等。

行、列傻傻分不清？

台灣解讀為：

  • row：列 (─)。
  • column：行 (│)。

大陸解讀為：

  • row：行 (─)。
  • column：列 (│)。

表格標籤、屬性表

標籤 標籤描述 屬性 值 屬性描述
<table> 定義表格
<tr> 定義表格的 row
<th> 定義表格的表頭單元格 addr text 定義表頭單元格內容的簡短描述
colspan number 定義表頭單元格應跨越的 columns 數量
headers header_id 定義與表頭單元格相關聯的一或多個表頭單元格的 id
rowspan number 定義表頭單元格應跨越的 rows 數量
scope col 定義表頭單元格是 column 的標題
row 定義表頭單元格是 row 的標題
colgroup 定義表頭單元格 columns 群組的標題
rowgroup 定義表頭單元格是 rows 群組的標題
<td> 定義表格的資料單元格 colspan number 定義資料單元格應跨越的 columns 數量
headers header_id 定義與資料單元格相關聯的一或多個表頭單元格的 id
rowspan number 定義資料單元格應跨越的 rows 數量
<caption> 定義表格的標題
<colgroup> 將表格中的 columns 群組 span number 定義 <colgroup> 標籤應跨越的 columns 數量
<col> 定義在 <colgroup> 標籤中的 columns span number 定義 <col> 標籤應跨越的 columns 數量
<thead> 定義表格中的表頭
<tbody> 定義表格中的主體
<tfoot> 定義表格中的頁腳

範例

<table>

定義表格。

  • 一個簡單表格由 <table> 和一或多個 <tr>、<th> 和 <td> 標籤組成。
  • <tr> 標籤定義表格的 row、<th> 標籤定義表格的表頭單元格、<td> 標籤定義表格的資料單元格。
  • 一個更複雜的表格還可包括 <caption>、<colgroup>、<col>、<thead>、<tbody> 和 <tfoot> 標籤。
<table>
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
表頭單元格 表頭單元格
資料單元格 資料單元格
資料單元格 資料單元格

<tr>

定義表格的 row。

  • 一個 <tr> 包含一或多個 <th> 或 <td> 標籤。
<table>
    <tr>
       <th>表頭單元格</th>
       <th>表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
表頭單元格 表頭單元格
資料單元格 資料單元格
資料單元格 資料單元格

<th>

定義表格的表頭單元格。

  • 表格有兩種類型的單元格：
    • <th> 表頭單元格：欄位標題 (文字預設會呈現粗體)。
    • <td> 資料單元格：就是資料。
<table>
    <tr>
       <th>表頭單元格</th>
       <th>表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
表頭單元格 表頭單元格
資料單元格 資料單元格
資料單元格 資料單元格

addr

定義表頭單元格內容的簡短描述。

<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>
Company in USA Address
Apple, Inc. 1 Infinite Loop Cupertino, CA 95014
Google, Inc. 1600 Amphitheatre Parkway Mountain View, CA 94043

colspan

定義表頭單元格應跨越的 columns 數量。

<table>
    <tr>
        <th colspan="2">合併表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
合併表頭單元格 表頭單元格
資料單元格 資料單元格 資料單元格
資料單元格 資料單元格 資料單元格

headers

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

<table">
    <tr>
        <th id="name" colspan="2">Name</th>
    </tr>
    <tr>
        <th headers="name">Firsname</th>
        <th headers="name">Lastname</th>
    </tr>
</table>
Name
Firsname Lastname

rowspan

定義表頭單元格應跨越的 rows 數量。

<table>
    <tr>
        <th rowspan="2">合併表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td>資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
合併表頭單元格 表頭單元格
表頭單元格
資料單元格 資料單元格

scope

定義表頭單元格是否是 column、row、group columns 或 group rows 的標題。

<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>
Month Savings
1 January $100
2 February $80

<td>

定義表格的資料單元格。

  • 表格有兩種類型的單元格：
    • <th> 表頭單元格：欄位標題 (文字預設會呈現粗體)。
    • <td> 資料單元格：就是資料。
<table>
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td">資料單元格</td>
        <td">資料單元格</td>
    </tr>
    <tr>
        <td">資料單元格</td>
        <td">資料單元格</td>
    </tr>
</table>
表頭單元格 表頭單元格
資料單元格 資料單元格
資料單元格 資料單元格

colspan

定義資料單元格應跨越的 columns 數量。

<table>
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td colspan="2">合併資料單元格</td>
        <td>資料單元格</td>
    </tr>
</table>
表頭單元格 表頭單元格 表頭單元格
合併資料單元格 資料單元格

headers

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

<table">
    <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>
Name Email Phone Address
SmallJacky sample@example.com 0952000000 台南市成功路

rowspan

定義資料單元格應跨越的 rows 數量。

<table>
    <tr>
        <th>表頭單元格</th>
        <th>表頭單元格</th>
    </tr>
    <tr>
        <td rowspan="2">資料單元格</td>
        <td>資料單元格</td>
    </tr>
    <tr>
        <td>資料單元格</td>
    </tr>
</table>
表頭單元格 表頭單元格
合併資料單元格 資料單元格
資料單元格

<caption>

定義表格的標題。

  • 必須使用在 <table> 標籤之後。
  • 每個表格僅能指定一個 <caption>。
  • 預設會置中對齊在整個表格外的上方。可通過 CSS 屬性 text-align 和 caption-side 來設定水平對齊方式和上、下方顯示位置。
<table>
    <caption>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>
Monthly savings
Month Savings
1 January $100
2 February $80

<colgroup>

將表格中的 columns 群組。

  • 必須使用在 <caption> 標籤之後，且在任何一個 <thead>、 <tbody>、 <tfoot>、 <tr> 標籤之前。
  • 可以向整個 columns 套用樣式，而不需重複為每個單元格或每一 column 設置樣式。
<table>
    <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>
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49

span

定義 <colgroup> 標籤應跨越的 columns 數量。

<table>
    <colgroup span="2" style="background-color: red;"></colgroup>
    <colgroup style="background-color: green;"></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>
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49

<col>

定義在 <colgroup> 標籤中的 columns。

<table>
    <colgroup>
        <col style="background-color: red;">
        <col style="background-color: green;">
    </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>
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49

span

定義 <col> 標籤應跨越的 columns 數量。

<table>
    <colgroup>
        <col span="2" style="background-color: red;">
        <col style="background-color: green;">
    </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>
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49

<thead>

定義表格中的表頭。

  • 必須使用在 <caption> 和 <colgroup> 標籤之後，在 <tbody> 和 <tfoot> 標籤之前。
<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </tbody>
</table>
Month Savings
Month Savings
Sum $180
January $100

<tbody>

定義表格中的主體。

  • 必須使用在 <caption>、<colgroup>、<thead> 和 <tfoot> 標籤之後。
<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </tbody>
</table>
Month Savings
Month Savings
Sum $180
January $100

<tfoot>

定義表格中的頁腳。

  • 必須使用在 <caption>、<colgroup> 和<thead> 標籤之後，在 <tbody> 標籤之前。
<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </tbody>
</table>
Month Savings
Month Savings
Sum $180
January $100

參考

創用 CC 授權條款

本著作係採用創用 CC 姓名標示-相同方式分享 3.0 台灣 授權條款授權.

發表留言

LINE @ AT

加入 LINE @ 好友

即時傳訊息問答回覆