當(dāng)前位置:首頁 >  站長 >  編程技術(shù) >  正文

淺析Table 和 div 的簡介及用法

 2020-10-19 10:43  來源: 腳本之家   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

這篇文章主要介紹了淺析Table 和 div 的簡介及用法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

Web前端1

學(xué)號(hào)姓名性別年齡

01張三男20

02李四女21

人數(shù)合計(jì)60

表格的組成部分:

標(biāo)題 表頭 主體 表尾

Table 定義一個(gè)表格

<table border="1" cellspacing="0" cellpadding="0" align="center">
</table>

Caption 定義表格的標(biāo)題

<caption>web前/caption>端1<

Thead 定義表頭的部分

<thead>
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>

Tbody 定義表格的主體

<tbody>
<tr>
<td>01</td>
<td>張三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>02</td>
<td>李四</td>
<td>女</td>
<td>21</td>
</tr>
<tfoot>
<tr>
<td colspan="3">人數(shù)合計(jì):</td>
<td>60</td>
</tr>
</tfoot>
</tbody>

Tfoot 定義表尾,一般來顯示匯總信息

<tfoot>
<tr>
<td colspan="3">人數(shù)合計(jì):</td>
<td>60</td>
</tr>
</tfoot>

Tr 定義一行

<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>

Th td 定義數(shù)據(jù)項(xiàng)(單元格) th 一般用于表頭,有加粗的樣式

Td 一般用于主體部分,沒有加粗樣式

<tr>
<td>01</td>
<td>張三</td>
<td>男</td>
<td>20</td>
</tr>

Td rowspan 和 colspan 分別定義單元格跨行的行數(shù),跨列的列數(shù)

<td colspan="3">人數(shù)合計(jì):</td>

Cellspacing 定義表格的間距

Cellpadding 定義表格的邊距

<table border="1" cellspacing="0" cellpadding="10">

Div 定義一個(gè)分塊 (division)

<div style="width: 200px;height: 200px;background-color:skyblue";>

特點(diǎn):在新的一行顯示 塊級(jí)標(biāo)簽

塊級(jí)標(biāo)簽 與 行內(nèi)標(biāo)簽的區(qū)別:

塊級(jí)標(biāo)簽占滿行 行內(nèi)標(biāo)簽會(huì)按照順序從左到右依次排列

塊級(jí)標(biāo)簽:h1-h6 p ul ol li div table dl form

行內(nèi)標(biāo)簽:span a br lable I em

塊級(jí)元素的特點(diǎn):display:block

每個(gè)塊都是從新的一行開始,后面的元素會(huì)另起一行

元素的寬度、高度、行高、內(nèi)外邊距都是可設(shè)置的

如果不設(shè)置元素的寬度,是他父容器的100%,除非你給他設(shè)定高度

行內(nèi)元素的特點(diǎn):display:inline

和其他的元素都在一行上

不能設(shè)置元素的寬度,高度,行高,內(nèi)外邊距

元素的寬度是他包含文字或圖片的寬度,不能改變

行內(nèi)塊元素的特點(diǎn):display:inline-block

和其他的元素都在一行上

寬度,高度,行高,內(nèi)外邊距都可以設(shè)置的

總結(jié)

到此這篇關(guān)于淺析Table 和 div 的簡介及用法的文章就介紹到這了,更多相關(guān)Table 和 div 的簡介及使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

本文來自腳本之家,原文鏈接https://www.jb51.net/web/742251.html

 

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
table用法
div
用法

相關(guān)文章

熱門排行

信息推薦