這篇文章主要介紹css設(shè)置表格的屬性是什么，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)公司為企業(yè)級客戶提高一站式互聯(lián)網(wǎng)+設(shè)計服務(wù)，主要包括成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、成都App制作、微信小程序開發(fā)、宣傳片制作、LOGO設(shè)計等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗(yàn)豐富的經(jīng)驗(yàn)，可以確保每一個作品的質(zhì)量和創(chuàng)作周期，同時每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。
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表格：
屬性 | 描述 |
border-collapse | 設(shè)置是否把表格邊框合并為單一的邊框。 |
border-spacing | 設(shè)置分隔單元格邊框的距離。 |
caption-side | 設(shè)置表格標(biāo)題的位置。 |
empty-cells | 設(shè)置是否顯示表格中的空單元格。 |
table-layout | 設(shè)置顯示單元、行和列的算法。 |
1. 折疊表格邊框：border-collapse 屬性
（1）作用：設(shè)置表格的邊框是否被合并為一個單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開顯示；
（2）補(bǔ)充知識點(diǎn)：表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨(dú)立的邊框。
（3）可能的值：
值 | 描述 |
separate | 默認(rèn)值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。 |
collapse | 如果可能，邊框會合并為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 border-collapse 屬性的值。 |
（4）瀏覽器的支持性：所有主流瀏覽器都支持 border-collapse 屬性。
Ps:必須規(guī)定 !DOCTYPE，否則 border-collapse 可能產(chǎn)生意想不到的結(jié)果。
2. 表格內(nèi)邊距：padding屬性
#作用：控制表格中內(nèi)容與邊框的距離，請為 td 和 th 元素設(shè)置 padding 屬性；
3. 邊框分離：border-spacing 屬性
（1）作用：該屬性指定分隔邊框模型中單元格邊界之間的距離。除非 border-collapse 被設(shè)置為 separate，否則將忽略這個屬性。盡管這個屬性只應(yīng)用于表，不過它可以由表中的所有元素繼承。
（2）可能的值：
值 | 描述 |
length length | 規(guī)定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負(fù)值。 如果定義一個length參數(shù)，那么定義的是水平和垂直間距。 如果定義兩個length參數(shù)，那么第一個設(shè)置水平間距，而第二個設(shè)置垂直間距。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 border-spacing 屬性的值。 |
（3）瀏覽器的兼容性：除IE外的所有主流瀏覽器都支持 border-spacing 屬性。如果已規(guī)定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 border-spacing 屬性。
4. 表格標(biāo)題：caption-side屬性
（1）作用：設(shè)置表格標(biāo)題的位置，該屬性指定了表標(biāo)題相對于表框的放置位置。表標(biāo)題顯示為好像它是表之前（或之后）的一個塊級元素。
（2）可能的值：
值 | 描述 |
top | 默認(rèn)值。把表格標(biāo)題定位在表格之上。 |
bottom | 把表格標(biāo)題定位在表格之下。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 caption-side 屬性的值。 |
（3）瀏覽器的兼容性：除IE外的所有主流瀏覽器都支持 caption-side 屬性。如果已規(guī)定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side屬性。
5. 空單元格的處理：empty-cells 屬性
（1）作用：該屬性定義了不包含任何內(nèi)容的表單元格如何表示。如果顯示，就會繪制出單元格的邊框和背景。除非 border-collapse 設(shè)置為 separate，否則將忽略這個屬性。
（2）可能的值：
值 | 描述 |
hide | 不在空單元格周圍繪制邊框。 |
show | 在空單元格周圍繪制邊框。默認(rèn)。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 empty-cells 屬性的值。 |
（3）瀏覽器的兼容性：除IE外的所有瀏覽器都支持 empty-cells 屬性。如果已規(guī)定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 屬性。
6. 表格布局算法：table-layout屬性
（1）作用：來顯示表格單元格、行、列的算法規(guī)則，該屬性指定了完成表布局時所用的布局算法。
（2）兩種算法：
<1>固定表格布局:fixed
#優(yōu)點(diǎn)：允許瀏覽器更快地對表格進(jìn)行布局, （在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾取卧耖g距，而與單元格的內(nèi)容無關(guān)。通過使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。）；
#缺點(diǎn)：不太靈活。
<2>自動表格布局：automatic
#優(yōu)點(diǎn)：更能反映傳統(tǒng)的 HTML，（在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的內(nèi)容設(shè)定的。）；
#缺點(diǎn)：自動算法比較慢，這是由于它需要在確定最終的布局之前訪問表格中所有的內(nèi)容。
（3）可能的值：
值 | 描述 |
automatic | 默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。 |
fixed | 列寬由表格寬度和列寬度設(shè)定。 |
inherit | 規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。 |
以上是“css設(shè)置表格的屬性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
