11、HTML表格的简单小应用-制作课程表

最新推荐文章于 2024-02-16 23:45:17 发布

低头专研

最新推荐文章于 2024-02-16 23:45:17 发布

阅读量1k

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_43535992/article/details/104134504

版权

HTML 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1、直接上效果图

在这里插入图片描述

2、源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>课程表</title>
	</head>
	<body>
		<table border="1px">
			<tr>
				<td >&nbsp;&nbsp;&nbsp;</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
				<td>星期天</td>
			</tr>
			<tr>
				<td rowspan="4">上午</td>
				<td>Java</td>
				<td>python</td>
				<td>Java</td>
				<td>HTML</td>
				<td>CSS</td>
				<td rowspan="8" colspan="2"><center>休息日<br />不上课</center></td>
			</tr>
			<tr>
				<td>python</td>
				<td>Java</td>
				<td>CSS</td>
				<td>HTML</td>
				<td>Java</td>
			</tr>
			<tr>
				<td>HTML</td>
				<td>CSS</td>
				<td>HTML</td>
				<td>Java</td>
				<td>HTML</td>
			</tr>
			<tr>
				<td>HTML</td>
				<td>C语言</td>
				<td>C语言</td>
				<td>Java</td>
				<td>HTML</td>
			</tr>
			<tr>
				<td colspan="6"><center>午休</center></td>
			</tr>
			<tr>
				<td rowspan="3">下午</td>
				<td>Java</td>
				<td>C语言</td>
				<td>C语言</td>
				<td>python</td>
				<td>CSS</td>
			</tr>
			<tr>
				<td>python</td>
				<td>Java</td>
				<td>python</td>
				<td>HTML</td>
				<td>C语言</td>
			</tr>
			<tr>
				<td>CSS</td>
				<td>HTML</td>
				<td>Java</td>
				<td>python</td>
				<td>C语言</td>
			</tr>
		</table>
		
	</body>
</html>

3、注意的点

跨行（rowspan）与跨列（colspan）都是针对 td 标签来说的，也就是说，这个属性是只有 td 标签有，tr 标签是没有这个属性的。
跨行（rowspan）与跨列（colspan），这两个属性的值都是数字，也就是跨越的行数或者列数。
一个 td 标签是可以同时使用跨行（rowspan）以及跨列（colspan）
在表格中想要让文字居中，需要在 td 标签中嵌套一个 center 标签，将文字括起来。
center 标签中可以使用 br 标签换行
table 标签可以设置 border 属性，即边框，属性值单位为 px（像素），1px（1像素）设置的是边框的宽度为一个像素。

低头专研

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
11、HTML表格的简单小应用-制作课程表

1、直接上效果图2、源代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>课程表</title> </head> <body> <table border="1px"> <tr>...
复制链接

扫一扫