今天要講的是金魚都能懂的網頁切版 : 表格怎麼切 NO012，
聽說以前切版都是用表格切呢！
我是沒有經歷過那個年代啦～（裝嫩）
雖然現在切版不用表格切了，
但你需要表格的時候還是要用表格切啊！（屁話嗎）
所以還是來認識一下他吧！

本篇關鍵字

• table 相關標籤
  • table
  • caption
  • thead、tbody
  • tr、th、td
• border-collapse
• caption-side

範例檔

（這個表格我整理了所有金魚都能懂的網頁切版 Youtube 影片，方便自己好查找）

HTML

<div class="table">
  <table>
    <caption>金魚都能懂的網頁入門切版</caption>
    <thead>
      <tr>
        <th colspan="6">一天一切版</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a href="https://youtu.be/rwTMBmnIHcY" target="_blank">圖文滿版區塊</a>
        </td>
        <td>
          <a href="https://youtu.be/IocyLERRdko" target="_blank">互動圖文卡片</a>
        </td>
        <td>
          <a href="https://youtu.be/2Qs0EuqJIYA" target="_blank">人員介紹卡片</a>
        </td>
        <td>
          <a href="https://youtu.be/aN7zFs_AT8s" target="_blank">交錯漂浮版</a>
        </td>
        <td>
          <a href="https://youtu.be/-mmzaE6eLzY" target="_blank">超通用橫式版面</a>
        </td>
        <td>
          <a href="https://youtu.be/R6q87Rfs0PM" target="_blank">N001 - N005 技巧彙整</a>
        </td>
      </tr>
      <tr>
        <td>
          <a href="https://youtu.be/Y02yl_QQNv0" target="_blank">網頁頁尾版塊</a>
        </td>
        <td>
          <a href="https://youtu.be/7BydlKueTgY" target="_blank">導覽列</a>
        </td>
        <td>
          <a href="https://youtu.be/9xT8kziyYko" target="_blank">變化你的導覽列</a>
        </td>
        <td>
          <a href="https://youtu.be/n0yPFtpVRLU" target="_blank">網站麵包屑</a>
        </td>
        <td>
          <a href="https://youtu.be/Xhhzzc9YZW4" target="_blank">方塊酥版面</a>
        </td>
        <td>
          <a href="https://youtu.be/l-sQNXNrw3s" target="_blank">破格式設計</a>
        </td>
      </tr>
      <tr>
        <td>
          <a href="https://youtu.be/zRREfvlLFIU" target="_blank">表格怎麼切</a>
        </td>
        <td>
          <a href="https://youtu.be/yB3_LtwBiaE" target="_blank">側邊選單怎麼切</a>
        </td>
        <td>
          <a href="https://youtu.be/-KPbFhZmBPE" target="_blank">動態收合式側邊選單</a>
        </td>
        <td>
          <a href="https://youtu.be/_qmdKguG5IY" target="_blank">多層次收合選單</a>
        </td>
        <td>
          <a href="https://youtu.be/AhHDJcys5tc" target="_blank">訂單進度條</a>
        </td>
        <td>
          <a href="https://youtu.be/G5MA36MboNw" target="_blank">登入表單</a>
        </td>
      </tr>
      <tr>
        <td>
          <a href="https://youtu.be/1tYhnmhdGNY" target="_blank">訊息對話紀錄</a>
        </td>
        <td>
          <a href="https://youtu.be/AiR22hCQOGs" target="_blank">時間軸怎麼切</a>
        </td>
        <td>
          <a href="https://youtu.be/QKGhYoRHJnI" target="_blank">旋轉拼切方塊</a>
        </td>
        <td>
          <a href="https://youtu.be/cU43gPItOns" target="_blank">N006 - N020 技巧彙整</a>
        </td>
        <td>
          <a href="https://youtu.be/7SFuF9XE24s" target="_blank">不規則邊緣</a>
        </td>
        <td>
          <a href="https://youtu.be/-2sRROXi2pI" target="_blank">文字排版 - 上集</a>
        </td>
      </tr>
      <tr>
        <td>
          <a href="https://youtu.be/YYHqbVVXIGM" target="_blank">文字排版 - 中集</a>
        </td>
        <td>
          <a href="https://youtu.be/O6ags2wEGbc" target="_blank">文字排版 - 下集</a>
        </td>
        <td>
          <a href="https://youtu.be/VN-GcKUkdis" target="_blank">文字排版 - 完結</a>
        </td>
        <td>
          <a href="https://youtu.be/jdK0GhQ4nok" target="_blank">快速版面拼拼樂</a>
        </td>
        <td>
          <a href="https://youtu.be/hfqSzkzY6cc" target="_blank">拼拼版重構</a>
        </td>
        <td>
          <a href="https://youtu.be/biNtxGzUopw" target="_blank">今天你金魚了嗎</a>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>備註</td>
        <td colspan="5">整理一下，以後不用找半天</td>
      </tr>
    </tfoot>
  </table>
</div>

CSS

body {
  height: 100vh;
  display: flex;
  align-items: center;
  background-color: #779CAB;

}

body .table {
  width: 1000px;
  margin: auto;
}

.table table {
  width: 100%;
  background-color:#39545E;
  border: 1px solid #39545E;
  border-radius: 20px;
  box-shadow: 0 0 20px 3px #49616a;
  overflow: hidden;
}

.table th,
.table td {
  border: 1px solid #39545E;
  padding: 10px 10px;
}

.table tr {
  background-color: #fff;
}

.table thead tr {
  text-align: center;
  background-color: #39545E;
  color: #fff;
}

.table th:first-child {
  border-radius: 19px 0 0 0;
}

.table th:last-child {
  border-radius: 0 19px 0 0;
}

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

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

.table tbody tr:hover {
  background-color: #C6E9F7;
}

.table tbody a {
  color: #777;
  text-decoration: none;
}

.table tbody tr:hover a {
  color: #000;
}

.table caption {
  caption-side: bottom;
  text-align: right;
  color: #fff;
  margin: 10px 5px;
}

喪屍分解

• table 的各式標籤代表的意義要認識清楚
• border-collapse (雖然這篇沒有用到)，是指表格欄位邊框合併
  • seperate 分開
  • collapse 合併
• caption-side 可以設定 caption 位置

以上就是今天的內容，如果有講不對的地方再請各位留言讓我知道，謝謝。
明天要講的是翻牌效果。