在網(wǎng)頁(yè)中我們通常使用表格來(lái)展示一些數(shù)據(jù)，例如成績(jī)表、財(cái)務(wù)報(bào)表等，但是默認(rèn)情況下表格的樣式并不美觀，甚至不符合頁(yè)面的風(fēng)格。CSS 中提供了一些屬性，通過(guò)這些屬性您可以修改表格的樣式，大大改善表格的外觀。
作為一家“創(chuàng)意+整合+營(yíng)銷(xiāo)”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們?cè)跇I(yè)內(nèi)良好的客戶(hù)口碑。創(chuàng)新互聯(lián)公司提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、創(chuàng)意表現(xiàn)、網(wǎng)頁(yè)制作、系統(tǒng)開(kāi)發(fā)以及后續(xù)網(wǎng)站營(yíng)銷(xiāo)運(yùn)營(yíng)等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營(yíng)模式與有效的網(wǎng)絡(luò)營(yíng)銷(xiāo)方法,創(chuàng)造更大的價(jià)值。
- table-layout：設(shè)置表格的布局算法，布局算法有兩種，分別為固定表格布局算法和自動(dòng)表格布局算法；
- border-collapse：設(shè)置表格中單元格的邊框是合并在一起還是按照標(biāo)準(zhǔn)的 HTML 樣式分開(kāi)；
- border-spacing：設(shè)置當(dāng)表格邊框分開(kāi)時(shí)，相鄰兩個(gè)邊框在橫向和縱向上的間距；
- caption-side：設(shè)置表格標(biāo)題相對(duì)于表格的位置；
- empty-cells：設(shè)置當(dāng)表格的單元格中沒(méi)有內(nèi)容時(shí)，是否顯示該單元格的邊框。
1. table-layout
table-layout 屬性用來(lái)設(shè)置表格布局時(shí)所用的布局算法，屬性的可選值如下：
| 值 |
描述 |
| automatic |
默認(rèn)值，自定表格布局，表示表格中每列的寬度視單元格中的內(nèi)容而定 |
| fixed |
固定表格布局，表示表格的寬度由列寬度、單元格邊框、單元格之間的間距等因素而定 |
| inherit |
從父元素繼承 table-layout 屬性的值 |
1) 固定表格布局
固定表格布局允許瀏覽器更快地對(duì)表格進(jìn)行布局。在固定表格布局中，表格的水平寬度僅取決于列寬度、表格邊框?qū)挾取卧耖g距等因素，與單元格中的內(nèi)容無(wú)關(guān)。也就是說(shuō)，表格中超出表格寬度的內(nèi)容可能會(huì)被忽略。
2) 自動(dòng)表格布局
在自動(dòng)表格布局中，列的寬度視單元格中的內(nèi)容（沒(méi)有換行的最寬內(nèi)容）而定，也就是說(shuō)如果某個(gè)單元格的寬度為 100px，但單元格中內(nèi)容所占據(jù)的寬度要大于 100px，這就會(huì)導(dǎo)致單元格中的內(nèi)容將單元格撐大。正是因?yàn)檫@一特點(diǎn)，此種算法可能會(huì)比較慢。
2. border-collapse
border-collapse 屬性用來(lái)設(shè)置是否合并表格中相鄰的邊框，屬性的可選值如下：
| 值 |
描述 |
| separate |
默認(rèn)值，相鄰的兩個(gè)邊框是分開(kāi)的，使用它不會(huì)忽略 border-spacing 和 empty-cells 屬性 |
| collapse |
相鄰的兩個(gè)邊框會(huì)合并為一個(gè)單一的邊框，使用它會(huì)忽略 border-spacing 和 empty-cells 屬性 |
| inherit |
從父元素繼承 border-collapse 屬性的值 |
【示例】通過(guò) border-collapse 屬性來(lái)合并或拆分單元格的邊框：
| 編號(hào) |
姓名 |
年齡 |
| 1 |
張三 |
15 |
| 2 |
李四 |
11 |
| 編號(hào) |
姓名 |
年齡 |
| 1 |
張三 |
15 |
| 2 |
李四 |
11 |
運(yùn)行結(jié)果如下圖所示：
圖：border-collapse 屬性演示
默認(rèn)情況下表格的邊框是隱藏的，所以上面示例中我們需要使用
標(biāo)簽的 border 屬性來(lái)顯示邊框，另外，您也可以使用 CSS 的 border 屬性來(lái)為表格設(shè)置邊框，如下所示：
table, th, td {
border: 1px solid black;
}
3. border-spacing
border-spacing 屬性可以設(shè)置相鄰單元格邊框之間的距離（僅在 border-collapse 屬性為 separate 時(shí)才有效），它的效果等同于
標(biāo)簽的 cellspacing 屬性（即
border-spacing:0; 等同于
cellspacing="0"）。border-spacing 屬性的語(yǔ)法格式如下：
border-spacing: length length;
參數(shù) length 由數(shù)值和單位組成，表示相鄰單元格邊框之間的距離，其可選值如下：
| 值 |
描述 |
| length |
以數(shù)值加單位的形式設(shè)置相鄰邊框之間的間距，例如 2px，不允許使用負(fù)值。如果只定義一個(gè) length 參數(shù)，那么這個(gè)值將同時(shí)作用于橫向和縱向的間距；如果同時(shí)定義兩個(gè) length 參數(shù)，那么第一個(gè) length 參數(shù)表示相鄰邊框的橫向間距，第二個(gè) length 參數(shù)表示相鄰邊框的縱向間距 |
| inherit |
從父元素繼承 border-spacing 屬性的值 |
【示例】使用 border-spacing 屬性設(shè)置表格中相鄰邊框的間距：
| 編號(hào) |
姓名 |
年齡 |
| 1 |
張三 |
15 |
| 2 |
李四 |
11 |
| 編號(hào) |
姓名 |
年齡 |
| 1 |
張三 |
15 |
| 2 |
李四 |
11 |
運(yùn)行結(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)題
| 編號(hào) |
姓名 |
年齡 |
| 1 |
張三 |
15 |
| 2 |
李四 |
11 |
表格標(biāo)題
| 編號(hào) |
姓名 |
年齡 |
| 1 |
張三 |
15 |
| 2 |
李四 |
11 |
運(yùn)行結(jié)果如下圖所示：
圖：caption-side 屬性演示
5. empty-cells
empty-cells 屬性用來(lái)設(shè)置當(dāng)某個(gè)單元格中沒(méi)有內(nèi)容時(shí)，是否顯示這個(gè)空單元格（僅在 border-collapse 屬性為 separate 時(shí)才有效），屬性的可選值如下：
| 值 |
描述 |
| hide |
隱藏空單元格周?chē)倪吙?/td>
|
| show |
默認(rèn)值，顯示空單元格周?chē)倪吙?/td>
|
| inherit |
從父元素繼承 empty-cells 屬性的值 |
【示例】使用 empty-cells 屬性來(lái)設(shè)置是否隱藏空單元格;
運(yùn)行結(jié)果如下圖所示：
圖：empty-cells 屬性演示
當(dāng)前文章：CSS表格樣式（table）
當(dāng)前URL：http://m.5511xx.com/article/ccspdoc.html
建站
咨詢(xún)
售后
建站咨詢(xún)
