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

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、注意的点

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值