前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

制作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文档,制定了一个学生常用的课表:




table001



节次 周一 周二 周三 周四 周五
第1节课 语文 语文 英语 英语 语文
第2节课 语文 数学 数学 英语 数学
第3节课 英语 数学 物理 化学 物理
第4节课 英语 政治 地理 物理 政治
第5节课 数学 生物 信息 数学 化学
第6节课 体育 化学 语文 语文 美术
第7节课 社团活动 社团活动 社团活动 社团活动 社团活动

使用浏览器打开这个文档时,效果如下:

这个表格一点都不好看,因为没有表格线。

3、给元素设置border属性的值,为表格加上表格线。

对HTML文档进行修改,设置

元素的border值为1,修改后的HTML文档为:




table002



节次 周一 周二 周三 周四 周五
第1节课 语文 语文 英语 英语 语文
第2节课 语文 数学 数学 英语 数学
第3节课 英语 数学 物理 化学 物理
第4节课 英语 政治 地理 物理 政治
第5节课 数学 生物 信息 数学 化学
第6节课 体育 化学 语文 语文 美术
第7节课 社团活动 社团活动 社团活动 社团活动 社团活动

使用浏览器打开这个文档,效果如下:

现在的表格好看一些了,但是还有个缺点,就是没有标题。

4、添加元素,为表格添加标题

这里修改HTML文档,加上“华南师大附中初二(12)班课程表”标题,修改后的HTML文档如下:




table003



华南师大附中初二(12)班课程表
节次 周一 周二 周三 周四 周五
第1节课 语文 语文 英语 英语 语文
第2节课 语文 数学 数学 英语 数学
第3节课 英语 数学 物理 化学 物理
第4节课 英语 政治 地理 物理 政治
第5节课 数学 生物 信息 数学 化学
第6节课 体育 化学 语文 语文 美术
第7节课 社团活动 社团活动 社团活动 社团活动 社团活动

使用浏览器打开这个文档,效果如下:

5、现在我们加上“上午、下午”的信息。

为加上“上午、下午”的信息,我们需要增加一列,并使用元素的rowspan属性对行进行合并。修改后的HTML文档如下:




table004



华南师大附中初二(12)班课程表
上午/下午 节次 周一 周二 周三 周四 周五
上午 第1节课 语文 语文 英语 英语 语文
第2节课 语文 数学 数学 英语 数学
第3节课 英语 数学 物理 化学 物理
第4节课 英语 政治 地理 物理 政治
下午 第5节课 数学 生物 信息 数学 化学
第6节课 体育 化学 语文 语文 美术
第7节课 社团活动 社团活动 社团活动 社团活动 社团活动

使用浏览器打开该HTML文件,效果如下:

6、为了让课表更美观,我们将“上午/下午”和节次合并,将“社团活动”合并。

我们通过设置元素的colspan属性,实现这个目标。修改后的HTML文档如下:




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元素:定义表格脚。

这三个元素主要用于将表格分为表头、表尾、表体三个部分,便于进行编程控制,使用起来非常简单,这里就不介绍了。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言