HTML学习笔记1.17-表格的头部与尾部

最新推荐文章于 2023-12-11 16:39:02 发布

chenjin19961001

最新推荐文章于 2023-12-11 16:39:02 发布

阅读量339

点赞数

原文链接：https://my.oschina.net/mayacoder/blog/718795

版权

表格的头部和尾部

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

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/lesson/lesson?lesson_id=31&knowledge_id=12

转载于:https://my.oschina.net/mayacoder/blog/718795

chenjin19961001

关注

0
点赞
踩
0

收藏

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

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

扫一扫