HTML+CSS制作表格

最新推荐文章于 2024-05-14 16:52:58 发布

嗯嗯=

最新推荐文章于 2024-05-14 16:52:58 发布

阅读量624

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_64867440/article/details/134040956

版权

一.效果图

二.HTML+CSS

使用的内联式，因为代码较少，但是正规应该把两部分分开写，减少错误

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style>
			#one{
				border: 1px solid black;
				border-collapse: collapse;
			}
			th,td{
				border: 1px solid black;
				
			}
			h2{
				text-align: center;
			}
			th{
				background-color: antiquewhite;
			}
			td:first-child{
				background-color: aquamarine;
			}
			td:last-child{
				background-color: aquamarine;
			}
			td:nth-child(2n){
				background-color: orange;
			}
			tr:nth-child(5){
				color: blue;
			}
			table{
				position: absolute;
				left: 30%;
			}
		</style>
		<title></title>
	</head>
	<body>
		<h2>学生信息表</h2>
		<table id="one">
			<tr>
				<th rowspan="2">学号	</th>
				<th colspan="3">个人信息</th>
				<th colspan="3">入学信息</th>
				<tr>
				<th>姓名</th>	
				<th>性别</th>
				<th>年龄</th>
				<th>班级</th>
				<th>入学年月</th>
				<th>宿舍号</th>
			</tr>
			</tr>
			<tr>
				<td>219980101</td>
				<td>王大震</td>
				<td>男</td>
				<td>19</td>
				<td>21计科1班</td>
				<td>2021年9月</td>
				<td>201</td>
			</tr>
			<tr>
				<td>219980102</td>
				<td>于雪鲲</td>
				<td>男</td>
				<td>19</td>
				<td>21计科1班</td>
				<td>2021年9月</td>
				<td>201</td>
			</tr>
			<tr>
				<td>219980103</td>
				<td>王攀岩</td>
				<td>男</td>
				<td>19</td>
				<td>21计科1班</td>
				<td>2021年9月</td>
				<td>202</td>
			</tr>
			<tr>
				<td>219980103</td>
				<td>刘雪红</td>
				<td>女</td>
				<td>18</td>
				<td>21计科1班</td>
				<td>2021年9月</td>
				<td>502</td>
			</tr>
			<tr>
				<td>219980104</td>
				<td>李子海</td>
				<td>女</td>
				<td>19</td>
				<td>21计科1班</td>
				<td>2021年9月</td>
				<td>201</td>
			</tr>
			<tr>
				<td>219980101</td>
				<td>张君玉</td>
				<td>女</td>
				<td>19</td>
				<td>21计科1班</td>
				<td>2021年9月</td>
				<td>201</td>
			</tr>
		</table>
	</body>
</html>