亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長(zhǎng)資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

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

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

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

    本教程操作環(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 中那樣分開(kāi)顯示;

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

    (3)可能的值:

    描述

    separate

    默認(rèn)值。邊框會(huì)被分開(kāi)。不會(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)用于表,不過(guò)它可以由表中的所有元素繼承。

    (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

    不在空單元格周?chē)L制邊框。

    show

    在空單元格周?chē)L制邊框。默認(rèn)。

    inherit

    規(guī)定應(yīng)該從父元素繼承 empty-cells 屬性的值。

    (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ū)挾?、單元格間距,而與單元格的內(nèi)容無(wú)關(guān)。通過(guò)使用固定表格布局,用戶(hù)代理在接收到第一行后就可以顯示表格。);

    #缺點(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)可能的值:

    描述

    automatic

    默認(rèn)。列寬度由單元格內(nèi)容設(shè)定。

    fixed

    列寬由表格寬度和列寬度設(shè)定。

    inherit

    規(guī)定應(yīng)該從父元素繼承 table-layout 屬性的值。

    (學(xué)習(xí)視頻分享:css視頻教程)

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)