第四节Html表格
Html表格比较复杂,本章专门讲解表格的使用。
1、表格基本标签
表格最外层为table标签,基础使用tr表示行,td表示列。
丑版代码图:
效果图:
横线部分border设置边框宽度为1px(像素),表格之间存在间距。
去掉间距需要在table上加cellspacing,设置间距为0,如下:
2、表格表头
表头标签是th,将标题列改为th。
代码图:
比较一下,找出与前面表格效果不一样的地方,简单,这里就不说了。
3、表格完整版
表格巨大时用到thead、tbody、tfoot标签,分别是表头、正文、脚注。
代码图:
效果图:
横线部分是合并三列属性,colspan的值是多少就合并多少列,用在列td上。有合并列,那就有合并行属性rowspan,也用在列td上,用法类似。这里就不演示了,可以作为课后练习去试试,比如做出如下效果:
不知道大家发现没一个小细节,表格主题内容没有居中,怎么办呢?有一个align属性,加载table上,表格相对整个浏览器居中,加载tbody上,文本内容居中。
好,表格学习到这里够用了,但要注意table下最好是跟着表格的标签,比如tr、thead这些,其他标签要使用都放在td里面,否则出现问题,错误无法定位。