HTML&CSS基础学习笔记1.17-表格头部与尾部-优快云博客

本文介绍了HTML中表格的基本结构，包括如何使用<thead>、<tfoot>和<tbody>标签来组织表格的头部、尾部和主体部分。通过一个具体的例子展示了这些标签的实际应用。

表格的头部和尾部

既然有标签表示表格的主体，那么自然表格的头部和尾部也有对应的标签。

HTML中使用<thead>标签表示表格的头部，使用<tfoot>标签表示表格的尾部。

有了头部和尾部之后，<table>里的结构就是这样：

Html代码 
<table>    
     
  <thead>    
    <tr>    
        ...    
    </tr>    
  </thead>    
     
  <tfoot>    
    <tr>    
        ...    
    </tr>    
  </tfoot>    
     
  <tbody>    
    <tr>    
        ...    
    </tr>    
  </tbody>    
     
</table>    

现在就让我们来试着用下这个2个标签吧：

Html代码 
<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>使用thead和tfoot标签</title>    
</head>    
<body>    
    <h2>使用thead和tfoot标签</h2>    
    <table border="1">    
        <thead>    
            <tr><td>序号</td><td>物品</td><td>价格</td></tr>    
        <tbody>    
            <tr><td>1、</td><td>铅笔</td><td>￥1.00</td></tr>    
            <tr><td>2、</td><td>毛笔</td><td>￥5.00</td></tr>    
            <tr><td>3、</td><td>钢笔</td><td>￥10.00</td></tr>    
        </tbody>    
        <tfoot>    
            <tr><td colspan="2">总计：</td><td>￥16.00</td></tr>    
    </table>    
</body>    
</html>    