表格的美化

最新推荐文章于 2021-01-14 15:56:17 发布

小贾爱编程

最新推荐文章于 2021-01-14 15:56:17 发布

阅读量474

点赞数

分类专栏： .NET 文章标签：表格美化 CSS样式基础

本文链接：https://blog.csdn.net/qq_37589387/article/details/88701601

版权

.NET 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

表格相关属性：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

小贾爱编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格的美化

表格相关属性：border（边框厚度）、cellspacing（单元格间距）、cellpadding（单元格填充）。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g...
复制链接

扫一扫