提姆寫程式

0%

CSS 筆記 - 金魚系列 10 - 表格切版

發表於 分類於 Disqus：
表格切版隱藏的秘密

table

表格是後台類型非常常用的切版之一，當中有很多的眉角需要學習，特此記錄一下。

學習重點

  • flex
  • first-child
  • last-child
  • nth-child
  • 表格標題 caption (無障礙網頁一定要會)
  • 表格屬性 scope=”col”
  • colspan=”#” 合併表格欄位

table 結構

先確立 table 的結構，給予一個 table 的 <div>，並且把 <table> 標籤，裡面放置表頭、表身、表尾。確立後再把其他的東西放進去。

1
2
3
4
5
6
7
<div class="table">
  <table>
    <thead></thead>
    <tbody></tbody>
    <tfoot></tfoot>
  </table>
</div>

tr, th, td

確立好 table 後就要放入相對的表格標籤，這樣瀏覽器才看得懂，放入的文字就再到 Codepen 看。常常在做表格會因為標籤很多，趕到凌亂，所以我會把表頭、表身、表尾空一格或加上註解，以便識別。

  • tr 欄位(橫向)
  • th 表頭使用的文字標籤，並給予範圍是「欄」
  • td 除了表頭外使用的內文標籤
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="table">
  <table>
    <thead>
      <tr>
        <th scope="col">灌籃高手</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td></td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td></td>
      </tr>
    </tfoot>
  </table>
</div>

CSS 樣式

先把 CSS 要做的部分先確立，因為表格標籤多，做較詳盡的記錄。

1
2
3
4
5
6
7
8
9
10
.table {
  table {
  }
  tr {
  }
  th {
  }
  td {
  }
}

完成後就先來把 table 的 CSS 基本樣式給建立好再來美化它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.table {
  width: 800px;
  margin: 0 auto;

  table {
    border: 3px double #333; //雙框線
    width: 100%;
  }
  tr {
  }
  th {
    border: 1px solid #666;
    padding: 6px 10px;
  }
  td {
    border: 1px solid #666;
    padding: 6px 10px;
  }
}

colspan 合併表格空間

因 <tfoot> 除了第一格外，後面的表格要合併，所以可以使用 colspan 來合併其他表格，那這次練習後面有五格，在 HTML 的值就要給予 5。

1
<td colspan="5">本頁切版為參考金魚系列教學</td>

caption 表格標題

製作無障礙網站一定要知道表格標題。

1
2
3
<caption>
  表格標題：其實很重要的，但比較少人使用。
</caption>

目前就完成表格的基本架構，如下圖。

table

CSS 樣式美化

table

  • caption 位置設定。
  • table 最外層要圓角。
  • thead 與 tfoot 圓角設定。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.table {
  width: 800px;
  margin: 0 auto;
  caption {
    caption-side: bottom; //將 caption 移到下方
    text-align: right; //靠右對齊
    font-weight: 300;
  }
  th,
  td {
    border: 1px solid #666;
    padding: 6px 10px;
  }
  table {
    border: 3px double #333; //雙框線
    width: 100%;
    background-color: #fff;
    border-radius: 10px;

    thead {
      th:first-child {
        border-radius: 10px 0 0 0;
      }
      th:last-child {
        border-radius: 0 10px 0 0;
      }
    }

    tfoot {
      td:first-child {
        border-radius: 0 0 0 10px;
      }
      td:last-child {
        border-radius: 0 0 10px 0;
      }
    }
  }
}

table2

色彩樣式

  • 依照 thead, tbody, tfoot 做顏色修改，按照順序比較不會混亂。
  • 使用 first-child, last-child, nth-child 選取器選擇到想要的位置並給予想要的樣式，這樣可以避免 html 有過多的 class。
  • 並增加互動效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
table {
  border: 3px double #333; //雙框線
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  thead {
    background-color: #333333;
    color: #fff;
    th:first-child {
      border-radius: 10px 0 0 0;
    }
    th:last-child {
      border-radius: 0 10px 0 0;
    }
  }
  tbody {
    tr:nth-child(even) {
      background-color: #dddddd;
    }
    tr:hover {
      background-color: #ffc4c4;
      transition: all 0.5s;
      cursor: pointer;
    }
  }
  tfoot {
    td:first-child {
      border-radius: 0 0 0 10px;
    }
    td:last-child {
      border-radius: 0 0 10px 0;
    }
  }
}

這樣就完成了!

CodePen https://codepen.io/hnzxewqw/full/WNrLPMv

參考資料