表格的实例

天上的云@

已于 2024-05-04 20:40:06 修改

阅读量1.8k

点赞数 3

文章标签： html css 前端

于 2022-12-29 14:50:21 首次发布

本文链接：https://blog.csdn.net/weixin_335426/article/details/128481862

版权

1写一个学生信息表

表格分为五行六列，第一行是六列，剩下的行由于第一行按列合并了单元格，所以都是五列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息表</title>
	</head>
	<style>
		table{
			width: 80%;		
			text-align: center;
			margin: 0 auto;
			border-collapse: collapse;
		}
		table,td{
				border: 1px solid;
		}
		td{
			padding: 8px;
			/* text-align: center; */
			width: auto;
			
			
		}
	</style>
	<body>
		<table>
			<caption>学生信息表</caption>
			<tr style="background-color: aqua;">
				<td rowspan="5" style="background-color: skyblue;">学生</td>
				<td >学号</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
				<td>院系</td>
					
				
			</tr>
			<tr>

				<td>001</td>
				<td>张三</td>
				<td>18</td>
				<td>男</td>
				<td>计算机</td>
			
				
			</tr>
			<tr>
				
				<td>002</td>
				<td>李四</td>
				<td>18</td>
				<td>男</td>
				<td>计算机</td>
				
				
			</tr>
			<tr>
				
				<td>003</td>
				<td>王五</td>
				<td>18</td>
				<td>男</td>
				<td>计算机</td>
				
				
			</tr>
			<tr>
				
				<td>004</td>
				<td>小明</td>
				<td>18</td>
				<td>男</td>
				<td>计算机</td>
				
				
			</tr>
		</table>
		
		
	</body>
</html>

2使用HTML&CSS创建一个网页课程表

我们先创建一个14行8列的表格（以我的课表为例）

再写入css

整体代码如下

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>课程表</title>
		<link rel="stylesheet" href="css/001.css" />
	</head>

	<body>
		<table border="1" cellspacing="0">
			<tr class="head">
				<td>时间段</td>
				<td>节次/周次</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
				<td>星期日</td>
			</tr>
			<tr>
				<td class="time" rowspan="5">上午</td>
				<td class="_1234">第一节</td>
				<td class="course" rowspan="5">信息安全技术<br>教师：葛*</td>
				<td></td>

				<td class="course" rowspan="4">Adobe Photoshop<br>教师：阳*</td>
				<td class="course" rowspan="5">Premiere视频制作<br>教师：刘*</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>

				<td class="_1234">第二节</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>

			</tr>
			<tr>

				<td class="_1234">第三节</td>

				<td></td>
				<td></td>
				<td></td>
				<td></td>

			</tr>
			<tr>

				<td class="_1234">第四节</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>

			</tr>
			<tr>

				<td class="_1234">第五节</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>

			</tr>
			<tr>
				<td class="time" rowspan="4">下午</td>
				<td class="_5678">第六节</td>
				<td></td>
				<td class="course" rowspan="4">HTML5与JavaScript<br />程序设计</td>
				<td></td>
				<td></td>
				<td class="course" rowspan="3">大学英语Ⅲ</td>
				<td></td>
				<td></td>

			</tr>
			<tr>

				<td class="_5678">第七节</td>
				<td></td>
				<td> </td>
				<td> </td>
				<td> </td>
				<td> </td>

			</tr>
			<tr>

				<td class="_5678">第八节</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>

			</tr>

			<tr>

				<td class="_5678">第九节</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>

			</tr>
			<tr>
				<td class="time" rowspan="5">晚上</td>
				<td class="_913">第十节</td>
				<td></td>
				<td></td>
				<td></td>
				<td class="course" rowspan="4">HTML5与JavaScript<br>程序设计</td>
				<td> </td>
				<td> </td>
				<td> </td>

			</tr>
			<tr>

				<td class="_913">第十一节</td>
				<td></td>
				<td></td>
				<td></td>
				<td> </td>
				<td> </td>
				<td> </td>

			</tr>
			<tr>

				<td class="_913">第十二节</td>
				<td></td>
				<td></td>
				<td></td>
				<td> </td>
				<td> </td>
				<td> </td>

			</tr>
			<tr>

				<td class="_913" ">第十三节</td>
				<td></td>
				<td></td>
				<td></td>
				<td> </td>
				<td> </td>
				<td> </td>
				

			</tr>
		</table>

	</body>

</html>

css

table{
	color: black;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	margin-left: 220px;
	width: 980px;
	height: 200px;
	border-color: cornflowerblue;
	background-color: blueviolet;

}
._1234{
	background-color: yellow;
}
._5678{
	background-color: forestgreen;
}
._913{
	background-color: brown;;
}
.course{
	background-color: #6495ED;
}
.p{
	text-align: center;
}