(4) Bootstrap 表格 (Tables)

在Bootstrap 文件(Documentation)>表格 (Tables) 中，可以看到表格的使用方法，本篇會依序介紹 :

• 表格的基本架構說明 及 scope=“col” 、scope=“row”的用法
• <caption>的用法
• 表格樣式
• 響應式表格

表格的基本架構說明

表格的整體基本架構如下 :

1. 表格的最外層會由<table>標籤包覆
2. 再將表格分成表頭<thead>及表格內容<tbody>兩個部分
3. <th> : 表格欄位標題 (選擇性使用)
4. <tr> : 表格列
5. <td>: 表格欄

官方範例用法如下 :

在以上範例程式碼可以看到，<th>標籤中多了scope屬性，分別代表什麼呢?

• <thead>的<th>中加上scope=“col” ➡️ 表示此標題為一整欄的標題
• <tbody>的<th>中加上 scope=”row” ➡️ 表示此標題為一整列的標題

<caption>的用法

<caption>標籤會撰寫於 html 中的<table>與<thead>之間，但顯示在頁面上時，會出現在表格下方，用來呈現表格用途的說明文字。

<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
.
.
.
.

表格樣式

這邊會依照以下主題依序說明 :

1. 表格(table)樣式
2. 表頭(thead)樣式
3. 語意化class樣式
4. 套用更深的預設背景色樣式

1. 表格 ( table ) 樣式

在Bootstrap的<table>標籤中，我們可以加上一個 .table 的class名稱，頁面中的表格變會呈現其預設表格樣式。

接下來依需求，我們可以在<table>套入以下其它 class 名稱來設定樣式 :

• table-striped : 單雙列套用不同色彩。

• table-dark : 暗色系背景，搭配亮色系文字。
  table-light 即為其相反

• table-bordered :原本只有橫向的 border 上下隔開，加上此 class 名稱可再加入直向的 border 線條。

• table-borderless : 去除所有欄、列的border。

• table-hover : 當滑鼠移至該表格列，會套用不同顏色效果。

• table-sm : th 和 td 的 padding 會從 0.75rem 縮小到 0.3rem。

2. 表頭 ( thead ) 樣式

在<thead>中可以套用以下兩種 class 名稱設定其對應樣式

• thead-dark : 暗色背景表頭，搭配亮色標題文字。
• thead-light : 亮色背景表頭，搭配暗色標題文字。

3. 語意化 class 樣式

使用語意化 class 可為表格列或單獨的儲存格加上色彩

使用" table-預設色系名稱 " 這樣的 class 名稱，例如 .table-primary、 .table-danger，可參考下圖左側色系名稱及其樣式顏色 :

加在<table>、<thead>、<tbody>、<tr>、<th>或<td>上都可以。

4. 套用更深的預設背景色樣式

想套用更深的背景顏色，可使用此組 class 名稱。

套用方式和上一種相同，色系名稱也相同，但對應的色號會是採用 Bootstrap 通用類別 ( utilities ) 背景及文字樣式的預設顏色，較上一種樣式深，用法為" bg-預設色系名稱 "，如 .bg-primary、.bg-danger。

響應式表格

若我們希望當視窗縮小時，表格下方自動出現水平卷軸，使表格內容大於視窗寬度時還能滑動卷軸觀看，我們可以在<table>外層再包一層<div>，並在<div>中加入 table-responsive 這個 class 名稱。
(響應式表格學問多多，這只是其中一種讓表格符合響應式的做法唷~)

若我們希望能夠設定水平卷軸出現的時機，可以將 table-responsive 搭配響應式斷點(sm、md、lg)做為 class 名稱一起使用:

• table-responsive-sm
  當視窗寬度 ≦ 575.98px 時出現水平卷軸
• table-responsive-md
  當視窗寬度 ≦ 767.98px 時出現水平卷軸
• table-responsive-lg
  當視窗寬度 ≦ 991.98px 時出現水平卷軸

🌀下篇預告: Bootstrap 格線系統

參考資料來源 :

Bootstrap | 六角學院

Tables

表格 (Tables)