HTML表格_動力節(jié)點Java學(xué)院整理

在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標簽_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了HTML圖片img標簽的相關(guān)資料,需要的朋友可以參考下2017-06-21HTML中錨點的使用_動力節(jié)點Java學(xué)院整理
什么是HTML錨點,錨點應(yīng)該如何用?這篇文章主要為大家詳細介紹了HTML中錨點的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-21HTML中div和span比較_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了HTML中div和span比較,分別介紹了div和span的用法和比較,有興趣的可以了解一下2017-06-21什么是HTML_動力節(jié)點Java學(xué)院整理
HTML是超文本標記語言,是一種用來制作超文本文檔的簡單標記語言,本文詳細的介紹了html的發(fā)展和基本概念,有興趣的可以了解一下2017-06-21HTML數(shù)據(jù)提交post_動力節(jié)點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標簽_動力節(jié)點Java學(xué)院整理
<a>是超鏈接標簽,什么是超鏈接呢?這篇文章主要介紹了HTML超鏈接a標簽的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-21HTML常用格式標簽_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了HTML常用格式標簽的相關(guān)資料,需要的朋友可以參考下2017-06-20- 什么是HTML?什么是超鏈接?這篇文章主要為大家詳細介紹了HTML的最基礎(chǔ)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-21
HTML基本結(jié)構(gòu)_動力節(jié)點Java學(xué)院整理
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