今天分享下”HTML表格编辑教程“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。今天的文章就分享到这啦，内容转自divcss5平台，下篇文章再见！
在html中绘制表格使用table标签
tr表示行
td表示列
th表示表头，表头通常用于列名字。
下面是一个列子。
<col>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<code><</code><code>html</code><code>></code>
<code><</code><code>head</code><code>></code>
<code><</code><code>title</code><code>>Table in html</</code><code>title</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code><</code><code>p</code><code>>水平表头</</code><code>p</code><code>></code>
<code><</code><code>table</code> <code>border</code><code>=</code><code>"1"</code><code>></code>
<code><</code><code>tr</code><code>></code>
<code><</code><code>th</code><code>>Name</</code><code>th</code><code>></code>
<code><</code><code>th</code><code>>Age</</code><code>th</code><code>></code>
<code><</code><code>th</code><code>>Gender</</code><code>th</code><code>></code>
<code></</code><code>tr</code><code>></code>
<code><</code><code>td</code><code>>zdd</</code><code>td</code><code>></code>
<code><</code><code>td</code><code>>30</</code><code>td</code><code>></code>
<code><</code><code>td</code><code>>male</</code><code>td</code><code>></code>
<code></</code><code>table</code><code>></code>
<code><</code><code>p</code><code>>垂直表头</</code><code>p</code><code>></code>
<code><</code><code>td</code><code>>autumn</</code><code>td</code><code>></code>
<code><</code><code>td</code><code>>famale</</code><code>td</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
效果图
水平表头
Name
Age
Gender
zdd
male
垂直表头
autumn
famale
无边框表格
如果在定义表格时，没有指定border属性，那么表格就没有边框
<code><</code><code>table</code><code>></code>
<code><</code><code>tr</code><code>><</code><code>td</code><code>>zdd</</code><code>td</code><code>><</code><code>td</code><code>>30</</code><code>td</code><code>></</code><code>tr</code><code>></code>
<code><</code><code>tr</code><code>><</code><code>td</code><code>>ddz</</code><code>td</code><code>><</code><code>td</code><code>>27</</code><code>td</code><code>></</code><code>tr</code><code>></code>
<code></</code><code>table：http://www.qlyl1688.com/</code><code>></code>
ddz
空单元格
如果没有为单元格指定内容，那么单元格将是空的，且没有边框，如下，这样很不美观。
如果解决呢？方法是给空的单元格加上空格，由于html忽略多余的空格，所以我们不能直接加空格，而要加 &nbsp; nbsp表示空格。
<code><</code><code>tr</code><code>><</code><code>td</code><code>>&nbsp;</</code><code>td</code><code>>20</</code><code>tr</code><code>></code>
带标题的表格
使用caption属性，但是好像标题中不能有空格，否则显示的时候会换行！
<code><</code><code>caption</code><code>>我的表格</</code><code>caption</code><code>></code>
<code><</code><code>tr</code><code>><</code><code>td</code><code>>&nbsp;</</code><code>td</code><code>><</code><code>td</code><code>>20</</code><code>td</code><code>></</code><code>tr</code><code>></code>
我的表格
跨行或者跨列的表格
用colspan跨行
<code><</code><code>tr</code><code>><</code><code>th</code><code>>姓名</</code><code>th</code><code>><</code><code>th</code> <code>colspan</code><code>=</code><code>"2"</code><code>>电话</</code><code>th</code><code>></</code><code>tr</code><code>></code>
<code><</code><code>tr</code><code>><</code><code>td</code><code>>Bill Gates</</code><code>td</code><code>><</code><code>td</code><code>>555 77 854</</code><code>td</code><code>><</code><code>td</code><code>>555 77 855</</code><code>td</code><code>></</code><code>tr</code><code>></code>
姓名
电话
Bill Gates
555 77 854
555 77 855
用rowspan跨列
<code><</code><code>tr</code><code>><</code><code>th</code><code>>姓名</</code><code>th</code><code>><</code><code>td</code><code>>Bill Gates</</code><code>td</code><code>></</code><code>tr</code><code>></code>
<code><</code><code>tr</code><code>><</code><code>th</code> <code>rowspan</code><code>=</code><code>"2"</code><code>>电话</</code><code>th</code><code>><</code><code>td</code><code>>555 77 854</</code><code>td</code><code>></</code><code>tr</code><code>></code>
<code><</code><code>tr</code><code>><</code><code>td</code><code>>555 77 855</</code><code>td</code><code>></</code><code>tr</code><code>></code>
嵌套的表格
table标签是可以嵌套的，也就是说在tr或者td标签中加入table标签即可创建表格中的表格。 以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)