5. 表格排版

一、HTML 結構

1. table
2. thead、tbody
3. tr
4. th、td
5. colspan(合併欄)、rowspan(合併列)
6. caption(表格標題)

二、Bootstrap4 表格

1. .table

   <table class="table">
     <thead>
       <tr>
         <th scope="col">#</th>
         <th scope="col">First</th>
         <th scope="col">Last</th>
         <th scope="col">Handle</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <th scope="row">1</th>
         <td>Mark</td>
         <td>Otto</td>
         <td>@mdo</td>
       </tr>
       <tr>
         <th scope="row">2</th>
         <td>Jacob</td>
         <td>Thornton</td>
         <td>@fat</td>
       </tr>
       <tr>
         <th scope="row">3</th>
         <td>Larry</td>
         <td>the Bird</td>
         <td>@twitter</td>
       </tr>
     </tbody>
   </table>

    

2. 反轉色彩，使用 .table-dark 在深色背景下放上淺色文本。

3. 表格 head 選項
   與預設和反轉樣式相似，使用如下兩個 .thead-light 或 .thead-dark 中的一個將 <thead> 顯示淺灰或深灰。

4. 條紋行
   使用 .table-striped 在 <tbody>中的任何表格行添加斑馬紋

5. 帶框的表格
   加入 .table-bordered 在表格和儲存格的四邊上添加邊框。

6. 滑入變色
   添加 .table-hover 以便在一個 <tbody> 中的表格行上啟用一個 hover 狀態。

7. 小表格
   添加 .table-sm 將儲存格 padding 縮減一半的方式讓表格更加精簡。

8. 語意化 class
   使用語意化 class 給表格列或單獨的儲存格上色。
    

   <!-- On rows -->
   <tr class="table-active">...</tr>
   
   <tr class="table-primary">...</tr>
   <tr class="table-secondary">...</tr>
   <tr class="table-success">...</tr>
   <tr class="table-danger">...</tr>
   <tr class="table-warning">...</tr>
   <tr class="table-info">...</tr>
   <tr class="table-light">...</tr>
   <tr class="table-dark">...</tr>
   
   <!-- On cells (`td` or `th`) -->
   <tr>
     <td class="table-active">...</td>
     
     <td class="table-primary">...</td>
     <td class="table-secondary">...</td>
     <td class="table-success">...</td>
     <td class="table-danger">...</td>
     <td class="table-warning">...</td>
     <td class="table-info">...</td>
     <td class="table-light">...</td>
     <td class="table-dark">...</td>
   </tr>

    

9. 響應式表格
   當表格想要始終呈現水平滾動，可在 .table 上加入 .table-responsive，使 Viewport 符合任何表格。或者 .table 中加 .table-responsive{-sm|-md|-lg|-xl} 創建響應式表格的最大斷點。
    

   <div class="table-responsive-sm">
     <table class="table">
       ...
     </table>
   </div>
   
   <div class="table-responsive-md">
     <table class="table">
       ...
     </table>
   </div>
   
   <div class="table-responsive-lg">
     <table class="table">
       ...
     </table>
   </div>
   
   <div class="table-responsive-xl">
     <table class="table">
       ...
     </table>
   </div>

    

10. 水平對齊
    .text-center

11. 垂直對齊
    .align-middle ：http://bootstrap.hexschool.com/docs/4.0/utilities/vertical-align/