thead tbody tfoot

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了thead tbody tfoot相关的知识,希望对你有一定的参考价值。

thead用来放标题之类的
tbody放数据本体
tfoot放表格的脚注之类那么怎么具体的使用

Tbody这个标记符是对于表格来说的,每个页面都有head ,body两部分,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。
thead用来放标题之类的东西 tbody放数据本体 tfoot放表格的脚注之类…… 标签使用其本身所代表的含义。这就是他们的作用。(thead表格的头
tbody表格的身体
tfoot表格的脚)
TBody是在table中使用的,用来指明由它包括的各表格行做为表格的主体部分。
TBody与THead和TFoot在表格中形成三个“块”,THead指明表格的Head部分,TFoot指明表格的脚注部分。而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>
参考技术A Tbody这个标记符是对于表格来说的,每个页面都有head ,body两部分,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。
thead用来放标题之类的东西 tbody放数据本体 tfoot放表格的脚注之类…… 标签使用其本身所代表的含义。这就是他们的作用。(thead表格的头
tbody表格的身体
tfoot表格的脚)
TBody是在table中使用的,用来指明由它包括的各表格行做为表格的主体部分。
TBody与THead和TFoot在表格中形成三个“块”,THead指明表格的Head部分,TFoot指明表格的脚注部分。而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>

前端表格table


表格的标签:
table:一个表格区域
thead:表头区
tbody:表内容区
tfoot:表底区
thead、tbody、tfoot的分区,用于方便区分,可以不写

tr:一个表格行
th:一个表头格
td:一个表内容格
通常,tr放在thead、tbody、tfoot里面,th、td放在tr里面。
例如:

    <table border="1">
        <caption><b>学员信息表</b></caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>Jack</td>
                <td>1</td>
            </tr>
            <tr>
                <td>02</td>
                <td>Max</td>
                <td>1</td>
            </tr>
            <tr>
                <td>03</td>
                <td>Van</td>
                <td>2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>04</td>
                <td>John</td>
                <td>3</td>
            </tr>
            <tr>
                <td>05</td>
                <td>Lucy</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>

表格的属性:
rowspan :跨行合并,该单元格向下合并n行,在下面的行中,会自动跳过该列,注意排版
colspan :本行合并,该单元格向右合并n列,注意排版

例如:

    <table border="1">
        <caption><b>学员信息表</b></caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td rowspan="2">Jack</td>
                <td>1</td>
            </tr>
            <tr>
                <td>02</td>
                <!--<td>Max</td>-->
                <td>1</td>
            </tr>
            <tr>
                <td colspan="2">03</td>
                <!--<td>Van</td>-->
                <td>2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>04</td>
                <td rowspan="2" colspan="2">John</td>
                <!--<td>3</td>-->
            </tr>
            <tr>
                <td>05</td>
                <!--<td>Lucy</td>-->
                <!--<td>3</td>-->
            </tr>
        </tfoot>
    </table>

表格的样式:
border-collapse:
collapse 边框合并,如果相邻的话,共用一个框
separate 默认值,边框分开,不合并
例如:

    <style>
        table{
            width: 200px;
            height: 200px;
            border-collapse: collapse;
        }
    </style>

 

以上是关于thead tbody tfoot的主要内容,如果未能解决你的问题,请参考以下文章

thead 和 tbody 之间的间距

thead固定tbody滚动

在滚动tbody和thead列与tbody列对齐时修复表头

thead,tbody,tfoot标签的使用

请问HEAD标签和THEAD,BODY和TBODY,能否互换???为啥?

html中th与thead的详细区别