css美化报表
日期：2014-05-17 浏览次数：20678 次
css美化表格
<html>
<head>
<title>年度收入</title>
<style>
table{
caption-side:bottom;
}
body{
background-color:#ebf5ff;
margin:0px;
padding:4px;
text-align:center;
}
.datalist{
color:#0046a6;
background-color:#d2e8ff;
font-family:arial;
border:1px solid #007eff;
border-collapse:collapse;
}
.datalist caption{
font-size:18px;
font-weight:bold;
}
.datalist th{
color:#003e7e;
background-color:#7bb3ff;
}
.datalist th,.datalist td{
border:1px solid #429fff;
}
</style>
</head>
<body>
<table summary="This table shows the yearly income for years 2004 through 2007" border="1" class="datalist">
<caption>年度收入 2004 - 2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">捐款</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">投资</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">募捐</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope="row">销售</th>
<td>28,400</td>
<td>27,100</td>
<td>27,950</td>
<td>29,050</td>
</tr>
<tr>
<th scope="row">杂费</th>
<td>2,100</td>
<td>1,900</td>
<td>1,300</td>
<td>1,760</td>
</tr>
<tr>
<th scope="row">总计</th>
<td>58,460</td>
<td>57,859</td>
<td>58,110</td>
<td>60,700</td>
</tr>
</table>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
