佈局用有三個『表』
- 表格 ( HTML table )
- 表單 ( HTML list )
- 列表 ( HTML form )
表格的目的就是使資料排列整齊，讓整體看起來好看
HTML table 表格是什麼?
表格的目的
- 表格就是用來展示數據的
學習目標
- 理解
- 表格是用來做什麼 ( 以後看到別人網站，就能知道他使用什麼功能做的 )
- 表格的基本結構組成
- 應用 (檢測水平)
- 能夠熟練寫出 n 行 n 列的表格
- 能夠應用合併單元格
HTML table 表格的作用是什麼?
以前的人會使用表格來佈局頁面，但使用了一段時間後發現非常坑才意識到原來是自己把表格用錯了地方，真正表格不是用來佈局頁面而是用佈局表格來顯示、展示表格數據。
因為使用表格來顯示數據可讀性較高，也非常整齊一致，特別是當你網站專門用來顯示數據在前端都會使用表格來呈現數據效果是最好的，所以是否熟練使用表格就顯得很重要了，經過表格就能把一大坨雜亂的數據放到他們該有的行和列中讓自己或是給別人看就顯得乾淨清爽。
雖然使用 div 佈局也可以做到用來展示數據，但你用起來就沒有表格來的方便快速又有效率，所以這個表格標籤還一直存在並在 HTML5 中還給了它更多增強功能，所以現在知道了表格的重要性了吧。
HTML 如何創建 table 表格 ?
創建表格語法:
<table>
<tr>
<td>單元格文字</td>
...
</tr>
...
</table>要了解表格標籤，首先要想想表格是由那些東西所組成形成的
- 表格 ( table )
- 行 ( tr )
- 單元格 ( td )
在上面語法中包含了基本三對，HTML 標籤幾乎都是成雙成對居多，<table>、<tr>、<td> 它們是創建表格的基本標籤缺一不可，只要有缺少這三對標籤就會產生顯示不出來或是出現問題，在下面會進行更詳細解釋一開始先有個概念就好。
- <table> 表格標籤就是表格的外框，如沒有外框是不是就不能顯示了，所以最重要
- <tr> 行標籤是用來定義表格中的行，如果你要需要三行顯示，就要使用三次 <tr> 行標籤，必須嵌套在 <table></table> 表格標籤裡頭
- <td> 單元格標籤是用來顯示數據內容的地方，需要嵌套在 <tr></tr> 行標籤裡頭
HTML Table 標籤還原縮寫意思
- <table> 表格標籤
- <tr> 縮寫原意 table row ( 表格中的行 )
- <td> 縮寫原意 table data ( 表格中的單元格 )
- <th> 縮寫原意 table header ( 表格中的表頭 )
小總結
- 表格的主要目的就是用來顯示數據的
- 一個完整的表格，標籤有表格標籤 <table>、行標籤 <tr>、單元格標籤 <td> 所組成
- <tr></tr> 必須嵌套在 <table></table> 表格標籤裡頭，也就是<tr>行標籤要被包在<table>裡頭
- <tr></tr> 行標籤裡頭只能嵌套 <td></td>
- <td></td> 單元格標籤裡頭就像是一個容器，通常都會放數據
以上就是table表格標籤的最基本用法，當你完成後你會覺得說怎麼我寫出來的表格是那麼的陽春，沒錯不用懷疑這是很正常的，沒有加入任何表格屬性現在呈現出來的表格是沒有框線的，如果你要加入框線或是邊框、內部字體移動，小青會在下一節帶你了解更加進階的的寫法才會讓你表格看起來更加豐富。
點我瞭解 小青如何每月多賺5位數台幣HTML table 表格屬性有哪些?
表格的屬性小青把它列在下方展示出來，這些屬性是 <table> 表格標籤最常使用的但你不需要背也不需要記，只要知道有哪些，哪些是常用的屬性就可以了，border 屬性就是設置邊框的粗細，一般如果你在表格中沒有寫入border 屬性會自動默認 border=”0″ 也就是沒有邊框唷! align 屬性可以決定讓整個表格在網頁中顯示處於那裡位置。
width 屬性與 height 屬性是能夠決定表格的寬度與高度，cellspaceing 屬性是能夠改變邊框線的寬度，講明白點就是 A 單元格與 B 單元格中間不是會有一個邊框線，前提是你必須先使用 border 屬性而屬性值必須 1 以上才能夠使用 cellspaceing 屬性進行邊框線改變否則是看不出效果的，cellpadding 屬性是能夠改變單元格裡面文字內容到邊框的距離，其中比較特別的有 cellspaceing、cellpadding 如果還是不太懂這兩個屬性方法後面會在更詳細的去講解。
| 屬性名稱 | 屬性意思 | 常用屬性值 |
| border | 設置表格的邊框 | 像素質 (px) |
| cellspaceing | 設置單元格與單元格邊框的空白間距 | 像素質 (px)、(默認為2px) |
| cellpadding | 設置單元格內容與單元格邊框的空白間距 | 像素質 (px)、(默認為1px) |
| width | 設置表格的寬度 | 像素質 (px) |
| height | 設置表格的高度 | 像素質 (px) |
| align | 設置表格在網頁中的水平方向 | left、center、right |
<table boder="1" width="300" height="200" align="center">
<tr>
<td>單元格文字</td>
...
</tr>
...
</table>要記得在使用屬性的時候標籤名打完之後都必須要空一格，不然是不能使用任何屬性的功能唷!
HTML table 表格屬性 cellspaceing 用法
這個 cellspaceing 屬性是在 td 單元格與 td 單元格之間調整邊框線的距離，調整數值給越大間距就會越寬大，如果不想給任何間距寬度，數值你就設置 0 就可以了。
<table boder="1" width="300" height="200" align="center" cellspaceing="0">
<tr>
<td>單元格文字</td>
...
</tr>
...
</table>HTML table 表格屬性 cellpadding 用法
這個 cellpadding 屬性是能夠改變 <td> 單元格裡面的數據內容與邊框的距離，如果數值給的越大就會距離邊框越遠，一般我們都會說改變的是 <td> 單元格的內部距離。
<table boder="1" width="300" height="200" align="center" cellspaceing="0" cellpadding="0">
<tr>
<td>單元格文字</td>
...
</tr>
...
</table>HTML table 表格中的表頭單元格標籤 <th>
這個 <th> 表頭標籤是表格中的表頭單元格，如果根據 <th> 原意縮寫還原意思是 table header 可以了解到原來指的就是表格的頭部，通常表頭都是用在重要說明的地方會自動使用加粗與居中功能，如果使用 <th> 表頭標籤可以帶來極度的便利性和提高效率，如果你是使用 <td> 單元格標籤就沒有自帶加粗效果與文字居中，如果需要的話就要多加一個 <strong> 加粗標籤在文字上才能實現，這樣效率就沒有來的使用 <th> 表頭標籤快許多。
表頭單元格標籤 <th> 用法
- 只需要把原本使用 <td></td> 單元格標籤換成使用 <th></th> 表頭單元格標籤就可以了
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>班級</th>
</tr>
</table>小總結
<th> 表頭單元格標籤也是一種單元格裡頭可以存放資料，和 <td> 單元格標籤不一樣的地方是 <th> 表頭標籤會自動讓自己裡頭文字加粗、居中效果。
HTML table 表格標題 caption 的用法
表格標題 caption 元素標籤，通常是用來說明這個 <table> 表格標籤的標題，<caption> 表格標題標籤會出現在 <table> 表格標籤的正上方並居中表示，一樣是成雙成對的 <caption></caption>，還有一點是這個標籤必須在 <table></table> 表格標籤裡頭才能使用並被賦予意義。
<table>
<caption>我是表格標題</caption>
</table>HTML table 合併單元格 (稍難)
合併單元格是我們一般比較常用的一種操作，如果使用微軟 Word 操作就十分簡單，但如果要自己用網頁畫出表格後並在 <td> 單元格與 <td> 單元格之間要進行合併就會需要理解一下操作原理邏輯這樣才會比較好進行合併，現在合併 <td> 單元格只有兩種方式，只要了解合併的方式往後要進行任何合併方式就能解決合併的問題。
合併單元格2種方式
- 跨行合併: rowspan=” 合併單元格的個數 “
- 跨列合併: colspan=” 合併單元格的個數 “
HTML table 合併單元格順序
合併是有順序的，一般我們都會按照先上後下、先左後右的順序，如果你不遵循這順序你會搞不懂為什麼的，因為這樣設計是一般人都是先從上到下與左到右讀寫，像以前學寫國字都是這樣遵守規則，只要遵循這規則合併原理就不會難以理解，如果硬要逆著想小青我只能祝你好運。
當然你可能會想國字也可以從右到左，作文都是這樣書寫，但英文不能夠從右到左書寫畢竟還是要知道一點的是 HTML 不是使用中文來書寫而是用英文，開發 HTML 的開發者們也不是使用中文邏輯，所以請以英文的書寫邏輯來思考。
HTML table 合併單元格請先遵守 SOP
- 先確定你要跨行還是跨列合併
- 根據先上後下、先左至右的原則找到目標單元格，進行添加屬性
- 刪除多於的 <td> 單元格
步驟一
先確定我們需要把那些 <td> 單元格進行合併，並了解合併的位置是行還是列，不然用錯了最終呈現的結果會不是你所想要的，首先先把 <table> 表格標籤整個繪製出來。
<table border="1" align="center" width="800" height="200" cellspacing="0">
<tr>
<td>姓名</td>
<td>小青</td>
<td></td>
<td>照片</td>
</tr>
<tr>
<td>種族</td>
<td>人族</td>
<td>已婚</td>
<td>照片</td>
</tr>
<tr>
<td>個人作品</td>
<td>個人作品</td>
<td>個人作品</td>
<td>個人作品</td>
</tr>
<tr>
<td>個人簡歷</td>
<td>個人簡歷</td>
<td>個人簡歷</td>
<td>個人簡歷</td>
</tr>
</table>步驟二
已經確定好哪行哪列的 <td> 單元格要進行合併動作，再來只要遵循先上後下、先左至右進行行與列的標記並在屬性中填入你要合併的個數。
- 跨行合併: rowspan=” 合併單元格的個數 “
- 跨列合併: colspan=” 合併單元格的個數 “
<table border="1" align="center" width="800" height="200" cellspacing="0">
<tr>
<td>姓名</td>
<td colspan="2">小青</td>
<td></td>
<td rowspan="2">照片</td>
</tr>
<tr>
<td>種族</td>
<td>人族</td>
<td>已婚</td>
<td>照片</td>
</tr>
<tr>
<td colspan="4">個人作品</td>
<td>個人作品</td>
<td>個人作品</td>
<td>個人作品</td>
</tr>
<tr>
<td colspan="4">個人簡歷</td>
<td>個人簡歷</td>
<td>個人簡歷</td>
<td>個人簡歷</td>
</tr>
</table>完成之後你查看一下你的網頁中表格會長成什麼樣子，沒錯就是如下圖那樣長成這樣非常醜陋，而且還看不出來顯示的成果對不對，那是因為我們還沒進行刪除被合併的 <td> 單元格，接下來進行最後一個步驟。
步驟三
刪除多餘的 <td> 單元格標籤，在前面我們要決定好單元格個數，假設總體此行合併有3個只需要保留最先的那一個 <td> 單元格標籤，也就是先上後下、由左至右的第一個你看到的單元格標籤，第一個我們要保留而已其餘只要刪掉它們的 <td> 單元格標籤語法就好了。
<table border="1" align="center" width="800" height="200" cellspacing="0">
<tr>
<td>姓名</td>
<td colspan="2">小青</td>
<td rowspan="2">照片</td>
</tr>
<tr>
<td>種族</td>
<td>人族</td>
<td>已婚</td>
</tr>
<tr>
<td colspan="4">個人作品</td>
</tr>
<tr>
<td colspan="4">個人簡歷</td>
</tr>
</table>
當你刪除完畢後，進行存檔再重新打開瀏覽器或是按下鍵盤 F5 就能夠看見是我們一開始想要合併的後的表格了，如果你看見的不是下圖這樣的表格，就說明你有個步驟有錯誤需要找找錯在哪了，在回到該步驟查看你忽略了那些東西才導致錯誤。
HTML table 總結
| 標籤名 | 定義 | 說明 |
| <table></table> | 表格標籤 | 就是一個四方形盒子 |
| <tr></tr> | 表格行標籤 | 必須在 <table> 標籤裡頭使用行標籤才有意義 |
| <td></td> | 單元格標籤 | 必須在 <tr> 標籤裡頭使用，td 是一個容器元素可放任何東西 |
| <th></th> | 表頭單元格標籤 | 跟 <td> 很像，差別在會自動加粗、居中 |
| <caption></caption> | 表格標題標籤 | 表格的標題，必須寫在 <table> 標籤才能使用，會自動居中 |
| rowspan 與 clospan | 合併屬性 | 用來合併單元格使用的 |
- 表格就是提供 HTML 中用來展示數據的一種方法
- 表格是由 <tr> 行標籤與 <td> 單元格標籤所組成的
- 表格中就算有 <tr> 行標籤，但裡面沒有 <td> 單元格標籤存放數據，那這個表格也沒意義
- 表格一開始剛學習不要糾結在外觀樣式上，樣式是CSS負責的
- 表格在HTML中要能學會，要先了解手繪表格架構與單元格合併的細節
能看到這裡通常只有 1％ 的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青