前端十一課--表格元素與表格佈局

表格元素與表格佈局

table元素:

1.在網頁內容中創造一個表格內容;

2.表格table的大小是由裏面的內容撐開的,沒有內容的空表不存在表格;

3.table設置樣式border"1";

裏面的數字表示邊框的寬度;

4.只有給table加上border屬性之後才能夠改變整個邊框的樣式(顏色)

tr元素:

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

2.tr元素無法手動設置行的寬度,但能設置高度;

3.可以設置文本對齊;

td元素:

1.在網頁內容中創造表格中的一列,每一個tr元素中間都要設置具體的列數,默認情況下,每一個tr的列數都是相同的;

2.td的高度和寬度都可以設置

3.可以設置文本對齊

th元素:

1.在表格中間創造一列中的表頭,專門用來標註這一列的數據類型或者是名稱;(比較特殊的td元素);

2.和td屬性一致;

表格區域劃分:

1.thead(表頭區域) tbody(表身區域) tfoot(表身區域)

2.設置爲這三個區域即使這三個不按順序寫也不影響;

caption標籤:(表格標題)

1.該元素出現的位置是表格上方居中,但不出現在表格當中(即沒有表格線包裹);

2.block型,text-line居中方式不適用;

單元格的大小:

1.在不設置的情況下表格的大小有裏面元素的大小決定

2.若單元格中沒有內容,默認的空間會很小幾乎不存在,這時候合併空的單元格是無效的(即不會被合併)

​ 2.1解決方案:不要設置空的單元格,然後前面的單元格合併後面的空位置就能實現有內容格佔據剩下的

​ 位置;

3.在進行行合併的時候同樣空單元格是不會被合併的
在這裏插入圖片描述

4.一行的高度,由該行最高的內容決定,一列的寬度,由該列最寬的內容決定

5.設置table的寬和高之後單元格的寬高大小:

​ 5.1一列的寬度:總寬度*該列所佔寬度的比例計算;

​ 5.2一行的高度:總高度*改行所佔高度的比例;

表格邊框:

border-spacing:20px;表格間隔;一個值上下左右都存在,即使爲零也存在表格線出現交集的效果;

border-collapse:邊框分隔(collapse,默認值seperate)

​ border-collapse:seperate;(表格之間依舊分隔着)

​ boreder-collapse:collapse;(表格線合併)

**表格中文字居中:**text-line:center;

合併單元格:

合併列:td屬性:colspan=“2”;

合併行:th屬性:rowspan=“2”;

中:**text-line:center;

合併單元格:

合併列:td屬性:colspan=“2”;

合併行:th屬性:rowspan=“2”;

數字表示合併的表格數;默認值爲1;

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