前端学习笔记(一)——HTML表格(table、tr、td、th、thead、tbody、tfoot标签)

  • 前端学习笔记(一)——HTML表格(table、tr、td、th、thead、tbody、tfoot标签)已关闭评论
  • 192 次浏览
  • A+
所属分类:Web前端
摘要

大学的时候学过web前端的课,但是主要是讲大框架,对于具体的一些概念没有讲那么细。最后交大作业项目就是用到啥了现场百度啥。

大学的时候学过web前端的课,但是主要是讲大框架,对于具体的一些概念没有讲那么细。最后交大作业项目就是用到啥了现场百度啥。

现在工作了,虽然也写了一些页面,接触了echarts,axios,也用过vue+elementui等等,但是发现很多前端的概念我并不懂,还是一知半解的状态。再加上最近是有考虑这两年要不要换个工作,打算开始学习前端,从基础开始。相信要是能坚持下去,哪怕不跳槽,也能帮助我后面更好更顺利地写前端。

主要在看黑马的前端宝典,根据上面的问题发散一下,主要是在纸质版资料上补充学习。有些不方便写在纸上的知识点也在这里也记录一下吧。


 

HTML表格(table、tr、td、th、thead、tbody、tfoot标签)

带结构的表格分为表头、主体、脚注。

thead:表格的头部

tbody:表格的主体

tfoot:表格的脚部

这三个标签需要同时使用。

 1 <!DOCTYPE html>  2 <html>  3 <head>  4     <title>带结构的表格</title>  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  6 </head>  7 <body>      8      <!--创建带结构的表格,表格划分为:表头、主体、脚注 -->  9      <!--thead:表格的头部 --> 10      <!--tbody:表格的主体 --> 11      <!--tfoot:表格的脚部 --> 12      <table> 13          <caption>表格标题</caption>  <!--caption:标题标签,居中显示,仅有一个标题--> 14          <thead> 15              <tr>  <!-- tr:表格中的行 --> 16                <th>表头</th>  <!--th:表格头,内容居中,加粗显示--> 17              </tr> 18          </thead> 19          <tbody> 20              <tr> 21                <td>主体</td>   <!--td:普通表格,内容左对齐-->            22              </tr> 23          </tbody> 24          <tfoot> 25              <tr> 26                  <td>脚注</td> 27              </tr> 28          </tfoot> 29      </table> 30   31 </body> 32 </html>                

2022-08-1815:53:03