表格元素與表格佈局
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;