溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇內(nèi)容介紹了“表格的CSS樣式實(shí)例分析”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
CSS表格樣式：1、border-collapse樣式，可設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框；2、border-spacing樣式，指定分隔邊框模型中單元格邊界之間的距離；3、caption-side樣式，設(shè)置表格標(biāo)題的位置；4、empty-cells樣式，規(guī)定是否顯示表格中的空單元格上的邊框和背景；5、table-layout樣式，設(shè)置完成表布局時(shí)所用的布局算法。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
使用 CSS 可以使 HTML 表格更美觀。
表格的CSS樣式屬性
| 屬性 | 說(shuō)明 | CSS |
|---|---|---|
| border-collapse | 規(guī)定是否合并表格邊框 | 2 |
| border-spacing | 規(guī)定相鄰單元格邊框之間的距離 | 2 |
| caption-side | 規(guī)定表格標(biāo)題的位置 | 2 |
| empty-cells | 規(guī)定是否顯示表格中的空單元格上的邊框和背景 | 2 |
| table-layout | 設(shè)置用于表格的布局算法 | 2 |
1、border-collapse屬性
border-collapse 屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框，還是像在標(biāo)準(zhǔn)的 HTML 中那樣分開顯示。
| 值 | 說(shuō)明 |
|---|---|
| collapse | 如果可能，邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略 border-spacing 和 empty-cells 屬性 |
| separate | 默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略 border-spacing 和 empty-cells 屬性 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 border-collapse 屬性的值 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
.box {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table><br><br>
<table class="box">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
2、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è)置垂直間距。 |
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table,
td,
th {
border: 1px solid black;
}
.box {
border-collapse:separate;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table><br><br>
<table class="box">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
3、caption-side屬性
（1）作用：設(shè)置表格標(biāo)題的位置，該屬性指定了表標(biāo)題相對(duì)于表框的放置位置。表標(biāo)題顯示為好像它是表之前（或之后）的一個(gè)塊級(jí)元素。
（2）可能的值：
值 | 描述 |
top | 默認(rèn)值。把表格標(biāo)題定位在表格之上。 |
bottom | 把表格標(biāo)題定位在表格之下。 |
（3）瀏覽器的兼容性：除IE外的所有主流瀏覽器都支持 caption-side 屬性。如果已規(guī)定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side屬性。
4、empty-cells 屬性
（1）作用：該屬性定義了不包含任何內(nèi)容的表單元格如何表示。如果顯示，就會(huì)繪制出單元格的邊框和背景。除非 border-collapse 設(shè)置為 separate，否則將忽略這個(gè)屬性。
（2）可能的值：
值 | 描述 |
hide | 不在空單元格周圍繪制邊框。 |
| show | 在空單元格周圍繪制邊框。默認(rèn)。 |
（3）瀏覽器的兼容性：除IE外的所有瀏覽器都支持 empty-cells 屬性。如果已規(guī)定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 屬性。
5、table-layout屬性
（1）作用：來(lái)顯示表格單元格、行、列的算法規(guī)則，該屬性指定了完成表布局時(shí)所用的布局算法。
（2）兩種算法：
<1>固定表格布局: fixed
#優(yōu)點(diǎn)：允許瀏覽器更快地對(duì)表格進(jìn)行布局, （在固定表格布局中，水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾?、單元格間距，而與單元格的內(nèi)容無(wú)關(guān)。通過(guò)使用固定表格布局，用戶代理在接收到第一行后就可以顯示表格。）；
#缺點(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è)定。 |
“表格的CSS樣式實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼