css設(shè)置表格的屬性有哪些

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

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS表格：

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

（1）作用：設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開(kāi)顯示；

（2）補(bǔ)充知識(shí)點(diǎn)：表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨(dú)立的邊框。

（3）可能的值：

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

Ps: 必須規(guī)定 !DOCTYPE，否則 border-collapse 可能產(chǎn)生意想不到的結(jié)果。

2. 表格內(nèi)邊距：padding屬性

#作用：控制表格中內(nèi)容與邊框的距離，請(qǐng)為 td 和 th 元素設(shè)置 padding 屬性；

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

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

（2）可能的值：

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

4. 表格標(biāo)題：caption-side屬性

（1）作用：設(shè)置表格標(biāo)題的位置，該屬性指定了表標(biāo)題相對(duì)于表框的放置位置。表標(biāo)題顯示為好像它是表之前（或之后）的一個(gè)塊級(jí)元素。

（2）可能的值：

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

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

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

（2）可能的值：

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

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

（1）作用：來(lái)顯示表格單元格、行、列的算法規(guī)則，該屬性指定了完成表布局時(shí)所用的布局算法。

（2）兩種算法：

<1>固定表格布局: fixed

#優(yōu)點(diǎn)：允許瀏覽器更快地對(duì)表格進(jìn)行布局, （在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾取卧耖g距，而與單元格的內(nèi)容無(wú)關(guān)。通過(guò)使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。）；

#缺點(diǎn)：不太靈活。

<2>自動(dòng)表格布局：automatic

#優(yōu)點(diǎn)：更能反映傳統(tǒng)的 HTML，（在自動(dòng)表格布局中，列的寬度是由列單元格中沒(méi)有折行的最寬的內(nèi)容設(shè)定的。）；

#缺點(diǎn)：自動(dòng)算法比較慢，這是由于它需要在確定最終的布局之前訪問(wèn)表格中所有的內(nèi)容。

（3）可能的值：

（學(xué)習(xí)視頻分享：css視頻教程）