所在的位置: html >> html优势 >> 第四节html表格

第四节html表格

第四节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里面,否则出现问题,错误无法定位。




转载请注明:http://www.aierlanlan.com/grrz/7717.html