今天分享下”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=)