HTML表格_動力節(jié)點Java學院整理
發(fā)布時間:2017-06-20 10:30:52 作者:perlman
我要評論
在html中繪制表格使用table標簽,tr表示行,td表示列,下面通過代碼實例給大家介紹HTML表格的相關(guān)知識,感興趣的朋友一起看看吧
在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屬性,那么表格就沒有邊框
<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表示空格。
<table border="1">
<tr><td>zdd</td><td>30</td></tr>
<tr><td> </td>20</tr>
</table>
效果圖
|
zdd
|
30
|
|
|
20
|
帶標題的表格
使用caption屬性,但是好像標題中不能有空格,否則顯示的時候會換行!
<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跨行
<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)建表格中的表格。
相關(guān)文章
- 這篇文章主要介紹了HTML圖片img標簽的相關(guān)資料,需要的朋友可以參考下2017-06-21
- 什么是HTML錨點,錨點應該如何用?這篇文章主要為大家詳細介紹了HTML中錨點的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-21
HTML中div和span比較_動力節(jié)點Java學院整理
這篇文章主要介紹了HTML中div和span比較,分別介紹了div和span的用法和比較,有興趣的可以了解一下2017-06-21- HTML是超文本標記語言,是一種用來制作超文本文檔的簡單標記語言,本文詳細的介紹了html的發(fā)展和基本概念,有興趣的可以了解一下2017-06-21
HTML數(shù)據(jù)提交post_動力節(jié)點Java學院整理
HTTP/1.1 協(xié)議規(guī)定的 HTTP 請求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 這幾種。其中 POST 一般用來向服務(wù)端提交數(shù)據(jù),本文主要討論 POST 提交數(shù)據(jù)2017-06-21- <a>是超鏈接標簽,什么是超鏈接呢?這篇文章主要介紹了HTML超鏈接a標簽的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-21
這篇文章主要介紹了HTML常用格式標簽的相關(guān)資料,需要的朋友可以參考下2017-06-20- 什么是HTML?什么是超鏈接?這篇文章主要為大家詳細介紹了HTML的最基礎(chǔ)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-21
HTML基本結(jié)構(gòu)_動力節(jié)點Java學院整理
HTML是創(chuàng)建網(wǎng)頁的基礎(chǔ)語言,如果不了解HTML就談不上網(wǎng)頁設(shè)計。以下是關(guān)于HTML基本結(jié)構(gòu)入門知識的講解2017-06-20- 一個瀏覽器文檔窗口只能顯示一個網(wǎng)頁文件,但是可以通過使用框架,在同一個瀏覽器窗口中顯示不止一個頁面,本文就來介紹一下HTML框架2017-06-20


