站長(zhǎng)資訊網(wǎng)
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 中那樣分開(kāi)顯示。
| 值 | 說(shuō)明 |
|---|---|
| collapse | 如果可能，邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略 border-spacing 和 empty-cells 屬性 |
| separate | 默認(rèn)值。邊框會(huì)被分開(kāi)。不會(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 |
不在空單元格周?chē)L制邊框。 |
| show |
在空單元格周?chē)L制邊框。默認(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ò)使用固定表格布局，用戶(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è)定。 |
（學(xué)習(xí)視頻分享：web前端入門(mén)）
