HTML 表格（Table）製作方法教學

HTML 表格製作首先必須要了解行高及列的用法，在製作表格時也較能夠清楚的知道如何製作，雖然目前也有許多線上HTML表格自動產生器，不過事先了解一下表格的製作方法會比較好處理。

學完HTML表格製作之後也能夠運用在許多平台上，例如：WordPress、Blogger…等等，讓你的網頁、內容更加豐富美觀。不過由於表格有太多語法可以變化，教學無法用一篇文章就能做完教學，表格語法接著會教學的部分則是加入樣式、RWD（響應式網頁）、簡化製作表格RWD（響應式網頁）、線上製作表格的網頁工具…等等。

首先表格的語法是由下列標籤所構成的。

<table>…</table>代表表格語法標籤的「開始」與「結束」。
<thead>…</thead>代表表格語法的「頭」，用來擺放標題，可以理解擺在「行」的標題。
<tbody>…</tbody>代表表格語法的「主體」，用來擺放資料表內容。
<tfoot>…</tfoot>代表表格語法的尾巴，用來擺放結語，可以理解用「行」的結尾，可以用來作小計、合計、統計…其他等等之類。
<tr>…</tr>代表表格的列，需要幾行就使用幾個。
<td>…</td>代表表格的資料欄，需要幾個就使用幾個。

<style>#tds table,#tds tr,#tds td{border:1px solid #000;}</style>
<table id="tds">
<tbody>
<tr>
<td>第一列</td>
<td>第一列</td>
<td>第一列</td>
</tr>
<tr>
<td>第二列</td>
<td>第二列</td>
<td>第二列</td>
</tr>
<tr>
<td>第三列</td>
<td>第三列</td>
<td>第三列</td>
</tr>
<tr>
<td>第四列</td>
<td>第四列</td>
<td>第四列</td>
</tr>
<tr>
<td>第五列</td>
<td>第五列</td>
<td>第五列</td>
</tr>
</tbody>
</table>

示意畫面

表格所謂的「行」也是由<tr>標籤及<td>標籤組合組成，以下面語法範例來說，所以以「行」來說的話會在<tr>標籤內依序<td>就會分別代表「行」。

<style>#tds table,#tds tr,#tds td{border:1px solid #000;}</style>
<table id="tds">
<tbody>
<tr>
<td>第一行</td>
<td>第二行</td>
<td>第三行</td>
</tr>
<tr>
<td>第一行</td>
<td>第二行</td>
<td>第三行</td>
</tr>
<tr>
<td>第一行</td>
<td>第二行</td>
<td>第三行</td>
</tr>
<tr>
<td>第一行</td>
<td>第二行</td>
<td>第三行</td>
</tr>
<tr>
<td>第一行</td>
<td>第二行</td>
<td>第三行</td>
</tr>
</tbody>
</table>

示意畫面

所以可以由以下表格預覽發現如果以「行」、「列」的概念來說，其實表格是由<tr><td>區塊來堆疊而成。

<style>#tds table,#tds tr,#tds td{border:1px solid #000;}</style>
<table id="tds">
<tbody>
<tr>
<td>列一行一</td>
<td>列一行二</td>
<td>列一行三</td>
</tr>
<tr>
<td>列二行一</td>
<td>列二行二</td>
<td>列二行三</td>
</tr>
<tr>
<td>列三行一</td>
<td>列三行二</td>
<td>列三行三</td>
</tr>
<tr>
<td>列四行一</td>
<td>列四行二</td>
<td>列四行三</td>
</tr>
<tr>
<td>列五行一</td>
<td>列五行二</td>
<td>列五行三</td>
</tr>
</tbody>
</table>

示意畫面

表格如果要加上標題<thead>及<tfoot>就能利用以下的方法進行。

在<tbody>的上方加入<thead>標題標籤，如果有幾個列就輸入幾個，以行的形式對照。

在<tbody>的下方加入<tfoot>標題標籤，如果有幾個列就輸入幾個，以行的形式對照。

<style>#tds table,#tds tr,#tds td{border:1px solid #000;}</style>
<table id="tds">
<thead>
<tr>
<td>表格標題1</td>
<td>表格標題2</td>
<td>表格標題3</td>
</tr>
</thead>
<tbody>
<tr>
<td>列一行一</td>
<td>列一行二</td>
<td>列一行三</td>
</tr>
<tr>
<td>列二行一</td>
<td>列二行二</td>
<td>列二行三</td>
</tr>
<tr>
<td>列三行一</td>
<td>列三行二</td>
<td>列三行三</td>
</tr>
<tr>
<td>列四行一</td>
<td>列四行二</td>
<td>列四行三</td>
</tr>
<tr>
<td>列五行一</td>
<td>列五行二</td>
<td>列五行三</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格結尾1</td>
<td>表格結尾2</td>
<td>表格結尾3</td>
</tr>
</tfoot>
</table>

示意畫面

最後則是要教學表格的合併儲存格

在表格加上「合併儲存格」：

「colspan」將「列」來進行左右合併，取決於有幾列、想跨幾列。

使用方法很簡單，只需要在<td>上加入「colspan」語法，並且標上跨幾列的數字。

表格標題1、表格標題2、表格標題3，如果需要將標題1跟標題2合併，就先將其中一個刪除，例如將標題2刪掉，並且將標題1加入colspan語法，因為跨兩格的關係，所以就輸入數字2，就能完成合併儲存格，做法以此類推進行就可以了。

<style>#tds table,#tds tr,#tds td{border:1px solid #000;}</style>
<table id="tds">
<thead>
<tr>
<td colspan="2">表格標題1</td>
xxx請刪除此段xxx<td>表格標題2</td>
<td>表格標題3</td>
</tr>
</thead>
<tbody>
<tr>
<td>列一行一</td>
<td>列一行二</td>
<td>列一行三</td>
</tr>
<tr>
<td>列二行一</td>
<td>列二行二</td>
<td>列二行三</td>
</tr>
<tr>
<td>列三行一</td>
<td>列三行二</td>
<td>列三行三</td>
</tr>
<tr>
<td>列四行一</td>
<td>列四行二</td>
<td>列四行三</td>
</tr>
<tr>
<td>列五行一</td>
<td>列五行二</td>
<td>列五行三</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格結尾1</td>
<td>表格結尾2</td>
<td>表格結尾3</td>
</tr>
</tfoot>
</table>

示意畫面

「rowspan」將「行」來進行垂直合併，取決於有幾行、想跨幾行。

使用方法很簡單，只需要在<td>上加入「rowspan」語法，並且標上跨幾行的數字。

列一、列二、列三、列四、列五，如果需要將這些表格垂直合併，只需要刪除列二、列三、列四、列五，只保留一，在加上「rowspan」語法，然後因為跨5格的關係，所以就加入數字5，就能完成合併儲存格，做法以此類推進行就可以了。。

<style>#tds table,#tds tr,#tds td{border:1px solid #000;}</style>
<table id="tds">
<thead>
<tr>
<td>表格標題1</td>
<td>表格標題2</td>
<td>表格標題3</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="5">列一</td>
<td>列一行二</td>
<td>列一行三</td>
</tr>
xxx請刪除此段xxx<td>列二</td>
<td>列二行二</td>
<td>列二行三</td>
</tr>
<tr>
xxx請刪除此段xxx<td>列三</td>
<td>列三行二</td>
<td>列三行三</td>
</tr>
<tr>
xxx請刪除此段xxx<td>列四</td>
<td>列四行二</td>
<td>列四行三</td>
</tr>
<tr>
xxx請刪除此段xxx<td>列五</td>
<td>列五行二</td>
<td>列五行三</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格結尾1</td>
<td>表格結尾2</td>
<td>表格結尾3</td>
</tr>
</tfoot>
</table>

示意畫面