zoukankan      html  css  js  c++  java
  • table标签中thead、tbody、tfoot的作用

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用TBODY可以优化显示。如果表格很长,用tbody分段,可以一部分一部分地显示,不用等整个表格都下载完成。下载一块显示一块,表格巨大时有比较好的效果。
        tbody、tfoot、thead一般来说用得不是很多,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用: thead, tbody, tfoot来标注。
    thead 表格的头        用来放标题之类的东西
    tbody 表格的身体    放数据本体 
    tfoot  表格的脚       放表格的脚注之类
    我觉得最直接的用处是:   
      TBODY包含行的内容下载完优先显示,不必等待表格结束.另外,还需要注意一个地方。表格行本来是从上向下显示的。但是,应用了thead/tbody/tfoot以后,就“从头到脚”显示,不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面,html显示时,还是以先thead后tbody显示。
    给出一个实例:

    <TABLE> 
     <THEAD> 
      <TR> 
       <TD> 
       This text is in the THEAD. 
       </TD> 
      </TR> 
     </THEAD> 
     <TBODY> 
      <TR> 
       <TD> 
       This text is in the TBODY. 
       </TD> 
      </TR> 
     </TBODY> 
     <TFOOT> 
      <TR> 
       <TD> 
       This text is in the table footer. 
       </TD> 
      </TR> 
     </TFOOT> 
    </TABLE>

    <THEAD ...><TBODY ...>, and <TFOOT ...> establish groups of rows. <THEAD ...> indicates that a group of rows are the header rows at the top of the table. <TBODY ...>indicates that a group of rows are body rows. <TFOOT ...> indicates that a group of rows are the footer rows at the bottom of the table.

    The most popuplar use for these three tags, which are currently only recognized by MSIE 4 and up, is to put borders between groups of rows instead of between every row. For example, suppose you have a table in which you want borders around the top row, the bottow row, and around the entire block of rows in between. You could do that with the following code. rules=Groups不必写。

    <TABLE CELLPADDING=6 RULES=GROUPS  FRAME=BOX>
    
    <THEAD>
    <TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
    </THEAD>
    
    <TBODY>
    <TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
    <TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
    <TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
    <TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
    <TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
    <TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
    <TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
    </TBODY>
    注意还可以增加<tbody> </tbody> 多组tbody
    <TFOOT> <TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR> </TFOOT> </TABLE>

    which gives us this table:

    WeekdayDateManagerQty
    Mon 09/11 Kelsey 639
    Tue 09/12 Lindsey 596
    Wed 09/13 Randy 1135
    Thu 09/14 Susan 1002
    Fri 09/15 Randy 908
    Sat 09/16 Lindsey 371
    Sun 09/17 Susan 272
    Total4923

    You should use at most one <THEAD ...> or <TFOOT ...>, but you can use multiple <TBODY ...>'s. For example, the following code has several <TBODY ...>'s to create multiple groups of data:

    <th>代表table heading. <thead>中用<th>较好。

    我们可以再table后增加一个<CAPTION>...</CAPTION>.

    The CAPTION element defines a table caption. When used, CAPTION must be the first element in the TABLE. Only inline elements (e.g.STRONG) may be used within CAPTION.

  • 相关阅读:
    常用录屏工具
    python常用工具库介绍
    修改anaconda3 jupyter notebook 默认路径
    【转载】面试那些事【三】
    【转载】面试那些事【二】
    【转载】面试那些事【一】
    Myeclipse 激活代码 8.6以前的版本
    ddd
    Java 算法
    Java 水仙花数
  • 原文地址:https://www.cnblogs.com/youxin/p/2647407.html
Copyright © 2011-2022 走看看