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

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

大学的时候学过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>