HTML 表格 (table)

HTML <table> 標籤 (tag) 用來建立表格，也就是用來呈現二維的資料表資訊。

<table> 標籤做為表格的容器 (container)，裡面有不同用途的標籤像是 <tr>, <td> 組成一個完整的表格。

<table> 中的標籤按照以下順序，組成一個表格：

  1. 一個選擇性的 (optional) <caption> 標籤，用來表示表格的標題
  2. 一個或多個選擇性的 <colgroup> 標籤，用來分組表格的直行 (column) 以進行格式化
  3. 一個選擇性的 <thead> 標籤，用來表示表格中不同直行 (column) 的標題
  4. 一個在以下的標籤之前或之後選擇性的 <tfoot> 標籤，用來對表格中不同直行 (column) 做分組，來指定不同分組內容的頁腳或標題
  5. 一個或多個選擇性的 <tbody> 標籤，做為表格主要內容的容器
  6. 一個或多個必要的 <tr> 標籤，用來定義表格的橫列 (row)
  7. 一個或多個必要的 <td> (或 <th>) 標籤，用來表示表格中每一直行 (cloumn) 的單元格 (cell)

<table> 表格, <tr> 橫列, <td> 直行

<table>, <tr> 和 <td> 是 HTML 表格中最常見到也一定會用到的三個標籤，<table> 用來包著整個表格的結構和內容，<tr> (table row) 用來定義表格有幾個橫列 (row)，<tr> 裡面有 <td> (table data) 用來定義表格有幾個直行 (cloumn)，至於 <td> 裡面就是放實際單元格的資料。

舉個例子：

<table>
  <tr>
    <td>國家</td>
    <td>首都</td>
    <td>人口</td>
    <td>語言</td>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

上面的例子實際顯示在網頁畫面中會長得像這樣子：

國家首都人口語言
USAWashington D.C.309 millionEnglish
SwedenStockholm9 millionSwedish

這是一個 3x4 大小的表格，HTML 中有 3 個 <tr> 即表示這表格有 3 列，而每個 <tr> 裡面都有 4 個 <td> 即表示這表格有 4 行！

有注意到嗎？每個 <tr> 裡面的 <td> 數量要一樣喔，因為這樣才會組成一個格子狀的表格嘛！

<th> 欄位標題

<th> (table header) 用來表示表格欄位的標題，<th> 可以用來替代 <td> 使用，用來在語意上更明確的聲明這一格是一個標題。

例子：

<table>
  <tr>
    <th>國家</th>
    <th>首都</th>
    <th>人口</th>
    <th>語言</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

顯示如下：

國家首都人口語言
USAWashington D.C.309 millionEnglish
SwedenStockholm9 millionSwedish

表格標題在瀏覽器預設樣式中會顯示成粗體字。

合併儲存格: colspan 和 rowspan 屬性 (attributes)

合併表格可以利用 <td> 和 <th> 標籤上的 colspan 和 rowspan 屬性，colspan 是用來水平合併多行 (column) 的儲存格，rowspan 則用來垂直合併多列 (row) 的儲存格。

rowspan - 垂直合併儲存格

語法：

<td rowspan="要合併幾個橫列">

rowspan 範例：

<table>
  <tr>
    <th>項目</th>
    <th>金額</th>
    <th>總金額</th>
  </tr>
  <tr>
    <td>iPhone 11</td>
    <td>$24,900</td>
    <td rowspan="2">$31,390</td>
  </tr>
  <tr>
    <td>AirPods</td>
    <td>$6,490</td>
  </tr>
</table>

顯示結果：

項目金額總金額
iPhone 11$24,900$31,390
AirPods$6,490

上方例子中，rowspan="2" 表示從這一列開始往下合併至下一列 (共 2 列)。

所以說，你 rowspan 合併幾列，後面幾列的 <tr> 中同樣位置的 <td> 就要省略不寫。

rowspan="0" 是特殊語法，意思是儲存格從這一列開始合併到最後一列的意思。

例如：

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td rowspan="0">6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>15</td>
    <td>16</td>
  </tr>
</table>

結果：

1234
5678
91112
131516

colspan - 水平合併儲存格

語法：

<td colspan="要合併幾個直行">

colspan 範例：

<table>
  <tr>
    <th>項目</th>
    <th>金額</th>
  </tr>
  <tr>
    <td>iPhone 11</td>
    <td>$24,900</td>
  </tr>
  <tr>
    <td>AirPods</td>
    <td>$6,490</td>
  </tr>
  <tr>
    <td colspan="2">總金額: $31,390</td>
  </tr>
</table>

顯示結果：

項目金額
iPhone 11$24,900
AirPods$6,490
總金額: $31,390

上方例子中，colspan="2" 表示從這一行開始往右合併至下一行 (共 2 行)。

所以說，你 colspan 合併幾行，該儲存格緊接著的同一列 <tr> 後面的幾個 <td> 就要省略不寫。

<thead> 表格表頭區塊, <tbody> 表格主要內容區塊, <tfoot> 表格頁腳區塊

<thead> (table header), <tbody> (table body) 和 <tfoot> (table footer) 主要用來增強表格 HTML 的語意性 (semantic)，分別用來明確區分表格中的不同目的區塊，其中 thead 是說明這一個區塊的內容是表格欄位標題；<tbody> 是說明這一個區塊是放表格的主要內容；<tfoot> 則是說明這一個區塊裡面放的是表格的頁腳內容。

使用範例：

<table>
  <thead>
    <tr>
      <th>項目</th>
      <th>金額</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>iPhone 11</td>
      <td>$24,900</td>
    </tr>
    <tr>
      <td>AirPods</td>
      <td>$6,490</td>
    </tr>
    <tr>
      <td>iPad Pro</td>
      <td>$25,900</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>總金額</th>
      <td>$57,290</td>
    </tr>
  </tfoot>
</table>

顯示結果：

項目金額
iPhone 11$24,900
AirPods$6,490
iPad Pro$25,900
總金額$57,290

其中用 <thead> 聲明「項目」和「金額」是屬於表格的標題，<tbody> 裡面是表格的內容，<tfoot> 裡面的「總金額」是表格的結尾頁腳。

<caption> 表格的標題

<caption> 放在 <table> 中最前面的第一個標籤，用來說明表格的標題，而一個表格只能有一個標題。

範例：

<table>
  <caption>存錢計畫</caption>
  <tr>
    <th>日期</th>
    <th>金額</th>
  </tr>
  <tr>
    <td>2020-01-01</td>
    <td>$500</td>
  </tr>
  <tr>
    <td>2020-01-12</td>
    <td>$800</td>
  </tr>
  <tr>
    <td>2020-02-22</td>
    <td>$600</td>
  </tr>
</table>

顯示結果：

存錢計畫
日期金額
2020-01-01$500
2020-01-12$800
2020-02-22$600

<colgroup>, <col> 表格直行分組

<colgroup> (column groups) 標籤是用來對表格中的直行 (column) 做分組，可以方便對每個分組直行中的所有儲存格進行統一的格式和樣式設定。

<colgroup> 標籤上有一個 span 屬性，用來指定這一個分組橫跨了幾個直行，span 預設值是 1。

用法範例：

<table>
  <colgroup span="2" style="background-color: gray;"></colgroup>
  <colgroup style="background-color: green;"></colgroup>
  
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>iPhone 11</td>
    <td>$24,900</td>
    <td>2</td>
  </tr>
  <tr>
    <td>AirPods</td>
    <td>$6,490</td>
    <td>1</td>
  </tr>
</table>

顯示結果：

ItemPriceQuantity
iPhone 11$24,9002
AirPods$6,4901

上面的例子中，我們用兩個 colgroup 來做表格直行的分組，第一組 colgroup span 2 表示將第一行和第二行分為第一組，第二組 colgroup (預設 span 1) 表示將第三行分為一組。

接下來你可以在 <colgroup> 標籤上面設定 class 屬性或像是 style 屬性，就可以一次直接對分組中所有的儲存格設定樣式，用 colgroup 的好處就是你不用在每一個 <td> 上面一一設定 class 或 style。

<colgroup> 標籤的位置是放在 <caption> 標籤 (如果有) 後面，或其他任何的表格標籤前面 (像是 <thead>, <tbody>, <tfoot> 或 <tr> 等表格標籤)。

<colgroup> 標籤裡面還可以有 <col> 標籤，可以用來在每個 colgroup 分組中再繼續做分組設定。

<col> 標籤上同樣有一個 span 屬性，用來指定這一個分組橫跨了幾個直行，span 預設值是 1。而且如果 colgroup 裡面有 col，colgroup 標籤上就不能再設定 span 囉。

用法範例：

<!-- CSS 樣式設定 -->
<style>
.gray-bg {
  background-color: gray;
}
.green-bg {
  background-color: green;
}
</style>

<!-- 表格 colgroup 設定 -->
<table>
  <colgroup>
    <col span="2" class="gray-bg">
    <col span="1" class="green-bg">
  </colgroup>
  
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>iPhone 11</td>
    <td>$24,900</td>
    <td>2</td>
  </tr>
  <tr>
    <td>AirPods</td>
    <td>$6,490</td>
    <td>1</td>
  </tr>
</table>
<col> 是個空元素不需要 closing tag。

顯示結果：

ItemPriceQuantity
iPhone 11$24,9002
AirPods$6,4901

比較複雜的多個 colgroup 和多個 col 的例子：

<table>
  <colgroup>
    <col span="2" style="background-color: gray;">
    <col span="1" style="background-color: green;">
  </colgroup>
  <colgroup style="background-color: yellow;"></colgroup>
  
  <tr>
    <th>Item</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Memo</th>
  </tr>
  <tr>
    <td>iPhone 11</td>
    <td>$24,900</td>
    <td>2</td>
    <td>NA</td>
  </tr>
  <tr>
    <td>AirPods</td>
    <td>$6,490</td>
    <td>1</td>
    <td>NA</td>
  </tr>
</table>

顯示結果：

ItemPriceQuantityMemo
iPhone 11$24,9002NA
AirPods$6,4901NA