前言:
眼前我们对“html5制作课程表”大致比较关注,同学们都想要学习一些“html5制作课程表”的相关知识。那么小编在网摘上汇集了一些关于“html5制作课程表””的相关资讯,希望兄弟们能喜欢,我们一起来了解一下吧!使用HTML5制作表格,是特别容易的事情,下面介绍一下制作方法。
1、HTML5表格的主要元素:
HTML5的表格包括table、caption、tr、td、th五个主要元素:
table元素:定义一个表格;
caption元素:定义表格的标题;
tr元素:定义表格的一行,tr是table row的缩写;
td元素:定义表格单元,td是table data的缩写;
th元素:定义表头,th是table head的缩写。
2、制作一个简单的表格
下面这个HTML文档,制定了一个学生常用的课表:
<!DOCTYPE html><html><head><title>table001</title><meta charset="utf-8" /></head><body><table><tr><th>节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td></tr></table></body></html>
使用浏览器打开这个文档时,效果如下:
这个表格一点都不好看,因为没有表格线。
3、给<table>元素设置border属性的值,为表格加上表格线。
对HTML文档进行修改,设置<table>元素的border值为1,修改后的HTML文档为:
<!DOCTYPE html><html><head><title>table002</title><meta charset="utf-8" /></head><body><table border="1"><tr><th>节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td></tr></table></body></html>
使用浏览器打开这个文档,效果如下:
现在的表格好看一些了,但是还有个缺点,就是没有标题。
4、添加<caption>元素,为表格添加标题
这里修改HTML文档,加上“华南师大附中初二(12)班课程表”标题,修改后的HTML文档如下:
<!DOCTYPE html><html><head><title>table003</title><meta charset="utf-8" /></head><body><table border="1"><caption>华南师大附中初二(12)班课程表</caption><tr><th>节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td></tr></table></body></html>
使用浏览器打开这个文档,效果如下:
5、现在我们加上“上午、下午”的信息。
为加上“上午、下午”的信息,我们需要增加一列,并使用<td>元素的rowspan属性对行进行合并。修改后的HTML文档如下:
<!DOCTYPE html><html><head><title>table004</title><meta charset="utf-8" /></head><body><table border="1"><caption>华南师大附中初二(12)班课程表</caption><tr><th>上午/下午</th><th>节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td rowspan="4">上午</td><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td rowspan="3">下午</td><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td><td>社团活动</td></tr></table></body></html>
使用浏览器打开该HTML文件,效果如下:
6、为了让课表更美观,我们将“上午/下午”和节次合并,将“社团活动”合并。
我们通过设置<td>元素的colspan属性,实现这个目标。修改后的HTML文档如下:
<!DOCTYPE html><html><head><title>table005</title><meta charset="utf-8" /></head><body><table border="1"><caption>华南师大附中初二(12)班课程表</caption><tr><th colspan="2">节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td rowspan="4">上午</td><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td rowspan="3">下午</td><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td colspan="5">社团活动</td></tr></table></body></html>
使用浏览器打开该文件,效果如下:
7、现在表格内容基本上完整了,就是显得有点小。
修改一下HTML文档,添加一下列宽的信息,修改后的HTML文档如下:
<!DOCTYPE html><html><head><title>table006</title><meta charset="utf-8" /></head><body><table border="1" style="width:800px;text-align:center"><caption>华南师大附中初二(12)班课程表</caption><tr><th colspan="2">节次</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td rowspan="4">上午</td><td>第1节课</td><td>语文</td><td>语文</td><td>英语</td><td>英语</td><td>语文</td></tr><tr><td>第2节课</td><td>语文</td><td>数学</td><td>数学</td><td>英语</td><td>数学</td></tr><tr><td>第3节课</td><td>英语</td><td>数学</td><td>物理</td><td>化学</td><td>物理</td></tr><tr><td>第4节课</td><td>英语</td><td>政治</td><td>地理</td><td>物理</td><td>政治</td></tr><tr><td rowspan="3">下午</td><td>第5节课</td><td>数学</td><td>生物</td><td>信息</td><td>数学</td><td>化学</td></tr><tr><td>第6节课</td><td>体育</td><td>化学</td><td>语文</td><td>语文</td><td>美术</td></tr><tr><td>第7节课</td><td colspan="5">社团活动</td></tr></table></body></html>
使用浏览器打开这个文件,效果如下:
其实,在HTML5中,除了上面五个主要元素,还有三个较常用的的元素:
tbody元素:定义表格主体;
thead元素:定义表格头;
tfoot元素:定义表格脚。
这三个元素主要用于将表格分为表头、表尾、表体三个部分,便于进行编程控制,使用起来非常简单,这里就不介绍了。
标签: #html5制作课程表 #用html编写一个课程表 #html表格在线生成 #css怎么制作表格 #html表格填充颜色怎么做