認識表格、表格預設樣式

「表格」是網頁用來呈現大量數據的常見元素，因為表格是由多個元素構成，有些元素本身具有固定的樣式，有些樣式又會受到表格本身屬性影響，真可說是個「不容易掌控」的元素，這篇教學會介紹表格組成和用法，以及表格預設樣式屬性，讓大家對表格能有更深一層的認識。

快速導覽：

• 表格的組成
• 表格元素排列階層
• 表格元素預設樣式
• caption-side 樣式屬性
• empty-cells 空儲存格狀態

表格的組成

一個表格通常有許多垂直的列 ( row ) 和水平的欄 ( 行、column )，這些列與欄通常由下列幾種表格元素所共同構成，這些元素分別是：

最簡單的表格可由 table、tr、td 或搭配 th 組成 ( 範例圖片設定 td 樣式為 border: 1px solid #000;、padding: 10px; )。

<table>
  <tr>
    <th>name</th><th>number</th><th>price</th>
  </tr>
  <tr>
    <td>apple</td><td>100</td><td>100</td>
  </tr>
  <tr>
    <td>oxxo</td><td>200</td><td>200</td>
  </tr>
</table>

表格加上 thead、tbody、tfoot 之後，會讓表格的呈現更有意義，這三個元素也可以稱為「表格的列群組」，通常都會包覆一列以上的內容，不過因為對於大部分的表格排版沒有實質幫助，許多網頁排版或自動產生表格的工具，會自動忽略這三個元素 ( 範例圖片設定 td 樣式為 border: 1px solid #000;、padding: 10px; )。

<table>
  <thead>
    <tr>
      <th>name</th><th>number</th><th>price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>apple</td><td>100</td><td>100</td>
    </tr>
    <tr>
      <td>oxxo</td><td>200</td><td>200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>-</td><td>300</td><td>300</td>
    </tr>
  </tfoot>
</table>

下方範例呈現最完整的表格架構，除了透過 caption 定義表格標題，更運用 colgroup 和 col 設定「欄群組 ( 行群組 ) 」，搭配一些簡單的樣式，就能突顯要表現的表格內容。

colgroup 和 col 的 span 屬性表示「水平涵蓋多少欄位」。

線上展示：https://codepen.io/oxxo/pen/xxoMNoZ

<!-- HTML 程式碼 -->
<table>
  <caption>oxxo.studio</caption>
  <colgroup span="3">
    <col span="1">
    <col span="2">
  </colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th>name</th><th>number</th><th>price</th><th>year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>apple</td><td>100</td><td>100</td><td>2024</td>
    </tr>
    <tr>
      <td>oxxo</td><td>200</td><td>200</td><td>2021</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>-</td><td>300</td><td>300</td><td>-</td>
    </tr>
  </tfoot>
</table>

<!-- CSS 程式碼 -->
<style>
  td, th {
    border: 1px solid #000;
    padding: 10px;
  }
  colgroup {
    background: orange;   /* 欄群組背景都是橘色 */
  }
  colgroup:first-child {
    background: yellow;   /* 第一個欄群組的背景是黃色 */
  }
  col:nth-child(2) {
    background: cyan;     /* 第一個欄群組中的第二組背景是青色 */
  }
</style>

表格元素排列階層

在沒有設定任何 CSS 樣式權重的狀態下，表格元素有基本的排列階層，這些階層會影響背景顏色互相覆蓋的顯示效果，下方圖片呈現表格元素之間的階層關係，只要上方的元素有設定背景色，就會覆蓋下方的元素。

下方的範例沿用上述的程式碼，如果把樣式一個個的清除，移除指定元素的背景色，就能看到下方元素的背景色依序出現。

線上展示：https://codepen.io/oxxo/pen/RwzvmzZ

<!-- HTML 程式碼 -->
<table>
  <colgroup span="3">
    <col span="1">
    <col span="2">
  </colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th>name</th><th>number</th><th>price</th><th>year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>apple</td><td>100</td><td>100</td><td>2024</td>
    </tr>
    <tr>
      <td>oxxo</td><td>200</td><td>200</td><td>2021</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>-</td><td>300</td><td>300</td><td>-</td>
    </tr>
  </tfoot>
</table>

<!-- CSS 程式碼 -->
<style>
  td, th {border: 1px solid #000;}
  td, th {background: green;}
  tr {background: orange;}
  thead, tbody, tfoot {background: cyan;}
  col {background: pink;}
  colgroup {background: red;}
  table {background: yellow;}
</style>

表格元素預設樣式

下方列出各個表格元素的預設樣式：

table {
  display: table;
  border-collapse: separate; /* 邊框分開 */
  border-spacing: 2px;       /* 邊框間隔 2px */
  border-color: gray;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;         /* 文字粗體 */
  text-align: center;        /* 文字水平置中 */
}

td {
  display: table-cell;
  vertical-align: inherit;
}

thead {
  display: table-header-group;
  vertical-align: middle;    /* 文字垂直置中 */
  border-color: inherit;
}

tbody {
  display: table-row-group;
  vertical-align: middle;    /* 文字垂直置中 */
  border-color: inherit;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;    /* 文字垂直置中 */
  border-color: inherit;
}

colgroup {
  display: table-column-group;
}

col {
  display: table-column;
}

caption {
  display: table-caption;
  text-align: center;        /* 文字水平置中 */
}

caption-side 樣式屬性

表格元素中的 caption 是個較為「獨立」的表格元素，意思是「表格的標題」或「一小段說明表格的文字」，caption 必須是 table 的「第一個子元素」，可以透過其特有的樣式屬性 caption-side，將顯示位置設定在表格的上方或下方，且不會受到表格結構的影響，下方範例有兩個表格，分別將 caption 設定在表格的上方與下方。

線上展示：https://codepen.io/oxxo/pen/QWXYRXJ

<!-- HTML 程式碼 -->
<table class="a">
  <caption>oxxo.studio</caption>
  <tr>
    <th>name</th><th>number</th><th>price</th>
  </tr>
  <tr>
    <td>apple</td><td>100</td><td>100</td>
  </tr>
  <tr>
    <td>oxxo</td><td>200</td><td>200</td>
  </tr>
</table>
<table class="b">
  <caption>oxxo.studio</caption>
  <tr>
    <th>name</th><th>number</th><th>price</th>
  </tr>
  <tr>
    <td>apple</td><td>100</td><td>100</td>
  </tr>
  <tr>
    <td>oxxo</td><td>200</td><td>200</td>
  </tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    margin: 10px;
    float: left;
  }
  td, th, caption  {
    border: 1px solid #000;
    padding: 10px;
  }
  .a caption {caption-side: top;}
  .b caption {caption-side: bottom;}
</style>

empty-cells 空儲存格狀態

有時候網頁表格會出現「空儲存格」的狀況，空儲存格表示 td 裡沒有任何內容，透過 empty-cells 樣式屬性，就能使用屬性值 show 顯示或 hide 隱藏這種空儲存格，這個樣式屬性沒有繼承特性，但只能針對顯示屬性為 table-cell 的元素作用 ( td 與 th )，下方範例會用兩個表格，分別呈現隱藏空儲存格和顯示空儲存格的模樣。

線上展示：https://codepen.io/oxxo/pen/vYqPeGO

<!-- HTML 程式碼 -->
<table class="a">
  <tr><td>apple</td><td>oxxo</td><td>coconut</td></tr>
  <tr><td>banana</td><td></td><td>papaya</td></tr>
  <tr><td>pear</td><td>grape</td><td></td></tr>
</table>
<table class="b">
  <tr><td>apple</td><td>oxxo</td><td>coconut</td></tr>
  <tr><td>banana</td><td></td><td>papaya</td></tr>
  <tr><td>pear</td><td>grape</td><td></td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    border-spacing: 10px;
    margin: 10px;
  }
  td {
    padding: 10px;
    border: 1px solid #000;
    background: orange;
  }
  .a {empty-cells: show;}
  .b {empty-cells: hide;}
</style>

小結

表格是網頁排版中常見的元素，通常會用來表現大量的數據或清楚展現數值差異，透過這篇教學的介紹，應該就能更了解表格，以及組成表格的各個元素的用法和預設樣式。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～