题目要求: 根据表格知识完成下列效果图: 任务提示: 使用 <caption><caption>, <thead></thead> <tbody><tbody> <tfoot></tfoot> 等标签完成。 ps: 其中“课程表”为表格标题 "星期一、星期二”等为列标题 "晚自习”为表格页脚
解法: 1、简单的构成七行七列表格,没有进行合并,也没有使用以下标签
<thead></thead> <tbody><tbody> <tfoot></tfoot>
代码如下:
<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>
初步效果为下图:
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>
最终呈现效果如下:
|