html表格元素html漂亮表格效果_制作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、给
对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元素：定义表格脚。
这三个元素主要⽤于将表格分为表头、表尾、表体三个部分，便于进⾏编程控制，使⽤起来⾮常简单，这⾥就不介绍了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。