Html制作课程表

最新推荐文章于 2024-05-20 15:43:39 发布

WD-CHINA

最新推荐文章于 2024-05-20 15:43:39 发布

阅读量1.9k

点赞数

分类专栏： HTML

HTML 专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Python课程表</title>
		
	<style>
		
		
		
		table{
			/* 表格居中 */
			
			margin: 250px;
			border: 3px lightblue solid;
			border-collapse: collapse;
			width: 700px;
			height: 200px;
			font-size: 20px;
			text-align: center;
			
		}
			
		caption{
			font-size: 30px;
			/* font-weight: bold; 字体加粗  100~900 bold常规粗体 700*/
			font-weight: bold;
			margin-bottom: 10px;
		}
		thead{
			background-color: lightblue;
			color: white;
		}
		th, td{
			height: 50px;
			border-bottom: 3px lightblue solid;
			
		}
		.rightb{
			border-left: 3px lightblue solid;
		}
		
	</style>
	
</head>
<body>
	<div>
		<table>
			<caption>Python课程表</caption>
			<thead>
				<tr>
					<th>时间</th>
					<th>周一</th>
					<th>周二</th>
					<th>周三</th>
					<th>周四</th>
					<th>周五</th>
					<th>周六</th>
					<th>周日</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>上午</td>
					<td>Python</td>
					<td>Python</td>
					<td>Python</td>
					<td>Python</td>
					<td>Python</td>
					<td rowspan="2" class="rightb">Python</td>
					<td rowspan="3" class="rightb">自习</td>
				</tr>
				
				<tr>
					<td>下午</td>
					<td>Python</td>
					<td>Python</td>
					<td>Python</td>
					<td>Python</td>
					<td>Python</td>
				</tr>
				
				<tr>
					<td>晚上</td>
					<td>自习</td>
					<td>自习</td>
					<td>自习</td>
					<td>自习</td>
					<td>自习</td>
					<td>自习</td>
				</tr>
				
			</tbody>
		</table>
		
		
	</div>
	
	
	
	
</body>

在这里插入图片描述