位置：首頁 > 軟件操作教程 > 編程開發(fā) > HTML > 問題詳情

表格的按行分組顯示<thead>/<tbody>/<tfoot> HTML

提問人：劉團(tuán)圓發(fā)布時間：2020-11-11

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

<tfoot>標(biāo)記定義表格的頁腳（腳注或表注）。該標(biāo)記用于組合HTML表格中的表注內(nèi)容。<tfoot>元素應(yīng)該與<thead>和<tbody>元素結(jié)合起來使用。<thead>元素用于對HTML表格中的表頭內(nèi)容進(jìn)行分組，而tbody元素用于對HTML表格中的主體內(nèi)容進(jìn)行分組。

如果使用<thead>、<tfoot>以及<tbody>，就必須使用全部的元素。它們的出現(xiàn)次序是：<thead>、<tfoot>、<tbody>，就必須使用全部的元素。它們的出現(xiàn)次序是：<thead>、<tfoot>、<tbody>。這樣瀏覽器就可以在收到所有數(shù)據(jù)前呈現(xiàn)頁腳了。您必須在<table>元素內(nèi)部使用這些標(biāo)記。

在默認(rèn)情況下這些元素不會影響到表格的布局。不過，可以使用CSS使這些元素改變表格的外觀。

本例是創(chuàng)建表格的按行分組顯示，在加上<thead>、<tbody>、<tfoot>標(biāo)記后表格的顯示效果并沒有發(fā)生明顯變化，加上標(biāo)記可以為以后的CSS的設(shè)置做準(zhǔn)備。

代碼如下：

<!DOCTYPE HTML>

<html>

<head>

    <title>表格的分組</title>

</head>

<body>

    <table border="1">

          <thead>

          <tr>

                    <th>月份</th>

                    <th>收入(￥)</th>

          </tr>

           </thead>

           <tfoot>

               <tr>

                        <td>總計(jì)</td>

                        <td>5800</td>

               </tr>

          </tfoot>

          <tbody>

                   <tr>

                        <td>一月</td>

                        <td>1800</td>

               </tr>

               <tr>

                        <td>二月</td>

                        <td>2000</td>

               </tr>

               <tr>

                        <td>三月</td>

                        <td>2000</td>

                   </tr>

           </tbody>

       </table>

  </body>

  </html>

image.png

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部