HTML制作表格的方法

在html中绘制表格使用table标签

?tr表示行

?td表示列

?th表示表头，表头通常用于列名字。

下面是一个列子。

 html  head  title Table in html /title  /head  body  p 水平表头 /p  table border= 1  th Name /th  th Age /th  th Gender /th  /tr  td zdd /td  td 30 /td  td male /td  /tr  /table  p 垂直表头 /p  table border= 1  th Name /th  td autumn /td  /tr  th Age /th  td 30 /td  /tr  th Gender /th  td famale /td  /tr  /table  /body  /html 

效果图

水平表头

Name

Age

Gender

zdd

30

male

垂直表头

Name

autumn

Age

30

Gender

famale

无边框表格

如果在定义表格时，没有指定border属性，那么表格就没有边框

 table  tr td zdd /td td 30 /td /tr  tr td ddz /td td 27 /td /tr  /table 

效果图

zdd

30

ddz

27

空单元格

如果没有为单元格指定内容，那么单元格将是空的，且没有边框，如下，这样很不美观。

zdd

30

27

如果解决呢？方法是给空的单元格加上空格，由于html忽略多余的空格，所以我们不能直接加空格，而要加 nbsp; nbsp表示空格。

 table border= 1  tr td zdd /td td 30 /td /tr  tr td nbsp; /td 20 /tr  /table 

效果图

zdd

30

20

带标题的表格

使用caption属性，但是好像标题中不能有空格，否则显示的时候会换行！

 table border= 1  caption 我的表格 /caption  tr td zdd /td td 30 /td /tr  tr td nbsp; /td td 20 /td /tr  /table 

我的表格

zdd

30

20

跨行或者跨列的表格

用colspan跨行

 table border= 1  tr th 姓名 /th th colspan= 2 电话 /th /tr  tr td Bill Gates /td td 555 77 854 /td td 555 77 855 /td /tr  /table 

姓名

电话

Bill Gates

555 77 854

555 77 855

用rowspan跨列

 table border= 1  tr th 姓名 /th td Bill Gates /td /tr  tr th rowspan= 2 电话 /th td 555 77 854 /td /tr  tr td 555 77 855 /td /tr  /table 

嵌套的表格

table标签是可以嵌套的，也就是说在tr或者td标签中加入table标签即可创建表格中的表格。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

相关推荐：

前端html表格生成excel表格实例

html表格知识总结

重新发现HTML表格

以上就是HTML制作表格的方法的详细内容，html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。