散人研Blog
不学无术的前端工程师

HTML | 表格的标题、表头和结构

表格的标题

我们通常使用表格时,会设置一个标题。其实,我们只要在第一个table前标签后面加上caption标签就可以了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格演示</title>
    </head>
    <body>
        <!--创建一个三行三列的表格-->
        <table border="1">              <!--表格开始-->
            <caption>博主列表</caption>  <!--这是本表格的标题-->
            <tr>                          <!--第一行开始-->
                <td>姓名</td>             <!--第一个单元格-->
                <td>性别</td>
                <td>年龄</td>
            </tr>                       <!--第一行结束-->
            <tr>
                <td>散人研</td>
                <td>男</td>
                <td>22</td>
            </tr>
            <tr>
                <td>君莫笑</td>
                <td>男</td>
                <td>21</td>
            </tr>
        </table>                       <!--表格结束-->
    </body>
</html>

表格的表头

我们通常见到的表格里面第一行都会加粗,其实这并非使用了<b>标签或<strong>标签。我们通过把第一行的<td>标签换成<th>标签可以实现加粗和居中效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格演示</title>
    </head>
    <body>
        <!--创建一个三行三列的表格-->
        <table border="1">              <!--表格开始-->
            <caption>博主列表</caption>  <!--这是本表格的标题-->
            <tr>                          <!--第一行开始-->
                <th>姓名</th>             <!--表头(加粗和居中)-->
                <th>性别</th>
                <th>年龄</th>
            </tr>                       <!--第一行结束-->
            <tr>
                <td>散人研</td>
                <td>男</td>
                <td>22</td>
            </tr>
            <tr>
                <td>君莫笑</td>
                <td>男</td>
                <td>21</td>
            </tr>
        </table>                       <!--表格结束-->
    </body>
</html>

表格的结构

我们通过网页加载表格时,往往是整个表格全部加载完才能显示,当表格非常长,内容比较繁多时,对用户体验非常不好。为了解决这一问题,可以为表格设置结构,通过表格结构标签,使表格加载一部分显示一部分,无需等待整个表格加载完毕再显示。

表格划分三部分:表头、主体、脚注

  • thead:表格的头(放表格的表头)
  • tbody:表格的主体(放数据本体)
  • tfoot:表格的脚(放表格的脚注)

三个标签往往同时使用,且thead放在最上面,tfoot放在最下面,tbody放中间。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表格演示</title>
    </head>
    <body>
        <!--创建一个三行三列的表格-->
        <table border="1">              
            <caption>收入表格</caption>  
           <thead>
                <tr>         
                    <th>姓名</th>                   
                    <th>第一年收入</th>           
                    <th>第二年收入</th>
                    <th>第三年收入</th>
                </tr> 
             </thead> 
            <tbody>                    
                <tr>
                    <td>散人研</td>
                    <td>10000</td>
                    <td>20000</td>
                    <td>30000</td>
                </tr>
                <tr>
                    <td>君莫笑</td>
                    <td>20000</td>
                    <td>20000</td>
                    <td>20000</td>
                </tr>
            </tbody>
            <tfoot>
                    <td>平均</td>
                    <td>15000</td>
                    <td>20000</td>
                    <td>25000</td>
            </tfoot>
        </table>                      
    </body>
</html>
赞(0) 打赏
未经允许不得转载:散人研Blog » HTML | 表格的标题、表头和结构
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

只要五角钱,我就可以买一包辣条!

支付宝扫一扫打赏

微信扫一扫打赏