[Day 10] 來一張表格吧──HTML表格初入門

17th鐵人賽前端迷走中

團隊好想工作室 v 9.0

2025-09-24 23:44:24

44 瀏覽

分享至

昨天提到HTML中的清單主要分成三種，包括以符號區別項目的無序清單、以編號區別項目的有序清單，以及沒有符號或編號的描述清單。

今天我們要介紹的是，同樣常用來整理資料的表格。

有時候寫了一堆字還不如一張表格來得清楚，這時就會希望在網頁中加入表格，方便讀者快速掌握重點。

具體來說要怎麼做？來看看今天的介紹吧～

先談談用字習慣

表格是由橫向跟縱向構成的資料形式。

英語用Row指橫向，Column指縱向。
但用漢字來描述方向時，不同國家有不同的用字習慣。[1]

在台灣，橫向的稱為列，縱向的稱為欄，行則依情境使用。
在其他國家，可能是用列指縱向，用行指橫向，找資料或翻譯時需要特別留意。

表格的基本組成

在HTML中，用<table>、<tr>、<td>等三種元素，就可以建立一個簡單的表格。

<table>由字面上來看，代表的就是整個表格本身；
<tr>指的是table row，代表了表格中的每一列；
<td>指的是table data，代表了表格中的每一格格子。

以下範例是一個簡單的3X3乘法表。先在<table>中放入三個<tr>，表示這個表格有三列。接著在代表每一列的<tr>中又各自放入了三個<td>，表示每一列有三格資料。接著在代表每一格的<td>裡放入不同數字，就是一個三欄三列的表格了。

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>2</td>
    <td>4</td>
    <td>6</td>
  </tr>
  <tr>
    <td>3</td>
    <td>6</td>
    <td>9</td>
  </tr>
</table>

注意事項

需要注意的是，由於HTML不是直接將表格分成欄，而是在每一列放入<td>來表示每一格。所以即便某一格暫時還沒有填入資料，也應該以一個<td>元素來表示。如果省略了<td>，就可能產出錯誤的表格。

繼續用前述的範例來解釋。如果將原先作為第二欄第二列格子，填入數字4的<td>拿掉，那這個位置就會由後面填入數字6的另一個<td>遞補，於是表格中第二欄第二列的格子就會變成填入6。

而且因為在這之後沒有加入其他<td>元素，表格在第三欄第二列就會少了一個格子。

區別標題欄/列

在前面的例子中，我們透過<table>、<tr>跟<td>這三種元素建立了一個簡單的表格。不過這樣的表格因為沒有區別標題欄跟標題列，如果新增更多欄或列，閱讀起來就會有些吃力。

這時，就可以改用<th>元素來代表格子，凸顯標題欄跟標題列中的資料。

<th>指的是table header，代表表格中作為標題的每一格格子。

雖然<th>跟<td>代表的都是格子，但<th>裡的資料預設會以粗體、置中的樣式呈現，跟<td>代表的一般格子有所不同。[2]

以下範例，便使用<th>來表示標題欄跟標題列。標題列通常都在第一列，於是在第一列的<tr>中放入3個<th>。至於標題欄，以格子來算就是每一列的第一個格子，所以在其他列中的第一個格子要以<th>來表示。

如同前面提到的，雖然第一列的<th>裡面是空的，還是要寫出<th>。不然「標題」所在的格子就會往前遞補，變成第一欄第一列的格子。

<table>
  <tr>
    <th></th>
    <th>標題</th>
    <th>發布日期</th>
  </tr>
  <tr>
    <th>第1天</th>
    <td>[Day 01] 前言──沒有在跟你立flag的</td>
    <td>9/15</td>
  </tr>
  <tr>
    <th>第2天</th>
    <td>[Day 02] 嗨，HTML──網頁的基本組成</td>
    <td>9/16</td>
  </tr>
  <tr>
    <th>第3天</th>
    <td>[Day 03] 嗚咿咿啊咿──淺談HTML的語法</td>
    <td>9/17</td>
  </tr>
</table>

讓格子橫跨多個欄/列

有時候會需要讓表格中的幾個格子橫跨多個欄或列。就像是使用excel的合併儲存格那樣。

這樣的效果在網頁中也能做到。透過<th>跟<td>的colspan與rowspan屬性，可以讓這些格子跨欄與跨列顯示。

colspan屬性用於設定格子跨欄的欄數。設定屬性值需填入非負整數，預設為1。最多只能設為1000；
rowspan屬性則用於設定格子跨列的列數。設定屬性值需填入非負整數，預設為1。最多只能設為65534。[3]

來點範例

以下由MDN提供的範例，為表格設定了跨欄與跨列的效果，方便讀者檢視一些動物在不同性別時是否有另外的稱呼。

<table>
  <tr>
    <th colspan="2">Animals</th>
  </tr>
  <tr>
    <th colspan="2">Hippopotamus</th>
  </tr>
  <tr>
    <th rowspan="2">Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th colspan="2">Crocodile</th>
  </tr>
  <tr>
    <th rowspan="2">Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

範例中的表格，每一列需要有兩欄，分別放入動物名稱與特定性別時的別名。

如果沒有針對特定性別的稱呼，便將colspan屬性值設為2，讓填入動物名稱的格子跨欄；
如果有不同稱呼，則在第二格填寫雌性的別名，並另外加入一列填入雄性的別名。由於是同一種動物，需要讓動物名稱跨列顯示，於是將填入名稱的格子的rowspan屬性值設為2。