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

表格的头部和尾部

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

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

查看吧~~~



 

猜你喜欢

转载自octopole.iteye.com/blog/2315891