表格基本样式

“表格”是网页用来呈现大量数据的常见元素，因为表格是由多个元素构成，有些元素本身具有固定的样式，有些样式又会受到表格本身属性影响，真可说是个“不容易掌控”的元素，这篇教学会介绍表格组成和用法，以及表格默认样式属性，让大家对表格能有更深一层的认识。

快速导览：

• 表格的组成
• 表格元素排列阶层
• 表格元素默认样式
• caption-side 表格标题
• empty-cells 空储存格状态

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

表格的组成

一个表格通常有许多垂直的列 ( 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 属性表示“水平涵盖多少字段”，以下方的例子而言，第一个 colgroup 表示会水平涵盖三个字段，而里面又透过 col 将三个字段分成 1 个和 2 个，而第二个 colgroup 表示剩下的一个字段。

线上展示：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:nth-of-type(2) {
    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>

小结

表格是网页排版中常见的元素，通常会用来表现大量的数据或清楚展现数值差异，透过这篇教学的介绍，应该就能更了解表格，以及组成表格的各个元素的用法和默认样式。

意见反馈