在上一章節(jié)中,我們已經(jīng)學(xué)習(xí)了用<table>標(biāo)簽家族來定義一個(gè)表格,我們使用到了<tr>標(biāo)簽來定義表格的行,<th>和<td>來定義表格的列,那么這一章,我們來學(xué)習(xí)<thead>標(biāo)簽定義表格頭部,<tbody>標(biāo)簽來定義表格的內(nèi)容,<tfoot>來定義表格的底部,來將我們的表格繼續(xù)完善吧！

創(chuàng)建表格的三個(gè)區(qū)域：

thead、tbody、tfoot

我們想實(shí)現(xiàn)一個(gè)成績(jī)表,各科成績(jī)和總分,效果如下圖：

我們表格第一行為表頭數(shù)據(jù),我們用<thead>標(biāo)簽包裹,中間的科目和分?jǐn)?shù)為表格的主體內(nèi)容,我們用<tbody>標(biāo)簽包裹,最后的總分我們用<tfoot>標(biāo)簽包裹。

1、<thead> 標(biāo)簽定義表格的表頭。該標(biāo)簽用于組合 HTML 表格的表頭內(nèi)容。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結(jié)構(gòu)， tbody包含行的內(nèi)容下載完優(yōu)先顯示，不必等待表格結(jié)束后在顯示，同時(shí)如果表格很長(zhǎng)，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示，不在等整個(gè)表格加載完后顯示。）

3、<tfoot> 元素用于對(duì) HTML 表格中的表注（頁腳）內(nèi)容進(jìn)行分組。

4、thead、tfoot 以及 tbody 元素使您有能力對(duì)表格中的行進(jìn)行分組。當(dāng)您創(chuàng)建某個(gè)表格時(shí)，您也許希望擁有一個(gè)標(biāo)題行，一些帶有數(shù)據(jù)的行，以及位于底部的一個(gè)總計(jì)行。這種劃分使瀏覽器有能力支持獨(dú)立于表格標(biāo)題和頁腳的表格正文滾動(dòng)。當(dāng)長(zhǎng)的表格被打印時(shí)，表格的表頭和頁腳可被打印在包含表格數(shù)據(jù)的每張頁面上。