长表格

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

有一些特殊情况下,需要绘制比较长的表格,例如一年的资金流水记账表等,此时就需要将表格分为三个部分,分别是表头、表格主体和表格底部。

在HTML中有三个标签:

  • thead 表头
  • tbody 表格主体
  • tfoot 表格底部

这三个标签的作用,就是区分表格不同的部分,它们都是table的子标签,都需要写在<table></table>中。
tr则写在<thead></thead><tbody></tbody><tfoot></tfoot>中。

  • thead中的内容,永远都会显示在表格的头部
  • tfoot中的内容,永远都会显示在表格的底部
  • tbody中的内容,永远都会显示在表格的中间

例如:

<!-- 代码片段 -->
<table>
    <thead>
        <tr>
            <td>日期</td>
            <td>收入</td>
            <td>支出</td>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>合计</td>
            <td>若干元</td>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>2018/1/1</td>
            <td>300</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2018/1/2</td>
            <td>300</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2018/1/3</td>
            <td>300</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2018/1/4</td>
            <td>300</td>
            <td>100</td>
        </tr>
    </tbody>
</table>

需要注意的是,如果表格没有编写tbody,那么浏览器会自动在表格中添加tbody,并且将所有的tr放入tbody中。

例如:

<!-- CSS -->
<style>
    table>tr{    }
</style>

<!-- HTML -->
<table>
    <tr></tr>
    <tr></tr>
    <tr></tr>
</table>

此时table > tr不能选中tr,因为trtbody的子元素,所以需要使用tbody > tr

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/62.html