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)補充知識點:表格具有雙線條邊框。這是由于 table、th 以及 td 元素都有獨立的邊框。
(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 等單位。不允許使用負值。 如果定義一個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)點:允許瀏覽器更快地對表格進行布局, (在固定表格布局中,水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾?、單元格間距,而與單元格的內(nèi)容無關(guān)。通過使用固定表格布局,用戶代理在接收到第一行后就可以顯示表格。);
#缺點:不太靈活。
<2>自動表格布局:automatic
#優(yōu)點:更能反映傳統(tǒng)的 HTML,(在自動表格布局中,列的寬度是由列單元格中沒有折行的最寬的內(nèi)容設(shè)定的。);
#缺點:自動算法比較慢,這是由于它需要在確定最終的布局之前訪問表格中所有的內(nèi)容。
(3)可能的值:
值 |
描述 |
automatic |
默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。 |
fixed |
列寬由表格寬度和列寬度設(shè)定。 |
inherit |
規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。 |
(學(xué)習(xí)視頻分享:css視頻教程)