HTML&CSS基础学习笔记1.17-表格头部与尾部
程序员文章站
2022-03-28 09:29:35
...
表格的头部和尾部
既然有标签表示表格的主体，那么自然表格的头部和尾部也有对应的标签。
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/index
查看吧~~~
