我們知道表格加入邊框默認情況下是如下圖那樣的:
我們在上一節講解了如何合並表格邊框(消除表格邊框間距)。但是在實際開發中,我們有可能要設置一下表格邊框的間距。
在CSS中,我們使用border-spacing屬性來定義表格邊框間距。
語法:
border-spacing:像素值;
說明:
該屬性指定單元格邊界之間的距離。當只指定了1個像素值時,這個值將作用於橫向和縱向上的間距;當指定了2個length值時,第1個作用於橫向間距,第2個作用於縱向間距。
在CSS初學階段,全部都是使用像素作單位,在CSS進階中我們會深入講解其他CSS單位。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>border-spacing屬性</title> <style type="text/css"> table,th,td{border:1px solid gray;} table{border-spacing:5px 10px } </style> </head> <body> <table> <caption>表格標題</caption> <!--表頭--> <thead> <tr> <th>表頭單元格1</th> <th>表頭單元格2</th> </tr> </thead> <!--表身--> <tbody> <tr> <td>標准單元格1</td> <td>標准單元格2</td> </tr> <tr> <td>標准單元格1</td> <td>標准單元格2</td> </tr> </tbody> <!--表腳--> <tfoot> <tr> <td>標准單元格1</td> <td>標准單元格2</td> </tr> </tfoot> </table> </body> </html>
在浏覽器預覽效果如下:
分析:
"border-spacing:5px 10px"定義了單元格之間水平方向的間距為5px,垂直方向的間距為10px。
border-spacing屬性跟上節課學到的border-collapse屬性一樣,只需要在table元素設置就可以生效,沒必要在th、td這些元素中設置,造成代碼冗余。