表格相关属性:border(边框厚度)、cellspacing(单元格间距)、cellpadding(单元格填充)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sellTable
{
border:1px solid #CCE6F7;
border-collapse:collapse;
}
.sellTable caption{border:1px solid darkblue;padding:9px;}
.sellTable th{border:1px solid blue;padding:6px;}
.sellTable td{border:1px solid brown;padding:5px;text-align:center}
</style>
</head>
<body>
<table class="sellTable">
<caption>销售业绩表</caption>
<tr>
<th>业务员</th>
<th>一月份</th>
<th>二月份</th>
<th>三月份</th>
<th>四月份</th>
<th>五月份</th>
<th>六月份</th>
</tr>
<tr>
<td>王小明</td>
<td>5000</td>
<td>5500</td>
<td>4000</td>
<td>7000</td>
<td>6000</td>
<td>3000</td>
</tr>
<tr>
<td>杜晓丽</td>
<td>5600</td>
<td>7500</td>
<td>3000</td>
<td>8000</td>
<td>5000</td>
<td>3500</td>
</tr>
<tr>
<td>张大秦</td>
<td>5800</td>
<td>4500</td>
<td>4800</td>
<td>7300</td>
<td>6200</td>
<td>3900</td>
</tr>
<tr>
<td>李云宏</td>
<td>5000</td>
<td>5700</td>
<td>4800</td>
<td>7800</td>
<td>6100</td>
<td>3900</td>
</tr>
</table>
</body>
</html>
完整版美化表格:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sellTable
{
border:1px solid #CCE6F7;
border-collapse:collapse;
}
.sellTable caption{border-bottom:1px dashed darkblue;padding:9px;background-color:#E66B14;font-family: "微软雅黑";
font-size: 16px;letter-spacing: 5px;}
.sellTable th{border-bottom:1px dashed blue;padding:6px;text-align:center;background-color:#CDCDCD;
font-size:14px;}
.sellTable td{border-bottom:1px dashed brown;padding:5px;text-align:center;font-size:12px;}
.sellTable tr.altrow{background-color:#EFA46C}
</style>
</head>
<body>
<table class="sellTable">
<caption>销售业绩表</caption>
<tr>
<th>业务员</th>
<th>一月份</th>
<th>二月份</th>
<th>三月份</th>
<th>四月份</th>
<th>五月份</th>
<th>六月份</th>
</tr>
<tr>
<td>王小明</td>
<td>5000</td>
<td>5500</td>
<td>4000</td>
<td>7000</td>
<td>6000</td>
<td>3000</td>
</tr>
<tr class="altrow">
<td>杜晓丽</td>
<td>5600</td>
<td>7500</td>
<td>3000</td>
<td>8000</td>
<td>5000</td>
<td>3500</td>
</tr>
<tr>
<td>张大秦</td>
<td>5800</td>
<td>4500</td>
<td>4800</td>
<td>7300</td>
<td>6200</td>
<td>3900</td>
</tr>
<tr class="altrow">
<td>李云宏</td>
<td>5000</td>
<td>5700</td>
<td>4800</td>
<td>7800</td>
<td>6100</td>
<td>3900</td>
</tr>
</table>
</body>
</html>
实线替换虚线:solid换成 dashed