日期:2014-05-16  浏览次数:20649 次

CSS 表格 好看

?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
table{border-collapse:collapse;border-top:3px solid #000;border-bottom:3px solid #000;}
.notVert{border:none; }
td,th{
width:60px; 
border-right:1px solid #aaa; 
border-bottom:1px solid #aaa;
text-align:center; 
font-size:16px;
};
th{font-size:16px;font-weight:normal}
.last{border-right:none; }
.lastTr td{border-bottom:none; }
strong{color:red; }
</style>
</head>
<body>
<p>
<strong>四周(上下左右都不封闭)</strong>
</p>
<table cellspacing="0" cellpadding="2" class="notVert">
	<tr>
		<th>一月</th>
		<th>二月</th>
		<th>三月</th>
		<th class="last">总计</th>
	</tr>
	<tr>
		<td>29</td>
		<td>38</td>
		<td>65</td>
		<td class="last">24</td>
	</tr>
	<tr>
		<td>26</td>
		<td>47</td>
		<td>58</td>
		<td class="last">4</td>
	</tr>
	<tr class="lastTr">
		<td>56.45</td>
		<td>665</td>
		<td>76</td>
		<td class="last">8</td>
	</tr>
</table>
<p>	
	<strong>常用型,左右不封闭</strong>
</p>
<table cellspacing="0" cellpadding="2">
	<tr>
		<th>一月</th>
		<th>二月</th>
		<th>三月</th>
		<th class="last">总计</th>
	</tr>
	<tr>
		<td>22</td>
		<td>112</td>
		<td>52</td>
		<td class="last">4</td>
	</tr>
	<tr>
		<td>15</td>
		<td>265</td>
		<td>39</td>
		<td class="last">4</td>
	</tr>
	<tr class="lastTr">
		<td>72</td>
		<td>43</td>
		<td>521</td>
		<td class="last">8</td>
	</tr>
</table>
</body>
</html>

?