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表格：

#屬性	描述
border-collapse	設定是否把表格邊框合併為單一的邊框。
border-spacing	設定分隔單元格邊框的距離。
caption-side	設定表格標題的位置。
empty-cells	設定是否顯示表格中的空白單元格。
table-layout	#設定顯示單元、行和列的演算法。

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

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

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

（3）可能的值：

值	描述
#separate	預設值.邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
collapse	如果可能，邊框會合併為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
inherit	#規定應該從父元素繼承border -collapse 屬性的值。

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

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

2. 表格內邊距：padding屬性

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

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

值描述

#（1）作用：此屬性指定分隔邊框模型中單元格邊界之間的距離。除非 border-collapse 被設定為 separate，否則將忽略這個屬性。儘管這個屬性只應用於表，不過它可以由表中的所有元素繼承。	（2）可能的值：
	length length 規定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負值。
如果定義一個 length參數，那麼定義的是水平和垂直間距。	如果定義兩個 length參數，那麼第一個設定水平間距，而第二個設定垂直間距。

inherit

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

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

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

#（1）作用：設定表格標題的位置，此屬性指定了表標題相對於錶框的放置位置。表標題顯示為好像它是表之前（或之後）的一個區塊級元素。	（2）可能的值：
	描述
#top	預設值.把表格標題定位在表格之上。
bottom	#把表格標題定位在表格之下。

######inherit###################規定應該從父元素繼承caption -side 屬性的值。 ##################

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

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

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

（2）可能的值：

值	描述
hide	不在空白單元格周圍繪製邊框。
show	#在空白單元格周圍繪製邊框。預設.
inherit	#規定應該從父元素繼承empty -cells 屬性的值。

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

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

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

（2）兩種演算法：

      <1>固定表格版面： fixed

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

       #缺點：較不靈活。

      <2>自動表格版面配置：automatic

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

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

（3）可能的值：

值	描述
automatic	預設.列寬度由儲存格內容設定。
fixed	#列寬由表格寬度和列寬度設定。
inherit	#規定應該從父元素繼承table -layout 屬性的值。

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

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