css設置表格的屬性有哪些

css設置表格的屬性：1、border-collapse屬性，折疊表格邊框；2、padding屬性；3、border-spacing屬性；4、caption-side屬性；5、empty-cells 屬性；6、table-layout屬性。

本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS表格：

1. 折疊表格邊框：border-collapse 屬性

（1）作用：設置表格的邊框是否被合并為一個單一的邊框，還是象在標準的 HTML 中那樣分開顯示；

（2）補充知識點：表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨立的邊框。

（3）可能的值：

（4）瀏覽器的支持性：所有主流瀏覽器都支持 border-collapse 屬性。

Ps: 必須規定 !DOCTYPE，否則 border-collapse 可能產生意想不到的結果。

2. 表格內邊距：padding屬性

#作用：控制表格中內容與邊框的距離，請為 td 和 th 元素設置 padding 屬性；

3. 邊框分離：border-spacing 屬性

（1）作用：該屬性指定分隔邊框模型中單元格邊界之間的距離。除非 border-collapse 被設置為 separate，否則將忽略這個屬性。盡管這個屬性只應用于表，不過它可以由表中的所有元素繼承。

（2）可能的值：

（3）瀏覽器的兼容性：除IE外的所有主流瀏覽器都支持 border-spacing 屬性。如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 border-spacing 屬性。

4. 表格標題：caption-side屬性

（1）作用：設置表格標題的位置，該屬性指定了表標題相對于表框的放置位置。表標題顯示為好像它是表之前（或之后）的一個塊級元素。

（2）可能的值：

（3）瀏覽器的兼容性：除IE外的所有主流瀏覽器都支持 caption-side 屬性。如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side屬性。

5. 空單元格的處理：empty-cells 屬性

（1）作用：該屬性定義了不包含任何內容的表單元格如何表示。如果顯示，就會繪制出單元格的邊框和背景。除非 border-collapse 設置為 separate，否則將忽略這個屬性。

（2）可能的值：

（3）瀏覽器的兼容性：除IE外的所有瀏覽器都支持 empty-cells 屬性。如果已規定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 屬性。

6. 表格布局算法：table-layout屬性

（1）作用：來顯示表格單元格、行、列的算法規則，該屬性指定了完成表布局時所用的布局算法。

（2）兩種算法：

<1>固定表格布局: fixed

#優點：允許瀏覽器更快地對表格進行布局, （在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的內容無關。通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。）；

#缺點：不太靈活。

<2>自動表格布局：automatic

#優點：更能反映傳統的 HTML，（在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。）；

#缺點：自動算法比較慢，這是由于它需要在確定最終的布局之前訪問表格中所有的內容。

（3）可能的值：

（學習視頻分享：css視頻教程）