这里我们用最简单的代码来改善原始表格的样式，基本的代码如下：
<style type="text/css">
.ranking{
font:14px 宋体;
border:2px orange solid;
text-align:center;
/* border-collapse:collapse; 合并边框
*/ border-spacing:20px;
}
.ranking td{
border:1px orange dashed;
}
.ranking th{
border:1px orange solid;
}
</style>
</head>
<body>
<table class="ranking">
<caption>中国奖牌榜</caption>
<thead>
<tr>
<th>年份</th>
<th>金牌数</th>
<th>银牌数</th>
<th>铜牌数</th>
<th>奖牌总数</th>
</tr>
</thead>
<tr>
<th>2008</td>
<td>21</td>
<td>32</td>
<td>56</td>
<td>109</td>
</tr>
<tr>
<th>2004</td>
<td>21</td>
<td>32</td>
<td>56</td>
<td>109</td>
</tr>
<tr>
<th>2000</td>
<td>21</td>
<td>32</td>
<td>56</td>
<td>109</td>
</tr>
<tr>
<th>1996</td>
<td>21</td>
<td>32</td>
<td>56</td>
<td>109</td>
</tr>
<tr>
<th height="37">1992</td>
<td>21</td>
<td>32</td>
<td>56</td>
<td>109</td>
</tr>
<tr>
<th height="31">1988</td>
<td>21</td>
<td>32</td>
<td>56</td>
<td>109</td>
</tr>
<tr>
<th height="36">1984</td>
<td>21</td>
<td>32</td>
<td>56</td>
<td>109</td>
</tr>
<tr>
<th>1980</td>
<td>21</td>
<td>32</td>
<td>56</td>
<td>109</td>
</tr>
</table>
</body>
这里设置的代码中增加了，这样一条设置
这样可以是相邻两边的边框合并为一条边框了。
而表格之间的分离则是用
这样在firefox中的显示如图，遗憾的是IE6和IE7都不支持这一属性：
