CSS+html人员信息表

这里写目录标题要求模板效果图CSS模块总体模块要求表格整体居中，宽度为600px表格边框为1个像素的绿色实线条单元格和单元格之间的间距合并标题行背景为黑色、字体为白色、字号14px宋体表格页脚包含四个超链接：首页、上一页、下一页、尾页表格页脚部分背景为黑色，四个超链接右对齐，间距为15px，字体为14px，且无蓝色下划线表格中间部分隔行显示背景色（深灰色与浅灰色交替）鼠标移到行上高亮显示为浅黄色，

liaoMITC

1194人浏览 · 2021-09-16 20:28:08

liaoMITC · 2021-09-16 20:28:08 发布

要求

表格整体居中，宽度为600px
表格边框为1个像素的绿色实线条
单元格和单元格之间的间距合并
标题行背景为黑色、字体为白色、字号14px宋体
表格页脚包含四个超链接：首页、上一页、下一页、尾页
表格页脚部分背景为黑色，四个超链接右对齐，间距为15px，字体为14px，且无蓝色下划线
表格中间部分隔行显示背景色（深灰色与浅灰色交替）
鼠标移到行上高亮显示为浅黄色，鼠标移开还原为之前的颜色
单元格的字体字号为12px表格第一列为“复选框”列；
最后一列为“操作”列每行数据的第一个单元格为复选框；
最后一个单元格含三个按钮，分别为：查看、修改、删除

模板效果图

模板效果

CSS模块

<style>
			table,
			td {
				border-width: 1px;
				border-style: solid; 
				border-color: yellowgreen;
			}

			table,
			th,
			tr,
			td {
				height: 60px;
			}
						
			table {
				margin-left: 28%;
				width: 600px;
				border-collapse: collapse;
				
				/*边缘颜色*/
				/* 				outline-style: solid;
				outline-color: yellowgreen;
				outline-width: 1px; */
			}

			td {

				text-align: center;
				font-size: 12px;
			}

			th {
				background-color: black;
				color: white;
				
				font-size: 14px;
				/*宋体*/
				font-family: "SimSun";

			}

			a:link {
				/*链接位置设置*/
				float: right;
				text-decoration: none;
				padding: 15px;
				font-size: 14px;

			}
			
			tr:nth-child(even) {
				background-color: #f2f2f2;
			}

			tr:hover {
				background-color: #FFCC66;
			}
		</style>

总体模块

<html>
	<head>
		<style>
			table,
			td {
				border-width: 1px;
				border-style: solid;
				border-color: yellowgreen;
			}

			table,
			th,
			tr,
			td {
				height: 60px;
			}

			tr,
			td {
				height: 60px;
			}
			
			table {
				margin-left: 28%;
				width: 600px;
				border-collapse: collapse;

				/* 				outline-style: solid;
				outline-color: yellowgreen;
				outline-width: 1px; */
			}

			td {

				text-align: center;
				font-size: 12px;
			}

			th {
				background-color: black;
				color: white;
				font-size: 14px;
				font-family: "SimSun";

			}

			a:link {

				float: right;
				text-decoration: none;
				padding: 15px;
				font-size: 14px;

			}

			tr:nth-child(even) {
				background-color: #f2f2f2;
			}

			tr:hover {
				background-color: #FFCC66;
			}
		</style>
		<meta charset="utf-8" />

	</head>
	<body>
		<table>
			<tr>
				<th><input type="checkbox" /></th>
				<th>学号</th>
				<th>姓名</th>
				<th>专业</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>9527</td>
				<td>唐伯虎</td>
				<td>美术</td>
				<td><button>查看</button> <button>修改</button> <button>删除</button></td>


			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>007</td>
				<td>武松</td>
				<td>体育</td>
				<td><button>查看</button> <button>修改</button> <button>删除</button></td>


			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>1024</td>
				<td>诸葛亮</td>
				<td>心理学</td>
				<td><button>查看</button> <button>修改</button> <button>删除</button></td>

			</tr>
			<tr>
				<th colspan="6">
					<p><b><a href="default.asp" target="_blank">首页</a></b>
						<a href="default.asp" target="_blank">上一页</a></b>
						<b><a href="default.asp" target="_blank">下一页</a></b>
						<b><a href="default.asp" target="_blank">页尾</a></b>
					</p>
				</th>
			</tr>

		</table>

	</body>
</html>