《HTML5+CSS3網(wǎng)頁(yè)制作教程》課件-第6章

模塊6創(chuàng)建表格6.1表格基本結(jié)構(gòu)6.2表格中的其他標(biāo)簽6.3表格的常見(jiàn)屬性6.4案例：制作簡(jiǎn)歷思考與練習(xí)題

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

表格的主要用途是以網(wǎng)格的形式顯示二維數(shù)據(jù)。表格在前端開(kāi)發(fā)中用得很多，因?yàn)槭褂帽砀窨梢愿逦嘏帕袛?shù)據(jù)。例如菜鳥(niǎo)教程網(wǎng)中就大量使用了表格，如圖6-1所示。

圖6-1菜鳥(niǎo)教程網(wǎng)中的表格數(shù)據(jù)

<tr></tr>標(biāo)簽和<td></td>標(biāo)簽都要在表格的開(kāi)始標(biāo)簽<table>和結(jié)束標(biāo)簽</table>之間才有效。語(yǔ)法如下：

說(shuō)明：tr，即“tablerow”(表格行)。

【例6-1】一個(gè)兩行兩列的表格。

上述代碼在瀏覽器中的預(yù)覽效果如圖6-2所示，但是這個(gè)表格非常簡(jiǎn)單，不足以顯示出表格的基本結(jié)構(gòu)。

圖6-2頁(yè)面運(yùn)行效果

6.2表格中的其他標(biāo)簽

6.2.1?表格標(biāo)題標(biāo)簽表格一般都有一個(gè)標(biāo)題，表格的標(biāo)題使用<caption>標(biāo)簽。默認(rèn)情況下，表格的標(biāo)題位于整個(gè)表格上方，且一個(gè)表格只能含有一個(gè)表格標(biāo)題。

【例6-2】帶標(biāo)題的表格。

上述代碼在瀏覽器中的預(yù)覽效果如圖6-3所示。

圖6-3頁(yè)面運(yùn)行效果

6.2.2?表頭標(biāo)簽

表格的表頭標(biāo)簽<th>是單元格標(biāo)簽<td>的一種變體，它的本質(zhì)還是一種單元格。它一般位于第一行，用來(lái)表明這一行或列的內(nèi)容類(lèi)別。表頭有一種默認(rèn)樣式：瀏覽器會(huì)以粗

體和居中的樣式顯示<th></th>標(biāo)簽中的內(nèi)容。

<th>標(biāo)簽和<td>標(biāo)簽在本質(zhì)上都是單元格，但是并不代表兩者可以互換使用。這兩者的根本區(qū)別在語(yǔ)義上。th，即“tableheader”(表頭單元格)；而td，即“tabledata

cell”(單元格)。

【例6-3】帶標(biāo)題和表頭的表格。

上述代碼在瀏覽器中的預(yù)覽效果如圖6-4所示。

圖6-4頁(yè)面運(yùn)行效果

6.2.3?表格語(yǔ)義化標(biāo)簽

在前面，我們學(xué)習(xí)了如下標(biāo)簽：<table>標(biāo)簽(表格)、<tr>標(biāo)簽(行)、<td>標(biāo)簽(標(biāo)準(zhǔn)單元格)、<caption>標(biāo)簽(標(biāo)題)和<th>標(biāo)簽(表頭單元格)。

為了更深一層對(duì)表格進(jìn)行語(yǔ)義化，HTML引入了<thead>、<tbody>和<tfoot>這三個(gè)標(biāo)簽。這三個(gè)標(biāo)簽把表格分為三部分：表頭、表身、表腳。有了這三個(gè)標(biāo)簽，表格的HTML代碼語(yǔ)義更加良好，結(jié)構(gòu)更加清晰。

完整表格結(jié)構(gòu)應(yīng)該包括表格標(biāo)題(caption)、表頭(thead)、表身(tbody)和表腳(tfoot)四部分。表格有了結(jié)構(gòu)之后的一大好處是區(qū)別處理不同部分更簡(jiǎn)單了，尤其是在涉及CSS選擇器的時(shí)候。

【例6-4】表格的語(yǔ)義化結(jié)構(gòu)。

上述代碼在瀏覽器中的預(yù)覽效果如圖6-5所示，且表腳往往都是用于統(tǒng)計(jì)數(shù)據(jù)的。

圖6-5頁(yè)面運(yùn)行效果

從圖6-5中對(duì)于表格的顯示效果來(lái)說(shuō)，<thead>、<tbody>、<tfoot>這三個(gè)標(biāo)簽加與沒(méi)加沒(méi)有區(qū)別，但是加了之后會(huì)讓代碼更具有邏輯性。還有一點(diǎn)就是：我們不斷地提及“語(yǔ)義化”這個(gè)詞，這是因?yàn)镠TML語(yǔ)義結(jié)構(gòu)極其重要，特別是針對(duì)搜索引擎而言。<thead>、<tbody>、<tfoot>除了使得代碼更有語(yǔ)義化，還有一個(gè)很重要的作用：方便分塊控制表格的CSS樣式。

6.3表格的常見(jiàn)屬性

6.3.1?表格邊框1.表格邊框?qū)挾萾able元素定義了border屬性。border屬性規(guī)定表格邊框的粗細(xì)，其語(yǔ)法格式如下：<tableborder="">border屬性的值必須設(shè)置為數(shù)字(單位：像素)或者空字符串("")。使用border屬性就是告訴瀏覽器：這個(gè)表格是用來(lái)表示表格式數(shù)據(jù)而不是用來(lái)布置其他元素的。

2.表格邊框顏色

表格邊框顏色在默認(rèn)情況下是灰色的，可以使用bordercolor屬性設(shè)置邊框的顏色，其語(yǔ)法格式如下：

<tableborder="邊框?qū)挾戎?bordercolor="顏色值">

其中，邊框?qū)挾戎荡笥?(否則無(wú)法顯示邊框的顏色)，顏色值為十六進(jìn)制的顏色值或顏色的英文名稱。

6.3.2?合并單元格

設(shè)計(jì)表格時(shí)，有時(shí)候需要將兩個(gè)或更多的相鄰單元格組合成一個(gè)單元格，類(lèi)似Word表格中的“合并單元格”。在HTML中，這就需要用到“合并行”和“合并列”。合并行使用<td>標(biāo)簽的rowspan屬性，而合并列則使用<td>標(biāo)簽的colspan屬性。

1.合并行rowspan

rowspan屬性的作用是指定單元格縱向跨越的行數(shù)，其語(yǔ)法格式如下：

<tdrowspan="跨度的行數(shù)">

【例6-5】一個(gè)簡(jiǎn)單的表格。

上述代碼在瀏覽器中的預(yù)覽效果如圖6-6所示。

圖6-6頁(yè)面預(yù)覽效果

如果想讓中間一列的一個(gè)單元格橫跨三行，則應(yīng)設(shè)置2號(hào)單元格的rowspan屬性，格式為：<tdrowspan="3">2</td>。此外，擴(kuò)展后的單元格應(yīng)將所覆蓋的單元格元素刪除，此例中也就是刪除5號(hào)和8號(hào)單元格，見(jiàn)例6-6。

【例6-6】合并行。

上述代碼在瀏覽器中的預(yù)覽效果如圖6-7所示。

圖6-7頁(yè)面預(yù)覽結(jié)果

2.合并列colspan

在HTML中，表格的合并列是指將幾個(gè)列進(jìn)行合并，即橫向合并單元格，通過(guò)colspan屬性來(lái)完成，其語(yǔ)法格式如下：

<tdcolspan="跨度的列數(shù)">

如果我們要將例6-5中最后一行的一個(gè)單元格橫跨所有三列，應(yīng)該怎么設(shè)置呢？

顯然我們應(yīng)該設(shè)置7號(hào)單元格的colspan屬性，格式為：<tdcolspan="3">7</td>，且刪除8、9號(hào)單元格元素。

6.4案例：制作簡(jiǎn)歷

【案例描述】個(gè)人簡(jiǎn)歷是一種常見(jiàn)的表格，下面我們來(lái)做一個(gè)結(jié)合了表格常見(jiàn)屬性的個(gè)人簡(jiǎn)歷網(wǎng)頁(yè)。【考核知識(shí)點(diǎn)】(1)元素：table、tr、td、caption。(2)屬性：background、colspan、rowspan。

【練習(xí)目標(biāo)】

(1)會(huì)使用三個(gè)核心元素table、tr和td生成基本的表格。

(2)會(huì)使用caption元素為表格添加標(biāo)題。

(3)會(huì)使用table的background屬性添加背景圖片。

(4)會(huì)使用colspan、rowspan屬性進(jìn)行單元格合并。

【案例源代碼】

【運(yùn)行結(jié)果】

源代碼在網(wǎng)頁(yè)中的運(yùn)行結(jié)果如圖6-8所示。圖6-8頁(yè)面運(yùn)行效果

【案例分析】

本網(wǎng)頁(yè)設(shè)置了<caption></caption>標(biāo)題，通過(guò)單元格合并將個(gè)人信息有序地展示了出來(lái)，設(shè)置了單元格間距以及單元格內(nèi)容與單元格邊框之間的距離，并為整個(gè)表格設(shè)置了背

景圖像。

思考與練習(xí)題

一、選擇題1.創(chuàng)建表格的標(biāo)簽是()。A.<h2></h2>

B.<a></a>C.<table></table>

D.<b></b>2.表格中創(chuàng)建一行需要用到的標(biāo)簽是()。A.<hr>

B.<ht></ht>C.<thead></thead>

D.<tr></tr>

3.在表格中創(chuàng)建一個(gè)單元格的標(biāo)簽是()。

A.<td>…</td>

B.<thead>…</thead>

C.<tbody>…</tbody>

D.<P>…</P>

4.在表格中設(shè)置表格標(biāo)題的標(biāo)簽是()。

A.<h3>…</h3>

B.<thead>…</thead>

C.<tbody>…</tbody>

D.<caption>…</caption>

二、填空題

1.要給表格添加表格線，可以在<table>標(biāo)簽中設(shè)置

屬性，但是該屬性只改變表格的

邊框。

2.表格的背景顏色和背景圖片分別需要在對(duì)應(yīng)的標(biāo)簽中設(shè)置

和

屬性。

3.如果表格需要合并橫向單元