A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 不二晨 金牌黑马   /  2019-1-18 09:53  /  499 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

长表格

有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部
                在HTML中为我们提供了三个标签:
                        thead 表头
                        tbody 表格主体
                        tfoot 表格底部

这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中
1
thead中的内容,永远会显示在表格的头部
tfoot中的内容,永远都会显示表格的底部
tbody中的内容,永远都会显示表格的中间
1
2
3
如果表格中没有写tbody,浏览器会自动在表格中添加tbody
并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素
通过table > tr 无法选中行 需要通过tbody > tr
1
2
3
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>长表格</title>
</head>
<body>
        <table>
                <!--
                有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部
                在HTML中为我们提供了三个标签:
                        thead 表头
                        tbody 表格主体
                        tfoot 表格底部
                       
                这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中
                       
                thead中的内容,永远会显示在表格的头部
                tfoot中的内容,永远都会显示表格的底部
                tbody中的内容,永远都会显示表格的中间
               
                如果表格中没有写tbody,浏览器会自动在表格中添加tbody
                并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素
                通过table > tr 无法选中行 需要通过tbody > tr
                -->
                <thead>
                        <tr>
                                <th>日期</th>
                                <th>收入</th>
                                <th>支出</th>
                                <th>合计</th>
                        </tr>
                </thead>

                <tfoot>
                        <tr>
                                <td></td>
                                <td></td>
                                <td>合计</td>
                                <td>100</td>
                        </tr>
                </tfoot>

                <tbody>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                        <tr>
                                <td>2017.03.01</td>
                                <td>500</td>
                                <td>300</td>
                                <td>2000</td>
                        </tr>
                </tbody>
        </table>
</body>
</html>

表格布局

以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了
表格的列数由td最多的那行决定
表格是可以嵌套,可以在td中在放置一个表格
1
2
3
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>表格的布局</title>
</head>
<body>
        <!--
        以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了
        表格的列数由td最多的那行决定
        表格是可以嵌套,可以在td中在放置一个表格
        -->
        <table border="1" width="100%">
                <tr height="100px">
                        <td colspan="2"></td>
                </tr>
                <tr height="400px">
                        <td width="20%"></td>
                        <td width="80%">
                                <table border="1" width="100%" height="100%">
                                        <tr>
                                                <td></td>
                                        </tr>
                                        <tr>
                                                <td></td>
                                        </tr>
                                </table>
                        </td>
                </tr>
                <tr height="100px">
                        <td colspan="2"></td>
                </tr>
        </table>
</body>
</html>
---------------------
【转载,仅作分享,侵删】
作者:YRyr.*
原文:https://blog.csdn.net/weixin_43152725/article/details/85537149


2 个回复

倒序浏览
奈斯,感谢分享
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马