閱讀(12.5k) 書簽贊(0) 我要糾錯

HTML中表格標簽的使用

2018-10-30 17:33 更新

表格的基本結(jié)構(gòu)

如上圖所示，HTML中的表格和我們平時用的excel表格的結(jié)構(gòu)基本是一致的，由行和列以及單元格構(gòu)成。

HTML表格的特點：

通常情況下，同行的高度一致，同列的寬度一致。

1、如上圖所示，HTML表格以<table>標簽開始，以<table>標簽結(jié)束。<table>標簽用于定義表格。

2、表格里一般由多行組成，行由<tr>標簽進行表示，因此<tr>標簽一般有多行。在<tr>中只能包含<td>或是<th>兩種元素。

3、<td>表示單元格，假設(shè)一個表格有一行五列即有5個單元格，有5個<td>。<td>中有兩個重要的屬性為：

colspan：指定單元格跨多少列，簡稱跨列

rowspan：指定單元格可橫跨的行數(shù)，簡稱跨行

4、表格的標題用<caption>表示，表格的標題一般為0或1個。

5、表格頁眉的單元格用<th>表示，與<td>標簽類似，放在<tr>標簽里。

6、按照表格的結(jié)構(gòu)，一般可以分為三個模塊：

<tbody>定義表格的主體，內(nèi)容

<thead>定義表格頭，即表頭

<tfoot>定義表格的腳

上述各標簽組成一個基礎(chǔ)表格，如上圖所示一一對應(yīng)

解析：

1、在<thead>中有歌名和作者，用的是<th>標簽進行修飾。<th>標簽一般都是粗體字，居中顯示

2、藍框部分的內(nèi)容用的是<td>標簽，<td>標簽的內(nèi)容一般都是居左顯示，不加粗字體。

3、藍框中的每一行即為<tr>標簽

4、“張國榮”這一個單元格跨越了2行，即表示為rowspan=“2”

5、紫框部分為<tfoot>標簽，跨越了2列，即表示為colspan=“2”

1、主要用于規(guī)則的數(shù)據(jù)顯示

2、適當(dāng)?shù)目梢栽诒韱雾撁嬷惺褂?/div>

1、代碼量比較大，頁面瀏覽速度比較慢

2、層次結(jié)構(gòu)比較復(fù)雜，不易于維護和改版

3、不利于搜索引擎查找數(shù)據(jù)

注意：要對網(wǎng)頁進行布局，推薦使用DIV+CSS，嚴禁使用表格進行布局頁面。w3cschool上有《CSS + DIV網(wǎng)頁樣式布局實戰(zhàn)從入門到精通》教程正在更新中，如果你感興趣的話可以進行學(xué)習(xí)。

代碼示例：

以上內(nèi)容是否對您有幫助：

寫筆記

我要補充