css美化表格

最新推荐文章于 2025-04-24 14:07:49 发布

pengpeng11

最新推荐文章于 2025-04-24 14:07:49 发布

阅读量225

点赞数

分类专栏： DIV+CSS 文章标签： CSS HTML

本文链接：https://blog.youkuaiyun.com/pengpeng11/article/details/83533293

版权

DIV+CSS 专栏收录该内容

2 篇文章

订阅专栏


<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>