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

最新推荐文章于 2024-03-21 19:37:10 发布

小扬同学的笔记

最新推荐文章于 2024-03-21 19:37:10 发布

阅读量1.2k

点赞数

分类专栏： HTML5 文章标签： html 前端

本文链接：https://blog.csdn.net/aibai666/article/details/121527872

版权

HTML5 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

通过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>

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

本次的重点主要是对原图的分析，分析出具体的行列数，并创建出初步的表格

其次就是对于表格中图片和文字的效果处理，要学会饮用colspan(跨列) rowspan(跨行)等标签的使用以及table标签中属性的使用和设置

小扬同学的笔记

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5的colspan跨列和rowspan跨行实现课表的制作

通过H5来实现课表需要借用到表格。H5中的表格由table标签tr标签及td标签组成。<table>...</table>标签表示着一个表格的开始与结束<tr>...</tr>标签表示着表格中一行的开始与结束<td>...</td>标签表示着一个单元格的开始与结束，也可以理解为一行中列的个数。td标签一般写于tr标签内简单的分析图片，然后创建表格，这里应该创建一个六行六列的表格<!Doctype HTM...
复制链接

扫一扫