HTML網頁表格（Table）製作方法教學 - INMAG -

HTML要製作成表格首先必須要了解行高及列的用法，在製作表格時也較能夠清楚的知道如何製作，雖然目前也有許多線上HTML表格自動產生器，不過事先了解 ... HTML網頁表格（Table）製作方法教學-INMAG 首頁 › 網站製作 › HTML教學 › HTML網頁表格（Table）製作方法教學 HTML教學 2019-07-03 2021/02/27 HTML網頁表格（Table）製作方法教學 HTML要製作成表格首先必須要了解行高及列的用法，在製作表格時也較能夠清楚的知道如何製作，雖然目前也有許多線上HTML表格自動產生器，不過事先了解一下表格的製作方法會比較好處理。

學完HTML表格製作之後也能夠運用在許多平台上，例如：WordPress、Blogger…等等，讓你的網頁、內容更加豐富美觀。

不過由於表格有太多語法可以變化，教學無法用一篇文章就能做完教學，表格語法接著會教學的部分則是加入樣式、RWD（響應式網頁）、簡化製作表格RWD（響應式網頁）、線上製作表格的網頁工具…等等。

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

最後則是要教學表格的合併儲存格 首先表格的語法是由下列標籤所構成的。

…代表表格語法標籤的「開始」與「結束」。

…代表表格語法的「頭」，用來擺放標題，可以理解擺在「行」的標題。

…代表表格語法的「主體」，用來擺放資料表內容。

…代表表格語法的尾巴，用來擺放結語，可以理解用「行」的結尾，可以用來作小計、合計、統計…其他等等之類。

…代表表格的列，需要幾行就使用幾個。

…代表表格的資料欄，需要幾個就使用幾個。

注意事項：為加入CSS標籤，由於本站加上了ResetCSS語法，，所以預設會將表格邊框設為0，所以如果有遇到此情況的問題，就必需額外在表格加上框線CSS語法，在上加上一個CSS的ID選擇器帶入CSS語法。

所以以下範例都會加上此段語法，若是沒有使用ResetCSS就可以將此段語法刪除。

表格所謂的「列」由及標籤的第一行

標籤組成，「列」就是下面語法的
標籤，所以只要是表格的「列」都是由這樣所組合。
第一列	第一列	第一列
第二列	第二列	第二列
第三列	第三列	第三列
第四列	第四列	第四列
第五列	第五列	第五列

示意畫面 第一列 第一列 第一列 第二列 第二列 第二列 第四列 第四列 第四列 第五列 第五列 第五列 表格所謂的「行」也是由標籤及標籤組合組成，以下面語法範例來說，所以以「行」來說的話會在 標籤內依序就會分別代表「行」。

第一行 第二行 第三行 第一行 第二行 第三行 第一行 第二行 第三行 第一行 第二行 第三行 第一行 第二行 第三行 示意畫面 第一行 第二行 第三行 第一行 第二行 第三行 第一行 第二行 第三行 第一行 第二行 第三行 第一行 第二行 第三行 所以可以由以下表格預覽發現如果以「行」、「列」的概念來說，其實表格是由區塊來堆疊而成。

列一行一 列一行二 列一行三 列二行一 列二行二 列二行三 列三行一 列三行二 列三行三 列四行一 列四行二 列四行三 列五行一 列五行二 列五行三 示意畫面 列一行一 列一行二 列一行三 列二行一 列二行二 列二行三 列三行一 列三行二 列三行三 列四行一 列四行二 列四行三 列五行一 列五行二 列五行三 表格如果要加上標題及 就能利用以下的方法進行。

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

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

表格標題1 表格標題2 表格標題3 列一行一 列一行二 列一行三 列二行一 列二行二 列二行三 列三行一 列三行二 列三行三 列四行一 列四行二 列四行三 列五行一 列五行二 列五行三 表格結尾1 表格結尾2 表格結尾3 示意畫面 表格標題1 表格標題2 表格標題3 列一行一 列一行二 列一行三 列二行一 列二行二 列二行三 列三行一 列三行二 列三行三 列四行一 列四行二 列四行三 列五行一 列五行二 列五行三 表格結尾1 表格結尾2 表格結尾3 最後則是要教學表格的合併儲存格 在表格加上「合併儲存格」： 「colspan」將「列」來進行左右合併，取決於有幾列、想跨幾列。

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

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

表格標題1 xxx請刪除此段xxx表格標題2 表格標題3 列一行一 列一行二 列一行三 列二行一 列二行二 列二行三 列三行一 列三行二 列三行三 列四行一 列四行二 列四行三 列五行一 列五行二 列五行三 表格結尾1 表格結尾2 表格結尾3 示意畫面 表格標題1 表格標題3 列一行一 列一行二 列一行三 列二行一 列二行二 列二行三 列三行一 列三行二 列三行三 列四行一 列四行二 列四行三 列五行一 列五行二 列五行三 表格結尾1 表格結尾2 表格結尾3 「rowspan」將「行」來進行垂直合併，取決於有幾行、想跨幾行。

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

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

。

表格標題1 表格標題2 表格標題3 列一 列一行二 列一行三 xxx請刪除此段xxx列二 列二行二 列二行三 xxx請刪除此段xxx列三 列三行二 列三行三 xxx請刪除此段xxx列四 列四行二 列四行三 xxx請刪除此段xxx列五 列五行二 列五行三 表格結尾1 表格結尾2 表格結尾3 示意畫面 表格標題1 表格標題2 表格標題3 列一 列一行二 列一行三 列二行二 列二行三 列三行二 列三行三 列四行二 列四行三 列五行二 列五行三 表格結尾1 表格結尾2 表格結尾3 ※本篇文章若還有未詳盡的部分、排版會在進一步調整修改。

更多精選文章 HTML5新增figure及figcaption圖片及說明新元素 HTML上的ruby旁註標記注音使用方法 HTML 表格製作 0share 喜歡這篇文章的話請按個讚或者分享支持一下！ 喜歡這篇文章的話請按個讚或者分享支持一下！ 最新的教學及情報資訊都在INMAG！ 相關文章 BirthdayColor查詢專屬的生日色碼 網站製作工具 檢測網站SSL憑證等級SSLServerTest幫網站HTTPS打分數 網站製作工具 HTML基本介紹及語法介紹篇 HTML教學 CSScompressor線上壓縮CSS語法網站 網站製作工具 GTmetrix檢測網站速度線上工具 網站製作工具 免費的網站線上人數計數器Who’samung工具 網站製作工具 使用CSS3::selection修改滑鼠框選反白預設顏色 CSS教學 HTML上的ruby旁註標記注音使用方法 HTML教學 highlight.js好用的標示程式碼上色、高亮工具 網站製作工具 GoogleClosureCompiler壓縮Jave語法的工具 網站製作工具 ConvertHeicPhotostoJPEGs線上HEIC轉JPG圖片網站服務 網站製作工具 HTML5新增figure及figcaption圖片及說明新元素 HTML教學 相關文章 CSS3透明度的使用方法CSS教學 免費的網站線上人數計數器Who’samung工具網站製作工具 使用CSS3::selection修改滑鼠框選反白預設顏色CSS教學 使用Google所提供的HostedLibraries開源外連函式庫網站製作工具 控制英文字母大小寫的CSS語法text-transformCSS教學 hilite.me線上快速加入語法標記的工具網站網站製作工具 熱門文章 本日 本週 本月 また與まだ的差別 Mac快速觀看多個照片、圖片方法 iPhoneSIM卡「已鎖定」該如何重新解鎖呢... 照片忘記在哪拍的？旅遊必備！開啟iPhone內... iPhone網路有問題？試試看「重置網路設定」吧... Mac滑鼠捲動方向不習慣？關閉滑鼠滾輪自然選項 また與まだ的差別 Mac快速觀看多個照片、圖片方法 Mac滑鼠捲動方向不習慣？關閉滑鼠滾輪自然選項 iPhone手寫輸入法開啟方法教學 【我的地圖MyMaps】為地點加入更多圖示及顏... iPhone網路有問題？試試看「重置網路設定」吧... また與まだ的差別 Mac滑鼠捲動方向不習慣？關閉滑鼠滾輪自然選項 Mac快速觀看多個照片、圖片方法 iPhone手寫輸入法開啟方法教學 iPhone網路有問題？試試看「重置網路設定」吧... 【手機條碼】將「手機條碼」列印出來，方便掃描 作者簡介 Jin 寫好每一篇文章讓各位都能學習到各種小知識，希望大家會喜歡！ │ 更多文章 Mac批次修改圖片尺寸大小、等比例縮放 Mac批次修改檔案名稱、加入文字、編號 熱門文章 本日 本週 本月 また與まだ的差別 Mac快速觀看多個照片、圖片方法 iPhoneSIM卡「已鎖定」該如何重新解鎖呢... 照片忘記在哪拍的？旅遊必備！開啟iPhone內... iPhone網路有問題？試試看「重置網路設定」吧... Mac滑鼠捲動方向不習慣？關閉滑鼠滾輪自然選項 また與まだ的差別 Mac快速觀看多個照片、圖片方法 Mac滑鼠捲動方向不習慣？關閉滑鼠滾輪自然選項 iPhone手寫輸入法開啟方法教學 【我的地圖MyMaps】為地點加入更多圖示及顏... iPhone網路有問題？試試看「重置網路設定」吧... また與まだ的差別 Mac滑鼠捲動方向不習慣？關閉滑鼠滾輪自然選項 Mac快速觀看多個照片、圖片方法 iPhone手寫輸入法開啟方法教學 iPhone網路有問題？試試看「重置網路設定」吧... 【手機條碼】將「手機條碼」列印出來，方便掃描 標籤AirPods Apple AppleWatch Blogger Chrome CSS Facebook Google GoogleChrome GoogleChrome外掛 GoogleMap Google搜尋 iOS10 iOS11 iOS14 iOS15 iOSApp iPhone iPhoneApp iPhone教學 Jetpack Line macOS macOS教學 Safari Siri WordPress WordPress佈景製作 WordPress外掛 YouTube 京都 圖庫 大阪 手機條碼 日文 日本 日本傳統 日本妖怪 日本旅遊 日本豆知識 東京 瀏覽器 編輯器 過時文章 電子發票