我們知道表格加入邊框默認情況下是如下圖那樣的：
我們在上一節講解了如何合並表格邊框（消除表格邊框間距）。但是在實際開發中，我們有可能要設置一下表格邊框的間距。
在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這些元素中設置，造成代碼冗余。