使用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文档,制定了一个学生常用的课表:
table001
节次
周一
周二
周三
周四
周五
第1节课
语文
语文
英语
英语
语文
第2节课
语文
数学
数学
英语
数学
第3节课
英语
数学
物理
化学
物理
第4节课
英语
政治
地理
物理
政治
第5节课
数学
生物
信息
数学
化学
第6节课
体育
化学
语文
语文
美术
第7节课
社团活动
社团活动
社团活动
社团活动
社团活动
使用浏览器打开这个文档时,效果如下:
这个表格一点都不好看,因为没有表格线。
3、给
节次 | 周一 | 周二 | 周三 | 周四 | 周五 |
---|---|---|---|---|---|
第1节课 | 语文 | 语文 | 英语 | 英语 | 语文 |
第2节课 | 语文 | 数学 | 数学 | 英语 | 数学 |
第3节课 | 英语 | 数学 | 物理 | 化学 | 物理 |
第4节课 | 英语 | 政治 | 地理 | 物理 | 政治 |
第5节课 | 数学 | 生物 | 信息 | 数学 | 化学 |
第6节课 | 体育 | 化学 | 语文 | 语文 | 美术 |
第7节课 | 社团活动 | 社团活动 | 社团活动 | 社团活动 | 社团活动 |
使用浏览器打开这个文档,效果如下:
现在的表格好看一些了,但是还有个缺点,就是没有标题。
4、添加元素,为表格添加标题
这里修改HTML文档,加上“华南师大附中初二(12)班课程表”标题,修改后的HTML文档如下:
table003
华南师大附中初二(12)班课程表
节次
周一
周二
周三
周四
周五
第1节课
语文
语文
英语
英语
语文
第2节课
语文
数学
数学
英语
数学
第3节课
英语
数学
物理
化学
物理
第4节课
英语
政治
地理
物理
政治
第5节课
数学
生物
信息
数学
化学
第6节课
体育
化学
语文
语文
美术
第7节课
社团活动
社团活动
社团活动
社团活动
社团活动
使用浏览器打开这个文档,效果如下:
5、现在我们加上“上午、下午”的信息。
为加上“上午、下午”的信息,我们需要增加一列,并使用
table004
华南师大附中初二(12)班课程表
上午/下午
节次
周一
周二
周三
周四
周五
上午
第1节课
语文
语文
英语
英语
语文
第2节课
语文
数学
数学
英语
数学
第3节课
英语
数学
物理
化学
物理
第4节课
英语
政治
地理
物理
政治
下午
第5节课
数学
生物
信息
数学
化学
第6节课
体育
化学
语文
语文
美术
第7节课
社团活动
社团活动
社团活动
社团活动
社团活动
使用浏览器打开该HTML文件,效果如下:
6、为了让课表更美观,我们将“上午/下午”和节次合并,将“社团活动”合并。
我们通过设置
table005
华南师大附中初二(12)班课程表
节次
周一
周二
周三
周四
周五
上午
第1节课
语文
语文
英语
英语
语文
第2节课
语文
数学
数学
英语
数学
第3节课
英语
数学
物理
化学
物理
第4节课
英语
政治
地理
物理
政治
下午
第5节课
数学
生物
信息
数学
化学
第6节课
体育
化学
语文
语文
美术
第7节课
社团活动
使用浏览器打开该文件,效果如下:
7、现在表格内容基本上完整了,就是显得有点小。
修改一下HTML文档,添加一下列宽的信息,修改后的HTML文档如下:
table006
华南师大附中初二(12)班课程表
节次
周一
周二
周三
周四
周五
上午
第1节课
语文
语文
英语
英语
语文
第2节课
语文
数学
数学
英语
数学
第3节课
英语
数学
物理
化学
物理
第4节课
英语
政治
地理
物理
政治
下午
第5节课
数学
生物
信息
数学
化学
第6节课
体育
化学
语文
语文
美术
第7节课
社团活动
使用浏览器打开这个文件,效果如下:
其实,在HTML5中,除了上面五个主要元素,还有三个较常用的的元素:
tbody元素:定义表格主体;
thead元素:定义表格头;
tfoot元素:定义表格脚。
这三个元素主要用于将表格分为表头、表尾、表体三个部分,便于进行编程控制,使用起来非常简单,这里就不介绍了。