13.HTML CSS中的表格元素和表格佈局詳解

HTML CSS中的表格元素和表格佈局詳解

table元素:在頁面中創建一個表格。

td元素:在表中形成一列。

tr元素:在網頁內容中創造表格中的一行,只有行的話不會在網頁內容中間展示任何的效果,一個表格至少需要行和列同時出現。

th元素:在表格中間創造一列中的表頭,專門用來標註這一列的數據類型或是名稱。

caption元素,創造表格的名字。按照國際論文的基本格式,表格的名稱需要放在表格的下方,所以即便把caption元素髮在table元素的第一個子元素,這個元素中的文字也會在表格的最下面顯示,可用caption-side樣式改變位置。

合併單元格:colspan屬性表示該元素佔幾列,默認值爲1,將值設置爲2表示合併2個單元格。(橫向合併)

​ rowspan屬性表示該元素佔幾行,默認值爲1(縱向合併)

表格的默認尺寸數據計算

1:一列的寬度,由該列最寬的單元格內容決定。

2:一行的高度,由該行最高的單元格內容決定。

表格的固定尺寸數據計算

table元素:width:500px , height:500px。

1:一列的寬度,由該列最寬的內容決定
2:每一列的具體寬度,由總寬度*該列所佔寬度的比例計算

1:一行的高度,由該行最高的內容決定
2:每一列的具體寬度,由總寬度*該列所佔寬度的比例計算。

行列的高度固定尺寸數據計算

1:寬度放不下,行元素自動撐高
2:行元素撐高,整個table一起撐高

表格的邊框樣式設計(略做了解即可)

1:border-collapse:邊框分隔(collapse(合併),separate(分離)
2:border-spacing:邊框間距

邊框按照種類的優先級:
hidden>Double>soild>dashed>dotted>ridge>outset>groove>inset

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章