table的thead/tbody/tfoot/tr/th/td

2011-07-10 14:21:39|  分类： Web开发|举报|字号 订阅

       为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用tbody可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。

tbody包含行的内容下载完优先显示，不必等待表格结束.另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就"从头到脚"显示，不管你的行代码顺序如何。也就是说如果thead写在了tbody的后面，html显示时，还是以先thead后tbody显示。

table中的thead/tbody/tfoot/tr/th/td的包含关系：

<table> 
    <thead> 
        <tr> 
        <th>这是在thead->tr->th里面</th> 
            <td>这是在thead->tr->td里面</td> 
        </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <th>这是在thead->tr->th里面</th> 
            <td>这是在thead->tr->td里面</td> 
        </tr> 
    </tbody> 
    <tfoot> 
        <tr> 
            <th>这是在thead->tr->th里面</th> 
            <td>这是在thead->tr->td里面</td> 
        </tr> 
    </tfoot> 
</table> 
<table>
 <thead>
     <tr>
     <th>这是在thead->tr->th里面</th>
            <td>这是在thead->tr->td里面</td>
        </tr>
    </thead>
    <tbody>
     <tr>
      <th>这是在thead->tr->th里面</th>
            <td>这是在thead->tr->td里面</td>
        </tr>
    </tbody>
    <tfoot>
     <tr>
      <th>这是在thead->tr->th里面</th>
            <td>这是在thead->tr->td里面</td>
        </tr>
    </tfoot>
</table>

其中thead/tbody/tfoot可省略

 

<table>是<tr>的上层标签
<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签.  
<table>标示一个表格,<tr>标示这个表格中间的一个行  
<td>标示行中的一个列,需要嵌套在<tr></tr>中间

具体格式是:(两行两列)  
<table>  
<tr>  
<td></td>  
<td></td>  
</tr>  
</teble>

<th>和<td>一样,也是需要嵌套在<tr>当中的,<tr>嵌套在<table>当中

<table>...</table> 用于定义一个表格开始和结束

<th>...</th> 定义表头单元格。表格中的文字将以粗体显示（<TH>与<TD>同样是标示一个储存格,唯一不同的是<TH>所标示的储存格中的文字是以粗体出现,即可以这样看：
<th>文字</th>=<td><b>文字</b></td>
），
在表格中也可以不用此标签，<th>标签必须放在<tr>标签内

<tr>...</tr> 定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格

<td>...</td> 定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内

。<th>为表格标题，属性summar为摘要，<caption>标签为首部说明，<thead>标签为表格头部，<tbody>标签为表格主体内容，<tfoot>标签为表格尾部。
其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：
　row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。
　col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。
　rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。
　colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。
标准表格模型
 <table>
        <caption></caption>
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
            </tr>
        </tfoot>
    </table>

相关：

<th>不光是粗体，还是居中的
<caption>也是居中的，而且如果table有border的话则caption不在border之内
TFOOT 元素内包含的有效标签有：  
TD  
TH  
TR  
任何给定的 table 对象都只能定义一个 tFoot。