iT邦幫忙

2025 iThome 鐵人賽

DAY 6
0

TABLE的呈現類似一個資料表,table作為表格的容器,表格的內容都得寫在table內。
tr:表格的橫向
th:表格資料的標題,默認粗體
td:表格的資料
caption:表格的標題

https://ithelp.ithome.com.tw/upload/images/20250920/20178696MeuJKMA81I.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696KVio52NSto.png
表格的th一定要跟td的數量對上,不然會有錯亂的情況,就算沒有資料,在td內不輸入,表格會自動以空白補上,這樣表格資料不會亂掉。
非頂部區域的th也能夠充當td
https://ithelp.ithome.com.tw/upload/images/20250920/20178696XT9Ix8jeeF.png
https://ithelp.ithome.com.tw/upload/images/20250920/201786966vXKEGH3DG.png

th是表格資料的標題,可以使用多個th,但caption是這個表格的標題,同一表格只能使用一個
https://ithelp.ithome.com.tw/upload/images/20250920/20178696nV1P3Qa4pr.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696ZpLlxPXzR0.png

thead:表格的頂部區域
tbody:表格的中心,主要資料的呈現區域
tfoot:表格的底部區域

https://ithelp.ithome.com.tw/upload/images/20250920/20178696QEyHz2eGcz.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696FZnUJZ9Z1M.png
可以看到這些thead跟tbody的加入對網頁的呈現沒有半點改變,他們的用途其實是讓程式碼閱讀更容易些,可以清楚的知道表格區塊分布。
給table設樣式會影響整個表格,而tr則是改變它資料的樣式,也可以給td進行單一改變
https://ithelp.ithome.com.tw/upload/images/20250920/20178696APw79u82XY.png
https://ithelp.ithome.com.tw/upload/images/20250920/201786968uJAfs2ESh.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696U39RIVjwsa.png
給每個表格標籤添加邊線border
https://ithelp.ithome.com.tw/upload/images/20250920/20178696PdwOvCKIjq.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696C3GGTFaCAh.png
添加clspan="合併格數"可以實現水平合併
https://ithelp.ithome.com.tw/upload/images/20250920/201786966rLXV6hxLg.png
https://ithelp.ithome.com.tw/upload/images/20250920/2017869677ahySxyQN.png

如果沒注意格式的話會導致資料被推開
https://ithelp.ithome.com.tw/upload/images/20250920/20178696wkbM1q8QTM.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696ipXEHjdRYe.png

有水平就會有垂直相關,這裡有垂直合併rowspan
跟colspan很像一樣是rowspan="合併格數"只是合併的方向改變,rowspan使用的時候被合併到的td要刪除,不然會被擠開
https://ithelp.ithome.com.tw/upload/images/20250920/20178696zFiVYZQVFa.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696w56S437QNU.png
colgroup 顏色群組
colgroup可以添加數個col標籤
col內的span元素表示顏色要填入幾個區域,如果沒有span屬性,會以col的數量依序填入,可以看到當col數量不足時後續也不會再次填入
https://ithelp.ithome.com.tw/upload/images/20250920/20178696xSCoFjsWAo.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696GE7kiypTHg.png

cellspacing可以調整表格之間的間隔,設為0表格之間就不會有空隙
https://ithelp.ithome.com.tw/upload/images/20250920/20178696mS7qAge366.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696zqT3ls4En6.png
在table的width和height,會影響整格表格的寬高
https://ithelp.ithome.com.tw/upload/images/20250920/20178696mI9LKAr886.png
https://ithelp.ithome.com.tw/upload/images/20250920/20178696kxMPCnGx4m.png


上一篇
DAY5超連結
下一篇
Day7列表
系列文
HTML&CSS30天修煉7
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言