H5的colspan跨列和rowspan跨行实现课表的制作

最新推荐文章于 2025-03-07 14:59:38 发布

原创最新推荐文章于 2025-03-07 14:59:38 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

HTML5 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用H5创建六行六列的课表，并详细讲解了表格标签、th和td的运用，以及图片插入和table属性设置，涉及colspan和rowspan的高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过H5来实现课表需要借用到表格。H5中的表格由table标签tr标签及td标签组成。

<table>...</table>标签表示着一个表格的开始与结束

<tr>...</tr>标签表示着表格中一行的开始与结束

<td>...</td>标签表示着一个单元格的开始与结束，也可以理解为一行中列的个数。td标签一般写于tr标签内

简单的分析图片，然后创建表格，这里应该创建一个六行六列的表格

<!Doctype HTML>
<html>
    <head>
    <title></title>
    <meta charset="utf-8"/>
        </head>
    <body>
<table>
<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>
        <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>
        <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>
        </table>
        </body>
    </html>

创建完表格，然后就根据图片要求去插入文字和素材并简单的设置一下细节，

table标签中的border属性表示边框外围的粗细值 cellspacing表示table标签中各单元格之间的间距.

这里th标签代表的是表格头。

<h2 align='center'>2021030903班最牛课表</h2>
		<table border="1" cellspacing="0" width="500" height="10"><!--table标签用于声明这是表格-->
		<tr>
			<th></th>
			<th>周一</th>
			<th>周二</th>
			<th>周三</th>
			<th>周四</th>
			<th>周五</th>
		</tr>
		<tr>
			<td rowspan='2'>上午</td>
			<td>崇美103</td>
			<td rowspan='2' colspan='4'>无课</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>崇美204</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td rowspan="2">下午</td>
			<td rowspan='2'>无课</td>
			<td>崇美304</td>
			<td>崇美305</td>
			<td rowspan="2" rowspan="2">无课</td>
			<td></td>
		</tr>
		<tr>
			<td>崇美204</td>
			<td>崇美207</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td rowspan="2">夜宵</td>
			<td><img src='img/1.jpg' width="80" height='80'></td>
			<td><img src='img/2.jpg' width="80" height='80'></td>
			<td><img src='img/3.jpg' width="80" height='80'></td>
			<td><img src='img/4.jpg' width="80" height='80'></td>
			<td><img src='img/5.jpg' width="80" height='80'></td>
		</tr>
			</table>

下图就是此段代码运行的最终内容，可以看到还是有一些多出来的表格，这个时候可以直接删除掉这些空表格，然后就可以实现最终成品的效果