HTML实现课表(表格运用)

题目要求:
根据表格知识完成下列效果图:
HTML实现课表(表格运用)_第1张图片
任务提示:
使用




等标签完成。
ps:
其中“课程表”为表格标题
"星期一、星期二”等为列标题
"晚自习”为表格页脚


解法:
1、简单的构成七行七列表格,没有进行合并,也没有使用以下标签



代码如下:

<html>
<head>
	<title>first.html</title>
	<meta charset="UTF-8">	
</head>

<body>
	<table border="1" width="600px">
	<caption>课表</caption>

	<tr>
		<th></th>
		<th>星期一</th>
		<th>星期二</th>
		<th>星期三</th>
		<th>星期四</th>
		<th>星期五</th>
	</tr>

	<tr>
		<td>上午</td>
		<td>语文</td>
		<td>数学</td>
		<td>外语</td>
		<td>数学</td>
		<td>语文</td>
	</tr>

	<tr>
		<td>上午</td>
		<td>数学</td>
		<td>外语</td>
		<td>语文</td>
		<td>历史</td>
		<td>政治</td>
	</tr>

	<tr>
		<td>休息</td>
	</tr>

	<tr>
		<td>下午</td>
		<td>历史</td>
		<td>体育</td>
		<td>音乐</td>
		<td>政治</td>
		<td>美术</td>
	</tr>

	<tr>
		<td>下午</td>
		<td>班会</td>
		<td>自习</td>
		<td>自习</td>
		<td>自习</td>
		<td>自习</td>
	</tr>

	<tr>
		<td>晚自习</td>
	</tr>

	</table>
</body>
</html>

初步效果为下图:
HTML实现课表(表格运用)_第2张图片

2、添加页眉页脚标签,进行表格合并并将表格内容居中。
ps:其中符号 表示注释
代码如下:

<html>
<head>
	<title>first.html</title>
	<meta charset="UTF-8">	
</head>

<body>
	<table border="1" width="600px">
	<!-- 标题 -->
	<caption>课表</caption>

	<!-- 页眉 -->
	<thead>
		<tr>
			<th></th>
			<th>星期一</th>
			<th>星期二</th>
			<th>星期三</th>
			<th>星期四</th>
			<th>星期五</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<!-- 上午为行合并,合并两行 -->
			<td rowspan="2">上午</td>
			<td>语文</td>
			<td>数学</td>
			<td>外语</td>
			<td>数学</td>
			<td>语文</td>
		</tr>

		<tr>
			<!-- <td>上午</td> -->
			<td>数学</td>
			<td>外语</td>
			<td>语文</td>
			<td>历史</td>
			<td>政治</td>
		</tr>

		<tr>
			<!-- 休息为列合并,居中 -->
			<td colspan="6" align="center">休息</td>
		</tr>
		<tr>
			<!-- 下午为行合并,合并两行 -->
			<td rowspan="2">下午</td>
			<td>历史</td>
			<td>体育</td>
			<td>音乐</td>
			<td>政治</td>
			<td>美术</td>
		</tr>

		<tr>
			<!-- <td>下午</td> -->
			<td>班会</td>
			<td>自习</td>
			<td>自习</td>
			<td>自习</td>
			<td>自习</td>
		</tr>
	</tbody>

	<tfoot>
		<tr>
			<!-- 晚自习为列合并,居中 -->
			<td colspan="6" align="center">晚自习</td>
		</tr>
	</tfoot>

	</table>
</body>
</html>

最终呈现效果如下:
HTML实现课表(表格运用)_第3张图片

你可能感兴趣的:(前端学习,java,html)