JavaWeb_CSS（18）_表格样式

最新推荐文章于 2022-05-27 23:45:41 发布

魏宇轩

最新推荐文章于 2022-05-27 23:45:41 发布

阅读量2.2k

点赞数 1

分类专栏： CSS（更新完）文章标签： JavaWeb CSS 表格样式

本文链接：https://blog.csdn.net/qq_36260974/article/details/88515023

版权

CSS（更新完）专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本系列博客汇总在这里：JavaWeb_CSS 汇总

示例

<!DOCTYPE html>
<html>
	<head>	
		<meta charset="UTF-8">
		<title>www.weiyuxuan.cn</title>		
	</head>	
		<style type="text/css">
			.mytable
			{
				border:1px solid #A6C1E4; 				
				font-family: Arial;
				border-collapse: collapse;				
			}			
			table th/*设置表头属性*/
			{
				border:1px solid black; 
				background-color: #71C1FB;
				width: 100px;
				height: 20px;
				font-size: 15px;
			}			
			table td/*设置行属性*/ 
			{
				font-size: 12px;
				border:1px solid #A6C1E4; 
				text-align: center;
				height: 15px;
				padding-top: 5px;
			}			
			.double /*隔行变色*/
			{
				background-color: orange;
			}
		</style>		
	<body>	
		<h1> 表格样式 </h1>		
		<hr/>	
		<table class="mytable">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>地址</th>
				<th>生日</th>
				<th>工资</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>3</td>
				<td>男</td>
				<td>昆明</td>
				<td>1995-07-7</td>
				<td>12000</td>
			<tr class="double">
				<td>张三</td>
				<td>3</td>
				<td>男</td>
				<td>昆明</td>
				<td>1955-07-7</td>
				<td>12000</td>
			</tr>
			<tr>
				<td>张三</td>
				<td>3</td>
				<td>男</td>
				<td>昆明</td>
				<td>1955-07-7</td>
				<td>12000</td>
			</tr>
			<tr class="double">
				<td>张三</td>
				<td>3</td>
				<td>男</td>
				<td>昆明</td>
				<td>1955-07-7</td>
				<td>12000</td>
			</tr>
		</table>		
	</body>	
</html>