【靜態頁面架構】CSS之表格

佐珥玎發表於2018-08-28
架構CSS

CSS架構

表格:

1.元素:

表格的基本結構；
以table元素建立表格
tr元素是表格行，td元素是表示表格單元格

<body>
<!--<table> 表格以行和列表示容器元素
    borber屬性 預設的表格和單元格都有邊框
    表格預設是有寬度的單元格之和決定
    -->
<table border="2">
    <tr>
        <!--
            <td>元素 - 表示表格中的單元格
            * 單元格預設寬度由內容決定
         -->
        <td>姓名</td>
        <td>年齡</td>
        <td>職業</td>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>劍士</td>
    </tr>
    <tr>
        <td>亞絲娜</td>
        <td>16</td>
        <td>補師</td>
    </tr>
</table>
</body>

表格的表頭單元格；

th元素來定義表格行或列表頭單元格
th元素中使用scope屬性設定單元格的行和列表頭

<body>
<tr>
    <!--
        <th>元素 - 表示表格中的表頭
        * 表頭文字內容字型加粗
        * 表頭文字內容為水平方向居中
     -->
    <th>姓名</th>
    <th>年齡</th>
    <th>職業</th>
</tr>
<tr>
    <td>桐人</td>
    <td>17</td>
    <td>劍士</td>
</tr>
<tr>
    <td>亞絲娜</td>
    <td>16</td>
    <td>補師</td>
</tr>
</body>

表格的標題；

caption元素定義表格的標題
caption元素被定義在table元素中頂部

<table border="2">
    <caption>登入人員表</caption>
    <!--<caption>元素  表示表格的標題-->
    <tr>

        <th>姓名</th>
        <th>年齡</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>劍士</td>
    </tr>
    <tr>
        <td>亞絲娜</td>
        <td>16</td>
        <td>補師</td>
    </tr>
</table>
</body>

跨行與跨列；

colspan屬性是設定單元格橫跨的列數
rowspan屬性是設定單元格橫跨的行數

<body>
<table border="2">
    <tr>
        <td>姓名</td>
        <td>年齡</td>
        <td>職業</td>
    </tr>
    <tr>
        <td rowspan="2">桐人</td>
        <!--跨行時，會強制在被佔的行裡相應去掉一個單元格-->
        <td colspan="2">17</td>
        <!--跨列時，會強制在被佔的列裡相應去掉一個單元格-->
    </tr>
    <tr>
        <td>亞絲娜</td>
        <td>16</td>
    </tr>
</table>
</body>

長表格；

thead元素；設定表格的頁首內容
tbody元素；設定表格的主題內容
tfoot元素；設定表格的頁尾內容

<body>
<table border="2">
    <caption>登入人員表</caption>
    <!--<caption>元素  表示表格的標題-->
    <thead>
    <!-- 表格頂部 頁首<thead>元素 -->
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>職業</th>
    </tr>
    </thead>
    <!-- 表格主體 主體<tbody>元素 -->
    <tbody>
    <tr>
        <td>桐人</td>
        <td>16</td>
        <td>劍士</td>
    </tr>
    <tr>
        <td>亞絲娜</td>
        <td>17</td>
        <td>補師</td>
    </tr>
    </tbody>
    <!-- 表格底部 頁尾<tfoot>元素 -->
</table>
</body>

2.樣式:

表格佈局；

以table-layout屬性定義佈局表格單元格
fixed值；

 <style>
        table {
            table-layout: fixed;
            /*table-layout 表示佈局
            auto：自動計算表格的寬和高度{由單元格內容決定}
            載入速度慢
            fixed：只載入首行單元格寬度，其之外的單元格不會影響表單寬度
            載入速度快*/
        }
    </style>
</head>
<body>
<table border="2">
    <tr>

        <td>姓名</td>
        <td>年齡</td>
        <td>職業</td>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>劍士</td>
    </tr>
    <tr>
        <td>亞絲娜</td>
        <td>16</td>
        <td>補師</td>
    </tr>
</table>
</body>

表格標題；

以caption-side屬性來是caption元素顯示錶格位置
有2個值表示；top表示表格的頂部，bottom表示表格的底部

<style>
        caption{
            caption-side: bottom;
            /*caption-side屬性 表示標題元素<caption>設定
              top：預設值；表示標題出現在表格頂部
              bottom：表示標題出現在表格底部
             */
        }
    </style>
</head>
<body>
<table border="1">
    <!-- <caption>元素 - 表示表格中的標題 -->
    <caption>登入人員表</caption>
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>職業</th>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>劍士</td>
    </tr>
    <tr>
        <td>亞絲娜</td>
        <td>16</td>
        <td>補師</td>
    </tr>
</table>
</body>

表格邊框；

border-collapse屬性來表示決定邊框是分開還是合併
border-spacing屬性設定相鄰單元格邊框之間距離

 <style>
        table, td {
            /*
                border屬性；設定邊框
                border-width；設定邊框寬度
                border-style；設定邊框樣式
                border-color；設定邊框顏色
             */
            border: 1px solid black;
            /*
                border-collapse屬性；設定邊框是分離還是合併
                separate；預設值，表示分離
                collapse；表示合併
             */
            border-collapse: collapse;
            /*
                border-spacing屬性；設定兩個邊框之間的距離
                必須在border-collapse屬性值為separate時才有效
             */
            border-spacing: 10px;
        }
    </style>
</head>
<body>
<table>
<!--元素的屬性border；表示同時設定單元格和表格的表框-->
    <tr>

        <td>姓名</td>
        <td>年齡</td>
        <td>職業</td>
    </tr>
    <tr>
        <td>桐人</td>
        <td>17</td>
        <td>劍士</td>
    </tr>
    <tr>
        <td>亞絲娜</td>
        <td>16</td>
        <td>補師</td>
    </tr>
</table>
</body>

相關文章