構建靜態頁面 之 [ 表格 ]

蔡志遠發表於2018-08-28

表格

描述

  • 以網格的形式來呈現資料，並且以二維資料表(有行有列)來顯示資料內容

表格元素

  • <table>元素 – 表示定義表格
  • <tr>元素 – 表示定義表格中的行
  • <th>元素 – 表示定義表格中的表頭
  • <td>元素 – 表示定義表格中的單元格
  • <caption>元素 – 表示定義表格中的標題
  • <thead>元素 – 表示定義表格的頁首
  • <tbody>元素 – 表示定義表格的主體
  • <tfoot>元素 – 表示表格的頁尾

表格元素元素屬性

border屬性

  • 表示設定表格的邊框

    • 屬性值為數字值
    • 會同時設定表格和單元格

rowspan屬性

  • 表示設定單元格的跨行

    • 屬性值為數字值

colspan屬性

  • 表示設定單元格的跨列

    • 屬性值為數字值

表格元素整體示例程式碼

<body>
<!--
     border屬性 - 表示設定表格的邊框
      * 屬性值為數字值
      * 會同時設定表格和單元格
     rowspan屬性 - 表示設定單元格的跨行
      * 屬性值為數字值
     colspan屬性 - 表示設定單元格的跨列
      * 屬性值為數字值
 -->

<!-- <table>元素 - 表示定義表格 -->
<table border="5">
    <!-- <caption>元素 - 表示定義表格中的標題 -->
    <caption>隨身物品</caption>
    <!-- <thead>元素 - 表示定義表格的頁首 -->
    <thead>
        <!-- <tr>元素 - 表示定義表格中的行 -->
        <tr>
            <!-- <th>元素 - 表示定義表格中的表頭 -->
            <th>手機</th>
            <th>電腦</th>
            <th>手錶</th>
            <th>平板</th>
        </tr>
    </thead>
    <!-- <tbody>元素 - 表示定義表格的主體 -->
    <tbody>
        <tr>
            <!-- <td>元素 - 表示定義表格中的單元格 -->
            <td>iphone X</td>
            <td>MacBook Pro 15寸</td>
            <td>卡西歐</td>
            <td>iPad Pro 12寸</td>
        </tr>
        <tr>
            <td>iphone SE</td>
            <td>MacBook Pro 13寸</td>
            <td>尼尚</td>
            <td>iPad Pro 10寸</td>
        </tr>
    </tbody>
    <!-- <tfoot>元素 - 表示表格的頁尾 -->
    <tfoot>
        <tr>
            <td colspan="3">以上二選一</td>
        </tr>
    </tfoot>
</table>
</body>

表格樣式

caption-side屬性

  • 表示設定表格中的標題元素在表格中的顯示位置

border屬性

  • 表示設定邊框

    • border-width – 表示設定邊框的寬度
    • border-style – 表示設定邊框的樣式
    • border-color – 表示設定邊框的顏色
    • border屬性也允許簡寫：順序是 邊框的寬度 邊框的樣式 邊框的顏色

border-collapse屬性

  • 表示設定邊框是分離還是合併

    • 注意：在設定邊框為合併後，border-spacing屬性和empty-cells屬性會失效

border-spacing屬性

  • 表示設定邊框之間的距離

empty-cells屬性

  • 表示設定空白單元格的顯示與隱藏

表格樣式示例程式碼

<head>
    <meta charset="UTF-8">
    <title>表格的樣式</title>
    <style>
        caption {
            /*
                caption-side屬性 - 表示設定表格中的標題元素在表格中的顯示位置
                * top - 表示設定表格標題出現在表格的頂部“預設值”
                * bottom - 表示設定表格標題出現在表格的底部
             */
            caption-side: top;
        }
        table, th, td {
            /*
                border屬性 - 表示設定邊框
                 * border-width - 表示設定邊框的寬度
                 * border-style - 表示設定邊框的樣式
                 * border-color - 表示設定邊框的顏色
                border屬性也允許簡寫：順序是 邊框的寬度 邊框的樣式 邊框的顏色
             */
            border: 1px solid black;
            /*
                border-collapse屬性 - 表示設定邊框是分離還是合併
                 * separate屬性值 - 表示邊框的分離“預設值”
                 * collapse屬性值 - 表示邊框的合併
                * 注意：在設定邊框為合併後，border-spacing屬性和empty-cells屬性會失效
             */
            border-collapse: separate;
            /* border-spacing屬性 - 表示設定邊框之間的距離 */
            border-spacing: 10px;
            /*
                empty-cells屬性 - 表示設定空白單元格的顯示與隱藏
                 * show屬性值 - 表示顯示空白單元格“預設值”
                 * hide屬性值 - 表示隱藏空白單元格
             */
            empty-cells: hide;
        }
    </style>
</head>
<body>
<table>
    <caption>隨身物品</caption>
    <thead>
        <tr>
            <th>手機</th>
            <th>電腦</th>
            <th>手錶</th>
            <th>平板</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>iphone X</td>
            <td>MacBook Pro 15寸</td>
            <td>卡西歐</td>
            <td>iPad Pro 12寸</td>
        </tr>
        <tr>
            <td>iphone SE</td>
            <td>MacBook Pro 13寸</td>
            <td>尼尚</td>
            <td>iPad Pro 10寸</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">以上二選一</td>
        </tr>
    </tfoot>
</table>
</body>

相關文章