︿

HTML網頁表格(Table)製作方法教學

2 週 之前│
Jin

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

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

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

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

注意事項:<style>…</style>為加入CSS標籤,由於本站加上了Reset CSS語法,,所以預設會將表格邊框設為0,所以如果有遇到此情況的問題,就必需額外在表格加上框線CSS語法,在<table>上加上一個CSS的ID選擇器帶入CSS語法。所以以下範例都會加上此段語法,若是沒有使用Reset CSS就可以將此段語法刪除。

表格所謂的「列」由<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>標籤組合組成,以下面語法範例來說,所以以「行」來說的話會在<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>

示意畫面

表格標題1表格標題2表格標題3
列一行一列一行二列一行三
列二行一列二行二列二行三
列三行一列三行二列三行三
列四行一列四行二列四行三
列五行一列五行二列五行三
表格結尾1表格結尾2表格結尾3

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

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

「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>

示意畫面

表格標題1表格標題3
列一行一列一行二列一行三
列二行一列二行二列二行三
列三行一列三行二列三行三
列四行一列四行二列四行三
列五行一列五行二列五行三
表格結尾1表格結尾2表格結尾3

「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>

示意畫面

表格標題1表格標題2表格標題3
列一列一行二列一行三
列二行二列二行三
列三行二列三行三
列四行二列四行三
列五行二列五行三
表格結尾1表格結尾2表格結尾3

※ 本篇文章若還有未詳盡的部分、排版會在進一步調整修改。

關鍵字: HTML 表格製作

▪ 相關文章

若是您喜歡我們的文章,可以考慮透過贊助我們》來給我們支持與鼓勵。