border-collapse: collapse; ( 合並邊框)
rowspan="2"; (上下合並)
colspan="2";（左右合並）
<html>
<head>
<meta charset="utf-8">
<title>商務風格表格的設計與實現</title>
<style> /*設置表格總體樣式*/ #recruit { width: 100%; border-collapse: collapse;/* 為表格設置合並邊框模型： */ text-align: left; } /*設置單元格樣式*/ #recruit td, #recruit th { /* font-size: 1em;*/ border: 1px solid orange; padding: 7px; } /*設置標題單元格樣式*/ #recruit th { background-color: orange; color: #ffffff; } /*設置單元行樣式*/ #recruit tr.orange { background-color: #FFEDDB } </style>
</head>
<body>
<h3>商務風格表格的設計與實現</h3>
<hr />
<table id="recruit" border="1">
<caption>招聘信息表</caption>
<tr>
<th>地點</th>
<th>招聘職位</th>
<th>公司</th>
</tr>
<tr>
<td>全國</td>
<td>產品培訓生</td>
<td>騰訊</td>
</tr>
<tr class="orange" >
<td colspan="2">全國(左右合並colspan="2")</td>
<td>前端開發工程師</td>
<td>阿里巴巴</td>
</tr>
<tr >
<td>上海</td>
<td>交互設計師</td>
<td>網易游戲</td>
</tr>
<tr class="orange" >
<td>北京</td>
<td>視覺設計師</td>
<td>360</td>
</tr>
<tr >
<td rowspan="2">深圳（上下合並rowspan="2"）</td>
<td>數據分析師</td>
<td>IBM</td>
</tr>
<tr class="orange">
<td>杭州</td>
<td>數據研發工程師</td>
<td>微軟</td>
</tr>
</table>
</body>
</html>
border-spacing
該屬性指定分隔邊框模型中單元格邊界之間的距離。在指定的兩個長度值中，第一個是水平間隔，第二個是垂直間隔。除非 border-collapse 被設置為 separate，否則將忽略這個屬性。
border-collapse:separate; /* 默認樣式 */
border-spacing:10px 50px;
