在網頁中我們通常使用表格來展示一些數據,例如成績表、財務報表等,但是默認情況下表格的樣式并不美觀,甚至不符合頁面的風格。CSS 中提供了一些屬性,通過這些屬性您可以修改表格的樣式,大大改善表格的外觀。
table-layout:設置表格的布局算法,布局算法有兩種,分別為固定表格布局算法和自動表格布局算法;
border-collapse:設置表格中單元格的邊框是合并在一起還是按照標準的 HTML 樣式分開;
border-spacing:設置當表格邊框分開時,相鄰兩個邊框在橫向和縱向上的間距;
caption-side:設置表格標題相對于表格的位置;
empty-cells:設置當表格的單元格中沒有內容時,是否顯示該單元格的邊框。
table-layout 屬性用來設置表格布局時所用的布局算法,屬性的可選值如下:
固定表格布局允許瀏覽器更快地對表格進行布局。在固定表格布局中,表格的水平寬度僅取決于列寬度、表格邊框寬度、單元格間距等因素,與單元格中的內容無關。也就是說,表格中超出表格寬度的內容可能會被忽略。
在自動表格布局中,列的寬度視單元格中的內容(沒有換行的最寬內容)而定,也就是說如果某個單元格的寬度為 100px,但單元格中內容所占據的寬度要大于 100px,這就會導致單元格中的內容將單元格撐大。正是因為這一特點,此種算法可能會比較慢。
border-collapse 屬性用來設置是否合并表格中相鄰的邊框,屬性的可選值如下:
【示例】通過 border-collapse 屬性來合并或拆分單元格的邊框:
運行結果如下圖所示:
默認情況下表格的邊框是隱藏的,所以上面示例中我們需要使用<table>標簽的 border 屬性來顯示邊框,另外,您也可以使用 CSS 的 border 屬性來為表格設置邊框,如下所示: