免費(fèi)AI編程助手
HTML中表格標(biāo)簽的使用
2018-10-30 17:33 更新
表格的基本結(jié)構(gòu)
如上圖所示，HTML中的表格和我們平時(shí)用的excel表格的結(jié)構(gòu)基本是一致的，由行和列以及單元格構(gòu)成。
HTML表格的特點(diǎn)：
通常情況下，同行的高度一致，同列的寬度一致。
表格的相關(guān)元素
1、如上圖所示，HTML表格以<table>標(biāo)簽開(kāi)始，以<table>標(biāo)簽結(jié)束。<table>標(biāo)簽用于定義表格。
2、表格里一般由多行組成，行由<tr>標(biāo)簽進(jìn)行表示，因此<tr>標(biāo)簽一般有多行。在<tr>中只能包含<td>或是<th>兩種元素。
3、<td>表示單元格，假設(shè)一個(gè)表格有一行五列即有5個(gè)單元格，有5個(gè)<td>。<td>中有兩個(gè)重要的屬性為：
colspan：指定單元格跨多少列，簡(jiǎn)稱(chēng)跨列
rowspan：指定單元格可橫跨的行數(shù)，簡(jiǎn)稱(chēng)跨行
4、表格的標(biāo)題用<caption>表示，表格的標(biāo)題一般為0或1個(gè)。
5、表格頁(yè)眉的單元格用<th>表示，與<td>標(biāo)簽類(lèi)似，放在<tr>標(biāo)簽里。
6、按照表格的結(jié)構(gòu)，一般可以分為三個(gè)模塊：
<tbody>定義表格的主體，內(nèi)容
<thead>定義表格頭，即表頭
<tfoot>定義表格的腳
上述各標(biāo)簽組成一個(gè)基礎(chǔ)表格，如上圖所示一一對(duì)應(yīng)
解析：
1、在<thead>中有歌名和作者，用的是<th>標(biāo)簽進(jìn)行修飾。<th>標(biāo)簽一般都是粗體字，居中顯示
2、藍(lán)框部分的內(nèi)容用的是<td>標(biāo)簽，<td>標(biāo)簽的內(nèi)容一般都是居左顯示，不加粗字體。
3、藍(lán)框中的每一行即為<tr>標(biāo)簽
4、“張國(guó)榮”這一個(gè)單元格跨越了2行，即表示為rowspan=“2”
5、紫框部分為<tfoot>標(biāo)簽，跨越了2列，即表示為colspan=“2”
表格標(biāo)簽一般在什么情況下使用？
1、主要用于規(guī)則的數(shù)據(jù)顯示
2、適當(dāng)?shù)目梢栽诒韱雾?yè)面中使用
表格標(biāo)簽進(jìn)行頁(yè)面布局的缺點(diǎn)
1、代碼量比較大，頁(yè)面瀏覽速度比較慢2、層次結(jié)構(gòu)比較復(fù)雜，不易于維護(hù)和改版
3、不利于搜索引擎查找數(shù)據(jù)
注意：要對(duì)網(wǎng)頁(yè)進(jìn)行布局，推薦使用DIV+CSS，嚴(yán)禁使用表格進(jìn)行布局頁(yè)面。w3cschool上有《CSS + DIV網(wǎng)頁(yè)樣式布局實(shí)戰(zhàn)從入門(mén)到精通》教程正在更新中，如果你感興趣的話(huà)可以進(jìn)行學(xué)習(xí)。
代碼示例：
以上內(nèi)容是否對(duì)您有幫助：
更多建議：