`

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

    博客分类:
  • HTML
阅读更多

表格的头部和尾部

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

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

 

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

Html代码 
  1. <table>    
  2.      
  3.   <thead>    
  4.     <tr>    
  5.         ...    
  6.     </tr>    
  7.   </thead>    
  8.      
  9.   <tfoot>    
  10.     <tr>    
  11.         ...    
  12.     </tr>    
  13.   </tfoot>    
  14.      
  15.   <tbody>    
  16.     <tr>    
  17.         ...    
  18.     </tr>    
  19.   </tbody>    
  20.      
  21. </table>    

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

Html代码 
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <head>    
  4.     <meta charset="UTF-8">    
  5.     <title>使用thead和tfoot标签</title>    
  6. </head>    
  7. <body>    
  8.     <h2>使用thead和tfoot标签</h2>    
  9.     <table border="1">    
  10.         <thead>    
  11.             <tr><td>序号</td><td>物品</td><td>价格</td></tr>    
  12.         <tbody>    
  13.             <tr><td>1、</td><td>铅笔</td><td>¥1.00</td></tr>    
  14.             <tr><td>2、</td><td>毛笔</td><td>¥5.00</td></tr>    
  15.             <tr><td>3、</td><td>钢笔</td><td>¥10.00</td></tr>    
  16.         </tbody>    
  17.         <tfoot>    
  18.             <tr><td colspan="2">总计:</td><td>¥16.00</td></tr>    
  19.     </table>    
  20. </body>    
  21. </html>    

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

查看吧~~~



 

  • 大小: 4.9 KB
0
2
分享到:
评论
1 楼 octopole 2016-08-06  
have a try

相关推荐

    html&css;韩顺平笔记---HTML部分.ppt

    本课件为韩顺平老师的HTML CSS JS 课程中的笔记整理,注意是截图版的 如需要下载文字版的请绕道 估计网上也找不到文字版的 本教程适合电脑复习用的

    学习笔记HTML-css-JS.zip

    学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...

    HTML CSS JS 学习、git-笔记.zip

    HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS 学习、git-笔记 HTML CSS JS 学习、git-笔记HTML CSS JS ...

    HeadFirst HTML&amp;CSS学习笔记.zip

    CSS学习笔记HeadFirst HTML&amp;CSS学习笔记 HeadFirst HTML&amp;CSS学习笔记HeadFirst HTML&amp;CSS学习笔记 HeadFirst HTML&amp;CSS学习笔记HeadFirst HTML&amp;CSS学习笔记 HeadFirst HTML&amp;CSS学习笔记Head...

    JavaWeb新版教程-html&CSS-L和CSS-表格的跨行跨列.avi

    JavaWeb新版教程-html&CSS-L和CSS-表格的跨行跨列.avi

    学习html&amp;css的笔记.zip

    css的笔记学习html&amp;css的笔记学习html&amp;css的笔记 学习html&amp;css的笔记学习html&amp;css的笔记学习html&amp;css的笔记 学习html&amp;css的笔记学习html&amp;css的笔记学习html&amp;css的笔记 学习html&amp...

    jihong10102006#blog#07、CSS基础笔记02----对齐方式1

    title: 07、CSS基础笔记02----对齐方式tags: CSDN迁移上对齐中对齐下对齐。

    html与css的学习笔记与练习.zip

    html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与练习 html与css的学习笔记与练习html与css的学习笔记与...

    HTML & CSS设计与构建网站 完整中文版带目录.pdf

    HTML & CSS设计与构建网站 完整中文版带目录.pdf 个人收集电子书,仅用学习使用,不可用于商业用途,如有版权问题,请联系删除! 前言 v 第1章 结构 1 第2章 文本 29 第3章 列表 51 第4章 链接 63 第5章 图像 ...

    html&css;学习14-浮动.html

    html&css; 学习14 的源码 主要内容为浮动,包含三个html

    html css js 学习笔记.zip

    html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...

    html+css前端学习笔记.zip

    html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...

    html&css;&JavaScript;基础笔记

    ### HTML & CSS & JavaScript 基础笔记 #### HTML 基础 ##### Head 中常用的标签 HTML 文档头部 `&lt;head&gt;` 包含了关于网页的一些元数据信息,这些信息通常不会直接显示在网页上,但对浏览器和其他处理 HTML 文档的...

    HTML&CSS 设计与构建网站_PDF电子书下载 带书签目录 完整版

    HTML(HyperText Markup ...通过阅读《HTML&CSS 设计与构建网站》这本书,你可以深入学习这两个重要技术的细节,提升网页设计技能。书中的书签目录将帮助你快速定位到所需的主题,完整版确保你能获取全面的信息。

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】

    尚硅谷(李立超)——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用,小编自己整理的李立超老师视频的笔记,手打不易,那就望您每年快乐吧。逃) 一、进制 1.十进制(日常使用): 特点:满10进1 计数:0 1 ...

    HTML+CSS学习笔记.zip

    HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip

    Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...

    Web设计与前端开发秘籍:HTML & CSS 设计与构建网站(完整清晰版)

    《Web设计与前端开发秘籍:HTML & CSS 设计与构建网站》是一本深受读者喜爱的高分图书,尤其对于初学者来说,是进入Web设计领域的绝佳起点。这本书以其完整清晰的内容,深入浅出地讲解了HTML和CSS的基础以及高级应用...

    html+css+js学习笔记.zip

    html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记html+css+js学习笔记 html+css+js学习笔记html+css+js学习笔记...

Global site tag (gtag.js) - Google Analytics