◎筱米加步枪◎.Blog

Happy coding

HTML标签〈tbody〉浅谈

今天在做一个简单菜单...效果如图:


原先,是在子菜单选项里面套个<div>..用div里面的style:display属性来设置它的显隐性(后来发现原来<td>里面也有这个东东)....

 这样做的一个不好的地方就是:必须去控制每个子菜单选项的显隐性。。

 

经实验老师得知:发现了<tbody>这个东东,,更改后的实现过程如下:

一个<tbody>将套着每一类菜单的所有子菜单,比如上面的 [ 商品类别管理 ]、[ 商品信息管理 ] 可以全部放到一个<tbody>下面,同样利用<tbody>的style:display属性来控制显隐性,这样得到的效果就是大家一起展开,一起收缩。而且效果和上面的方法也有点区别,

第一种:收缩的时候与下面的菜单还保持一定的间隔。

第二种:则没有。(不过不是很明显就是了)..

网上查了一些资料,发现有<thead> <tbody> <tfoot>这三个东东,这三个东东将表格分为:题头、正文和脚注。

请看这三段代码:

  1.     <thead>
  2.        <tr>
  3.            <td>头部(thead)</td>
  4.        </tr>
  5.     </thead>
  6.    
  7.     <tbody>
  8.        <tr>
  9.            <td>身体(tbody)</td>
  10.        </tr>
  11.     </tbody>
  12.  
  13.     <tfoot>
  14.        <tr>
  15.            <td>脚丫(tfoot)</td>
  16.        </tr>
  17.     </tfoot>
  18. </table>
  1.     <tbody>
  2.        <tr>
  3.            <td>身体(tbody)</td>
  4.        </tr>
  5.     </tbody>
  6.  
  7.     <tfoot>
  8.        <tr>
  9.            <td>脚丫(tfoot)</td>
  10.        </tr>
  11.     </tfoot>
  12.    
  13.     <thead>
  14.        <tr>
  15.            <td>头部(thead)</td>
  16.        </tr>
  17.     </thead>
  18. </table>
  1.     <tfoot>
  2.        <tr>
  3.            <td>脚丫(tfoot)</td>
  4.        </tr>
  5.     </tfoot>
  6.        
  7.     <tbody>
  8.        <tr>
  9.            <td>身体(tbody)</td>
  10.        </tr>
  11.     </tbody>
  12.  
  13.     <thead>
  14.        <tr>
  15.            <td>头部(thead)</td>
  16.        </tr>
  17.     </thead>
  18. </table>

  这三段代码<thead> <tbody> <tfoot> 的顺序都不相同,但是 这三段代码运行的结果是 一模一样的。。

  因此可以得知:当注明<thead> <tbody> <tfoot>之后(默认的是<tbody>),结果总是依次按照<thead><tbody><tfoot>顺序来显示的。