前端的学习之路：初级HTML---长表格

最新推荐文章于 2022-07-14 12:18:51 发布

new-SkyWaller

最新推荐文章于 2022-07-14 12:18:51 发布

阅读量108

点赞数

分类专栏：初级HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113529608

版权

初级HTML 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

长表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长表格</title>
</head>

<body>
    <!-- 
        可以将一个表格分成三个部分：
            头部：thead
            主体：tbody
            底部：tfoot

            th 表示头部得单元格
            可用th替换td
     -->
    <table border="1" width="50%" align="center">
        <thead>
            <tr>
                <td>日期</td>
                <td>收入</td>
                <td>支出</td>
                <td>合计</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.2</td>
                <td>600</td>
                <td>200</td>
                <td>400</td>
            </tr>
            <tr>
                <td>2000.1.3</td>
                <td>700</td>
                <td>200</td>
                <td>500</td>
            </tr>
            <tr>
                <td>2000.1.4</td>
                <td>400</td>
                <td>100</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>1500</td>
            </tr>
        </tfoot>
    </table>

</body>

</html>

运行结果为：
在这里插入图片描述

new-SkyWaller

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的学习之路：初级HTML---长表格

长表格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>长表格</title></head><body> <!--
复制链接

扫一扫