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 屬性

inherit

#規定應該從父元素繼承  border -spacing 屬性的值。

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

（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，(p.在自動表格佈局中，列的寬度是由列單元格中沒有折行的最寬的內容設定的。）；

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

（3）可能的值：

（學習影片分享：css影片教學）

以上是css設定表格的屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！