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