在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

空單元格

如果沒有為單元格指定內(nèi)容，那么單元格將是空的，且沒有邊框，如下，這樣很不美觀。

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標簽即可創(chuàng)建表格中的表格。

總結(jié)：以上就是本篇文的全部內(nèi)容，希望能對大家的學習有所幫助。

相關(guān)推薦：

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

html表格知識總結(jié)

重新發(fā)現(xiàn)HTML表格

以上就是HTML制作表格的方法的詳細內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。