HTML表格编辑教程

今天分享下”HTML表格编辑教程“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。今天的文章就分享到这啦，内容转自divcss5平台，下篇文章再见！
在html中绘制表格使用table标签

tr表示行
td表示列
th表示表头，表头通常用于列名字。
下面是一个列子。

​​<​​​​html​​​​>​​

​​<​​​​head​​​​>​​

​​<​​​​title​​​​>Table in html</​​​​title​​​​>​​

​​</​​​​head​​​​>​​

​​<​​​​body​​​​>​​

​​<​​​​p​​​​>水平表头</​​​​p​​​​>​​

​​<​​​​table​​ ​​border​​​​=​​​​"1"​​​​>​​

​​<​​​​tr​​​​>​​

​​<​​​​th​​​​>Name</​​​​th​​​​>​​

​​<​​​​th​​​​>Age</​​​​th​​​​>​​

​​<​​​​th​​​​>Gender</​​​​th​​​​>​​

​​</​​​​tr​​​​>​​

​​<​​​​tr​​​​>​​

​​<​​​​td​​​​>zdd</​​​​td​​​​>​​

​​<​​​​td​​​​>30</​​​​td​​​​>​​

​​<​​​​td​​​​>male</​​​​td​​​​>​​

​​</​​​​tr​​​​>​​

​​</​​​​table​​​​>​​

​​<​​​​p​​​​>垂直表头</​​​​p​​​​>​​

​​<​​​​table​​ ​​border​​​​=​​​​"1"​​​​>​​

​​<​​​​tr​​​​>​​

​​<​​​​th​​​​>Name</​​​​th​​​​>​​

​​<​​​​td​​​​>autumn</​​​​td​​​​>​​

​​</​​​​tr​​​​>​​

​​<​​​​tr​​​​>​​

​​<​​​​th​​​​>Age</​​​​th​​​​>​​

​​<​​​​td​​​​>30</​​​​td​​​​>​​

​​</​​​​tr​​​​>​​

​​<​​​​tr​​​​>​​

​​<​​​​th​​​​>Gender</​​​​th​​​​>​​

​​<​​​​td​​​​>famale</​​​​td​​​​>​​

​​</​​​​tr​​​​>​​

​​</​​​​table​​​​>​​

​​</​​​​body​​​​>​​

​​</​​​​html​​​​>​​

效果图

水平表头

Name

Age

Gender

zdd

30

male

垂直表头

Name

autumn

Age

30

Gender

famale

无边框表格

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

1

2

3

4

​​<​​​​table​​​​>​​

​​<​​​​tr​​​​><​​​​td​​​​>zdd</​​​​td​​​​><​​​​td​​​​>30</​​​​td​​​​></​​​​tr​​​​>​​

​​<​​​​tr​​​​><​​​​td​​​​>ddz</​​​​td​​​​><​​​​td​​​​>27</​​​​td​​​​></​​​​tr​​​​>​​

​​</​​​​table：​​http://www.qlyl1688.com/​​​​​​>​​

效果图

zdd

30

ddz

27

空单元格

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

zdd

30

27

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

1

2

3

4

​​<​​​​table​​ ​​border​​​​=​​​​"1"​​​​>​​

​​<​​​​tr​​​​><​​​​td​​​​>zdd</​​​​td​​​​><​​​​td​​​​>30</​​​​td​​​​></​​​​tr​​​​>​​

​​<​​​​tr​​​​><​​​​td​​​​> </​​​​td​​​​>20</​​​​tr​​​​>​​

​​</​​​​table​​​​>​​

效果图

zdd

30

20

带标题的表格

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

1

2

3

4

5

​​<​​​​table​​ ​​border​​​​=​​​​"1"​​​​>​​

​​<​​​​caption​​​​>我的表格</​​​​caption​​​​>​​

​​<​​​​tr​​​​><​​​​td​​​​>zdd</​​​​td​​​​><​​​​td​​​​>30</​​​​td​​​​></​​​​tr​​​​>​​

​​<​​​​tr​​​​><​​​​td​​​​> </​​​​td​​​​><​​​​td​​​​>20</​​​​td​​​​></​​​​tr​​​​>​​

​​</​​​​table​​​​>​​

我的表格

zdd

30

20

跨行或者跨列的表格

用colspan跨行

1

2

3

4

​​<​​​​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跨列

1

2

3

4

5

​​<​​​​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标签即可创建表格中的表格。 以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！