HTML：制作我的课表

极速天魔星

已于 2022-09-17 22:12:12 修改

阅读量549

点赞数

文章标签： html 前端

于 2022-09-14 10:22:39 首次发布

本文链接：https://blog.csdn.net/m0_53177940/article/details/126844388

版权

（1）定义网页编码格式<meta charset="UTF-8">

（2）网页的名称/文档的标题<title>我的课表</title>

（3）网页页面的可视内容<body>......</body>

（4）表格<table></table>

（5）表格的名称标题<caption></caption>

（6）表格的表头/首行各列<thead></thead>

（7）表格主体<tbody></tbody>

（8）表格的行<tr></tr>

表格的某一行的列<td></td>

（9）给表格加边框border，设表格中字与边框的距离cellpadding

（10）标题字的大小<caption style="font-size: calc(35px);">我的课表</caption>

（11）行合并，同一列中的相邻行合并rowpan，数字2表示该列从此行起有两行进行合并

<td rowspan="2"></td>（另外突出的内容注释掉）

（12）表格某格的背景颜色<tr><td bgcolor="azzure">......</td></tr>

（13）设表格某格的字体颜色为蓝色<tr><td style="color: rgb(0,0,255);">

（14）列合并，同一行中的相邻列合并colspan，数字3表示该行从此列起有三列进行合并

<td colspan="3"></td>（另外突出的内容注释掉）

（15）换行<br>

<!DOCTYPE html>        <!-- 声明文档。定义html -->
<html lang="en">         <!-- 元素是页面的根元素 -->
<head>                     <!-- 元素包含文档的元数据 -->
    <meta charset="UTF-8">   <!-- 定义网页编码格式 -->
    <title>我的课表</title>  <!-- 元素描述了文档的标题-->
</head>
<body><!--元素包含了页面可以看见的内容。定义文档主体。-->
	<table border="1" cellpadding="40">
		<caption style="font-size: calc(35px);">我的课表</caption>
		<thead>
			<th style="font-size: calc(24px);">星期</th>
			<th style="font-size: calc(24px);">节次</th>
			<th style="font-size: calc(24px);">课程信息</th>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2" style="font-size: calc(22px);">星期一</td>
				<td style="font-size: calc(21px);">1-2</td>
				<td bgcolor="azure" style="color: rgb(0,0,255);font-size: calc(20px);">
					专业创新创业教育
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<!--<td>星期一</td> -->
				<td style="font-size: calc(21px);">3-4</td>
				<td bgcolor="lavender" style="color: rgb(0,0,255);font-size: calc(20px);">
					机器学习
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<td rowspan="3" rowspan="2" style="font-size: calc(22px);">星期二</td>
				<td style="font-size: calc(21px);">1-2</td>
				<td bgcolor="cornsilk" style="color: rgb(0,0,255);font-size: calc(20px);">
					模式识别
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<!--<td>星期二</td>-->
				<td style="font-size: calc(21px);">3-4</td>
				<td bgcolor="honeydew" style="color: rgb(0,0,255);font-size: calc(20px);">
					web应用开发基础
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<!--<td>星期二</td> -->
				<td style="font-size: calc(21px);">5-5</td>
				<td bgcolor="honeydew" style="color: rgb(0,0,255);font-size: calc(20px);">
					web应用开发基础
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<td rowspan="2" rowspan="2" style="font-size: calc(22px);">星期三</td>
				<td style="font-size: calc(21px);">1-2</td>
				<td bgcolor="lavender" style="color: rgb(0,0,255);font-size: calc(20px);">
					机器学习
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<!--<td>星期三</td>-->
				<td style="font-size: calc(21px);">3-4</td>
				<td bgcolor="azure" style="color: rgb(0,0,255);font-size: calc(20px);">
					专业创新创业教育
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<td rowspan="2" rowspan="2" style="font-size: calc(22px);">星期四</td>
				<td style="font-size: calc(21px);">3-4</td>
				<td bgcolor="cornsilk" style="color: rgb(0,0,255);font-size: calc(20px);">
					模式识别
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<!--<td>星期四</td>-->
				<td style="font-size: calc(21px);">6-7</td>
				<td bgcolor="honeydew" style="color: rgb(0,0,255);font-size: calc(20px);">
					web应用开发基础
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<td rowspan="2" rowspan="2" style="font-size: calc(22px);">星期五</td>
				<td style="font-size: calc(21px);">3-4</td>
				<td bgcolor="lavenderblush" style="color: rgb(0,0,255);font-size: calc(20px);">
					历史
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tr>
				<!--<td>星期五</td>-->
				<td style="font-size: calc(21px);">3-5</td>
				<td bgcolor="lavenderblush" style="color: rgb(0,0,255);font-size: calc(20px);">
					历史
					<br >周数：/校区：
					<br>上课地点：/教师：
					<br>学分：
				</td>
			</tr>
			<tfoot>
				<tr>
					<td colspan="3">实践课程</td>
				</tr>
			</tfoot>
		</tbody>
	</table>