唐家三少,完美的世界 1993 电影

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

CSS表格樣式（table）

在網(wǎng)頁中我們通常使用表格來展示一些數(shù)據(jù)，例如成績表、財務(wù)報表等，但是默認(rèn)情況下表格的樣式并不美觀，甚至不符合頁面的風(fēng)格。CSS 中提供了一些屬性，通過這些屬性您可以修改表格的樣式，大大改善表格的外觀。

作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們在業(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)公司提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計、成都做網(wǎng)站、網(wǎng)站設(shè)計、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價值。

table-layout：設(shè)置表格的布局算法，布局算法有兩種，分別為固定表格布局算法和自動表格布局算法；
border-collapse：設(shè)置表格中單元格的邊框是合并在一起還是按照標(biāo)準(zhǔn)的 HTML 樣式分開；
border-spacing：設(shè)置當(dāng)表格邊框分開時，相鄰兩個邊框在橫向和縱向上的間距；
caption-side：設(shè)置表格標(biāo)題相對于表格的位置；
empty-cells：設(shè)置當(dāng)表格的單元格中沒有內(nèi)容時，是否顯示該單元格的邊框。

1. table-layout

table-layout 屬性用來設(shè)置表格布局時所用的布局算法，屬性的可選值如下：

值	描述
automatic	默認(rèn)值，自定表格布局，表示表格中每列的寬度視單元格中的內(nèi)容而定
fixed	固定表格布局，表示表格的寬度由列寬度、單元格邊框、單元格之間的間距等因素而定
inherit	從父元素繼承 table-layout 屬性的值

1) 固定表格布局

固定表格布局允許瀏覽器更快地對表格進(jìn)行布局。在固定表格布局中，表格的水平寬度僅取決于列寬度、表格邊框?qū)挾?、單元格間距等因素，與單元格中的內(nèi)容無關(guān)。也就是說，表格中超出表格寬度的內(nèi)容可能會被忽略。

2) 自動表格布局

在自動表格布局中，列的寬度視單元格中的內(nèi)容（沒有換行的最寬內(nèi)容）而定，也就是說如果某個單元格的寬度為 100px，但單元格中內(nèi)容所占據(jù)的寬度要大于 100px，這就會導(dǎo)致單元格中的內(nèi)容將單元格撐大。正是因為這一特點，此種算法可能會比較慢。

2. border-collapse

border-collapse 屬性用來設(shè)置是否合并表格中相鄰的邊框，屬性的可選值如下：

值	描述
separate	默認(rèn)值，相鄰的兩個邊框是分開的，使用它不會忽略 border-spacing 和 empty-cells 屬性
collapse	相鄰的兩個邊框會合并為一個單一的邊框，使用它會忽略 border-spacing 和 empty-cells 屬性
inherit	從父元素繼承 border-collapse 屬性的值

【示例】通過 border-collapse 屬性來合并或拆分單元格的邊框：

編號	姓名	年齡
1	張三	15
2	李四	11

編號	姓名	年齡
1	張三	15
2	李四	11

運行結(jié)果如下圖所示：

圖：border-collapse 屬性演示

默認(rèn)情況下表格的邊框是隱藏的，所以上面示例中我們需要使用

標(biāo)簽的 border 屬性來顯示邊框，另外，您也可以使用 CSS 的 border 屬性來為表格設(shè)置邊框，如下所示：

table, th, td {
    border: 1px solid black;
}

3. border-spacing

border-spacing 屬性可以設(shè)置相鄰單元格邊框之間的距離（僅在 border-collapse 屬性為 separate 時才有效），它的效果等同于

標(biāo)簽的 cellspacing 屬性（即
border-spacing:0; 等同于
cellspacing="0"）。border-spacing 屬性的語法格式如下：

border-spacing: length length;

參數(shù) length 由數(shù)值和單位組成，表示相鄰單元格邊框之間的距離，其可選值如下：

值	描述
length	以數(shù)值加單位的形式設(shè)置相鄰邊框之間的間距，例如 2px，不允許使用負(fù)值。如果只定義一個 length 參數(shù)，那么這個值將同時作用于橫向和縱向的間距；如果同時定義兩個 length 參數(shù)，那么第一個 length 參數(shù)表示相鄰邊框的橫向間距，第二個 length 參數(shù)表示相鄰邊框的縱向間距
inherit	從父元素繼承 border-spacing 屬性的值

值

描述

length

以數(shù)值加單位的形式設(shè)置相鄰邊框之間的間距，例如 2px，不允許使用負(fù)值。如果只定義一個 length 參數(shù)，那么這個值將同時作用于橫向和縱向的間距；如果同時定義兩個 length 參數(shù)，那么第一個 length 參數(shù)表示相鄰邊框的橫向間距，第二個 length 參數(shù)表示相鄰邊框的縱向間距

inherit

從父元素繼承 border-spacing 屬性的值

【示例】使用 border-spacing 屬性設(shè)置表格中相鄰邊框的間距：

編號	姓名	年齡
1	張三	15
2	李四	11

編號	姓名	年齡
1	張三	15
2	李四	11

運行結(jié)果如下圖所示：

圖：border-spacing 屬性演示

4. caption-side

caption-side 屬性可以設(shè)置表格標(biāo)題的位置，屬性的可選值如下：

值	描述
top	默認(rèn)值，將表格標(biāo)題定位在表格正上方
bottom	將表格標(biāo)題定位在表格正下方
inherit	從父元素繼承 caption-side 屬性的值

【示例】使用 caption-side 屬性設(shè)置表格標(biāo)題的位置：

表格標(biāo)題
編號	姓名	年齡
1	張三	15
2	李四	11

表格標(biāo)題
編號	姓名	年齡
1	張三	15
2	李四	11

運行結(jié)果如下圖所示：

圖：caption-side 屬性演示

5. empty-cells

empty-cells 屬性用來設(shè)置當(dāng)某個單元格中沒有內(nèi)容時，是否顯示這個空單元格（僅在 border-collapse 屬性為 separate 時才有效），屬性的可選值如下：

值	描述
hide	隱藏空單元格周圍的邊框
show	默認(rèn)值，顯示空單元格周圍的邊框
inherit	從父元素繼承 empty-cells 屬性的值

【示例】使用 empty-cells 屬性來設(shè)置是否隱藏空單元格;

編號	姓名	年齡

2	李四	11

編號	姓名	年齡

2	李四	11

運行結(jié)果如下圖所示：

圖：empty-cells 屬性演示

網(wǎng)頁題目：CSS表格樣式（table）
瀏覽地址：http://m.fisionsoft.com.cn/article/ccspdoc.html

新聞中心

1. table-layout

1) 固定表格布局

2) 自動表格布局

2. border-collapse

3. border-spacing

4. caption-side

5. empty-cells

其他資訊