在上一章節中,我們已經學習了用<table>標簽家族來定義一個表格,我們使用到了<tr>標簽來定義表格的行,<th>和<td>來定義表格的列,那么這一章,我們來學習<thead>標簽定義表格頭部,<tbody>標簽來定義表格的內容,<tfoot>來定義表格的底部,來將我們的表格繼續完善吧!
創建表格的三個區域:
thead、tbody、tfoot
我們想實現一個成績表,各科成績和總分,效果如下圖:
我們表格第一行為表頭數據,我們用<thead>標簽包裹,中間的科目和分數為表格的主體內容,我們用<tbody>標簽包裹,最后的總分我們用<tfoot>標簽包裹。
1、<thead>
標簽定義表格的表頭。該標簽用于組合 HTML 表格的表頭內容。
2、<tbody>…</tbody>
:如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結構, tbody包含行的內容下載完優先顯示,不必等待表格結束后在顯示,同時如果表格很長,用tbody分段,可以一部分一部分地顯示。(通俗理解table 可以按結構一塊塊的顯示,不在等整個表格加載完后顯示。)
3、<tfoot>
元素用于對 HTML 表格中的表注(頁腳)內容進行分組。
4、thead、tfoot 以及 tbody 元素使您有能力對表格中的行進行分組。當您創建某個表格時,您也許希望擁有一個標題行,一些帶有數據的行,以及位于底部的一個總計行。這種劃分使瀏覽器有能力支持獨立于表格標題和頁腳的表格正文滾動。當長的表格被打印時,表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。
根據上面所學的知識,請從右邊編輯器的第10行開始輸入代碼,實現上圖效果
1、<thead>標簽表示表格頭部,一般放<tr>和<th>標簽。
2、<tbody>標簽表示表格內容,一般放<tr>和<td>標簽。
3、<tfoot>標簽標簽表格腳部標注,一般放<tr>和<td>標簽。
請驗證,完成請求
由于請求次數過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報