031_CSS表格
1. CSS表格屬性可以幫助您極大地改善表格的外觀。
2. CSS表格屬性
3. 表格邊框
3.1. 如需在CSS中設(shè)置表格邊框, 請(qǐng)使用border屬性。
3.2. 下面的例子為table、th以及td設(shè)置了藍(lán)色邊框:
table, th, td {border: 1px solid blue; }3.3. 請(qǐng)注意, 上例中的表格具有雙線條邊框。這是由于table、th以及td元素都有獨(dú)立的邊框。
4. 表格邊框合并
4.1. border-collapse屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框, 還是象在標(biāo)準(zhǔn)的html中那樣分開顯示。
4.2. 默認(rèn)值
4.3. 可能的值
4.4. 例子
4.4.1.?代碼
<!DOCTYPE html> <html><head><title>邊框合并</title><meta charset="utf-8" /><style type="text/css">table, td, th {border: 1px solid black;}#collapse {border-collapse: collapse;}</style></head><body><table><caption>未合并邊框的表格</caption><tr><th>如需在CSS中設(shè)置表格邊框, 請(qǐng)使用border屬性。</th><th>表格具有雙線條邊框。這是由于table、th以及td元素都有獨(dú)立的邊框。</th></tr><tr><td>border-collapse屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框</td><td>separate默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略border-spacing和empty-cells屬性。</td></tr><tr><td>collapse如果可能, 邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略border-spacing和empty-cells屬性。</td><td>如果沒有規(guī)定!DOCTYPE, 則 border-collapse可能產(chǎn)生意想不到的結(jié)果。</td></tr></table><br /><table id="collapse"><caption>合并邊框的表格</caption><tr><th>如需在CSS中設(shè)置表格邊框, 請(qǐng)使用border屬性。</th><th>表格具有雙線條邊框。這是由于table、th以及td元素都有獨(dú)立的邊框。</th></tr><tr><td>border-collapse屬性設(shè)置表格的邊框是否被合并為一個(gè)單一的邊框</td><td>separate默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略border-spacing和empty-cells屬性。</td></tr><tr><td>collapse如果可能, 邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略border-spacing和empty-cells屬性。</td><td>如果沒有規(guī)定!DOCTYPE, 則 border-collapse可能產(chǎn)生意想不到的結(jié)果。</td></tr></table></body> </html>4.4.2. 效果圖
5. 相鄰單元格的邊框間的距離
5.1. border-spacing屬性設(shè)置相鄰單元格的邊框間的距離(僅用于"邊框分離"模式)。
5.2. 在指定的兩個(gè)長(zhǎng)度值中, 第一個(gè)是水平間隔, 第二個(gè)是垂直間隔。
5.3. 默認(rèn)值
5.4. 可能的值
5.5. 例子
5.5.1. 代碼
<!DOCTYPE html> <html><head><title>相鄰單元格的邊框間的距離</title><meta charset="utf-8" /><style type="text/css">table, td {border: 1px solid black;}table {border-collapse: separate;border-spacing: 10px 50px;}</style></head><body><table><tr><td>border-spacing屬性設(shè)置相鄰單元格的邊框間的距離(僅用于"邊框分離"模式)。</td><td>在指定的兩個(gè)長(zhǎng)度值中, 第一個(gè)是水平間隔, 第二個(gè)是垂直間隔。</td></tr><tr><td>除非border-collapse被設(shè)置為separate, 否則將忽略這個(gè)屬性。</td><td>不允許使用負(fù)值。</td></tr></table></body> </html>5.5.2. 效果圖
6. 設(shè)置表格標(biāo)題的位置
6.1. caption-side屬性設(shè)置表格標(biāo)題的位置。
6.2. 表標(biāo)題顯示為好像它是表之前(或之后)的一個(gè)塊級(jí)元素。
6.3. 默認(rèn)值
6.4. 可能的值
7. 表格空單元格顯示和隱藏
7.1. empty-cells屬性設(shè)置是否顯示表格中的空單元格(僅用于"分離邊框"模式)。
7.2. 除非border-collapse設(shè)置為separate, 否則將忽略這個(gè)屬性。
7.3. 默認(rèn)值
7.4. 可能的值
7.5. 例子
7.5.1. 代碼
<!DOCTYPE html> <html><head><title>表格標(biāo)題的位置和單元格顯示和隱藏</title><meta charset="utf-8" /><style type="text/css">table, td {border: 1px solid blue;}#t1 {caption-side: bottom;}#t2 {empty-cells: hide;}</style></head><body><table id="t1"><caption>標(biāo)題在下, 顯示空單元格</caption><tr><td>caption-side屬性設(shè)置表格標(biāo)題的位置。</td><td>表標(biāo)題顯示為好像它是表之前(或之后)的一個(gè)塊級(jí)元素。</td></tr><tr><td>empty-cells屬性設(shè)置是否顯示表格中的空單元格(僅用于"分離邊框"模式)。</td><td></td></tr></table><br /><table id="t2"><caption>標(biāo)題在上, 隱藏空單元格</caption><tr><td>caption-side屬性設(shè)置表格標(biāo)題的位置。</td><td>表標(biāo)題顯示為好像它是表之前(或之后)的一個(gè)塊級(jí)元素。</td></tr><tr><td></td><td>empty-cells除非border-collapse設(shè)置為separate, 否則將忽略這個(gè)屬性。</td></tr></table></body> </html>7.5.2. 效果圖
總結(jié)
