# 2.18 表格

## 語意

即表格之意。‌

`<table>`：表格標籤。

`<tr>`：**t**able **r**ow 的縮寫。‌

`<td>`：**t**able **d**ata 的縮寫。‌

`<th>`：**t**able **h**eading 的縮寫。‌

`<thead>`：**t**able **head** 的縮寫。‌

`<tfoot>`：**t**able **foot** 的縮寫。‌

`<tbody>`：**t**able **body** 的縮寫。‌

## 說明

撰寫表格時，預設是不會有各欄的框線。

## 結構

```markup
<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>
```

按照定義，撰寫的順序，`<thead>` 先寫，緊接著 `<tbody>` ，再來才是 `<tfoot>`。‌

## 範例

```markup
<table>
  <thead>
    <tr>
      <th>標題一</th>
      <th>標題二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>第一列第一欄</td>
      <td>第一列第二欄</td>
    </tr>
    <tr>
      <td>第二列第一欄</td>
      <td>第二列第二欄</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>tfoot 第一欄</td>
      <td>tfoot 第二欄</td>
    </tr>
  </tfoot>
</table>
```

結果呈現：

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LdUw6A8IcUFoNsoo_JR%2F-LdUw6XiCfTmHo9yFIIY%2F-LdUwAk6VU-wFiaoAUXq%2F%E9%80%B2%E9%9A%8E%E7%B5%90%E6%A7%8B.png?generation=1556387779605844\&alt=media)

## rowspan 與 colspan 合併欄位

* rowspan：以「列(橫)」的方式來算，合併幾個欄位。
* colspan：以「行(直)」的方式來算，合併幾個欄位。

```markup
<table>
  <tbody>
    <tr>
      <td>第一列第一欄</td>
      <td>第一列第二欄</td>
    </tr>
    <tr>
      <td>第二列第一欄</td>
      <td>第二列第二欄</td>
    </tr>
  </tbody>
</table>
```

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LdUw6A8IcUFoNsoo_JR%2F-LdUw6XiCfTmHo9yFIIY%2F-LdUwAk8YRcseHi7HFYl%2Ftable_original.png?generation=1556387779951400\&alt=media)

```markup
<table>
  <tbody>
    <tr>
      <td rowspan="2">第一列第一欄</td>
      <td>第一列第二欄</td>
    </tr>
    <tr>
      <td>第二列第二欄</td>
    </tr>
  </tbody>
</table>
```

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LdUw6A8IcUFoNsoo_JR%2F-LdUw6XiCfTmHo9yFIIY%2F-LdUwAkAclcjU2V_y4YD%2Ftable_rowspan.png?generation=1556387779756855\&alt=media)

```markup
<table>
  <tbody>
    <tr>
      <td colspan="2">第一列第一欄</td>
    </tr>
    <tr>
      <td>第二列第一欄</td>
      <td>第二列第二欄</td>
    </tr>
  </tbody>
</table>
```

![](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-LdUw6A8IcUFoNsoo_JR%2F-LdUw6XiCfTmHo9yFIIY%2F-LdUwAkCF9KK4DD13EjX%2Ftable_colspan.png?generation=1556387779941191\&alt=media)