首页 > Web开发 > 详细

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

时间:2016-07-30 10:37:05      阅读:125      评论:0      收藏:0      [点我收藏+]

表格的头部和尾部

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

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

 

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

<table>
 
  <thead>
    <tr>
        ...
    </tr>
  </thead>
 
  <tfoot>
    <tr>
        ...
    </tr>
  </tfoot>
 
  <tbody>
    <tr>
        ...
    </tr>
  </tbody>
 
</table>

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

<!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

技术分享

 

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

原文:http://www.cnblogs.com/malimalihong/p/5720355.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!