TABLE的呈現類似一個資料表,table作為表格的容器,表格的內容都得寫在table內。
tr:表格的橫向
th:表格資料的標題,默認粗體
td:表格的資料
caption:表格的標題
表格的th一定要跟td的數量對上,不然會有錯亂的情況,就算沒有資料,在td內不輸入,表格會自動以空白補上,這樣表格資料不會亂掉。
非頂部區域的th也能夠充當td
th是表格資料的標題,可以使用多個th,但caption是這個表格的標題,同一表格只能使用一個
thead:表格的頂部區域
tbody:表格的中心,主要資料的呈現區域
tfoot:表格的底部區域
可以看到這些thead跟tbody的加入對網頁的呈現沒有半點改變,他們的用途其實是讓程式碼閱讀更容易些,可以清楚的知道表格區塊分布。
給table設樣式會影響整個表格,而tr則是改變它資料的樣式,也可以給td進行單一改變
給每個表格標籤添加邊線border
添加clspan="合併格數"可以實現水平合併
如果沒注意格式的話會導致資料被推開
有水平就會有垂直相關,這裡有垂直合併rowspan
跟colspan很像一樣是rowspan="合併格數"只是合併的方向改變,rowspan使用的時候被合併到的td要刪除,不然會被擠開
colgroup 顏色群組
colgroup可以添加數個col標籤
col內的span元素表示顏色要填入幾個區域,如果沒有span屬性,會以col的數量依序填入,可以看到當col數量不足時後續也不會再次填入
cellspacing可以調整表格之間的間隔,設為0表格之間就不會有空隙
在table的width和height,會影響整格表格的寬高