HTML&CSS基础学习笔记1.17-表格头部与尾部

最新推荐文章于 2021-06-16 22:59:46 发布

iteye_5032

最新推荐文章于 2021-06-16 22:59:46 发布

阅读量115

点赞数

分类专栏： HTML 文章标签： html 表格 thead tfoot

HTML 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

表格的头部和尾部

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

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>    

结果会是怎么样？可以前往码芽网学习体验哦http://www.mayacoder.com/lesson/index

查看吧~~~

iteye_5032

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS基础学习笔记1.17-表格头部与尾部

表格的头部和尾部既然有标签表示表格的主体，那么自然表格的头部和尾部也有对应的标签。HTML中使用&lt;thead&gt;标签表示表格的头部，使用&lt;tfoot&gt;标签表示表格的尾部。有了头部和尾部之后，&lt;table&gt;里的结构就是这样：Html代码 &lt;table&gt; &lt;thead&gt; ...
复制链接

扫一扫