這篇文章主要介紹css設(shè)置表格的屬性是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司為企業(yè)級(jí)客戶提高一站式互聯(lián)網(wǎng)+設(shè)計(jì)服務(wù)，主要包括成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、成都App制作、微信小程序開發(fā)、宣傳片制作、LOGO設(shè)計(jì)等，幫助客戶快速提升營(yíng)銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗(yàn)豐富的經(jīng)驗(yàn)，可以確保每一個(gè)作品的質(zhì)量和創(chuàng)作周期，同時(shí)每年都有很多新員工加入，為我們帶來大量新的創(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è)置表格的邊框是否被合并為一個(gè)單一的邊框，還是象在標(biāo)準(zhǔn)的 HTML 中那樣分開顯示；

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

（3）可能的值：

值	描述
separate	默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略 border-spacing 和 empty-cells 屬性。
collapse	如果可能，邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略 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)容與邊框的距離，請(qǐng)為 td 和 th 元素設(shè)置 padding 屬性；

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

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

（2）可能的值：

值	描述
length length	規(guī)定相鄰單元的邊框之間的距離。使用 px、cm 等單位。不允許使用負(fù)值。 如果定義一個(gè)length參數(shù)，那么定義的是水平和垂直間距。 如果定義兩個(gè)length參數(shù)，那么第一個(gè)設(shè)置水平間距，而第二個(gè)設(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)題相對(duì)于表框的放置位置。表標(biāo)題顯示為好像它是表之前（或之后）的一個(gè)塊級(jí)元素。

（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)容的表單元格如何表示。如果顯示，就會(huì)繪制出單元格的邊框和背景。除非 border-collapse 設(shè)置為 separate，否則將忽略這個(gè)屬性。

（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ī)則，該屬性指定了完成表布局時(shí)所用的布局算法。

（2）兩種算法：

     <1>固定表格布局:fixed

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

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

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

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

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

（3）可能的值：

值	描述
automatic	默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。
fixed	列寬由表格寬度和列寬度設(shè)定。
inherit	規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。

以上是“css設(shè)置表格的屬性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：css設(shè)置表格的屬性是什么
鏈接分享：http://jinyejixie.com/article34/iiedse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站營(yíng)銷、小程序開發(fā)、商城網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)