育將電腦工作室 - 線上書籍

數位相簿很上手
=======

### 一、HTML 結構

1. <span style="font-size:18px;">table</span>
2. <span style="font-size:18px;">thead、tbody</span>
3. <span style="font-size:18px;">tr</span>
4. <span style="font-size:18px;">th、td</span>
5. <span style="font-size:18px;">colspan(合併欄)、rowspan(合併列)</span>
6. <span style="font-size:18px;">caption(表格標題)</span>
 
### 二、Bootstrap4 表格

1. <span style="font-size:18px;"><span style="color:#FF0000;">.table</span></span> ```
  <pre class="brush:as3;">
  <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. <span style="font-size:18px;">反轉色彩，使用 `.table-dark` 在深色背景下放上淺色文本。</span>
3. <span style="font-size:18px;">表格 head 選項  
   與預設和反轉樣式相似，使用如下兩個 <span style="color:#FF0000;">.thead-light</span> 或 <span style="color:#FF0000;">.thead-dark</span> 中的一個將 <thead> 顯示淺灰或深灰。</span>
4. <span style="font-size:18px;">條紋行  
   使用 <span style="color:#FF0000;">.table-striped</span> 在 <tbody>中的任何表格行添加斑馬紋</span>
5. <span style="font-size:18px;">帶框的表格  
   加入 <span style="color: rgb(255, 0, 0);">.table-bordered</span> 在表格和儲存格的四邊上添加邊框。</span>
6. <span style="font-size:18px;">滑入變色  
   添加 <span style="color:#FF0000;">.table-hover</span> 以便在一個 <tbody> 中的表格行上啟用一個 hover 狀態。</span>
7. <span style="font-size:18px;">小表格  
   添加<span style="color:#FF0000;"> .table-sm</span> 將儲存格 padding 縮減一半的方式讓表格更加精簡。</span>
8. <span style="font-size:18px;">語意化 class  
   使用語意化 class 給表格列或單獨的儲存格上色。</span>
  
   ```
  <pre class="brush:as3;">
  
  <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>
  
  
  <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. <span style="font-size:18px;">響應式表格  
   當表格想要始終呈現水平滾動，可在 .table 上加入 <span style="color:#FF0000;">.table-responsive</span>，使 Viewport 符合任何表格。或者 .table 中加 <span style="color:#FF0000;">.table-responsive{-sm|-md|-lg|-xl}</span> 創建響應式表格的最大斷點。</span>
  
   ```
  <pre class="brush:as3;">
  <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. <span style="font-size:18px;">水平對齊  
   <span style="color:#FF0000;">.text-center</span></span>
11. <span style="font-size:18px;">垂直對齊  
   <span style="color:#FF0000;">.align-middle</span> ：<http://bootstrap.hexschool.com/docs/4.0/utilities/vertical-align/></span>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown