第4关：HTML表格：日常消费账单表格展示网页

最新推荐文章于 2024-09-11 14:09:02 发布

白马过平川-m0_73143451

最新推荐文章于 2024-09-11 14:09:02 发布

阅读量551

点赞数 9

分类专栏： Educoder刷题文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_73143451/article/details/136405547

版权

Educoder刷题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <!--------- Begin-------->

<head>
    <meta charset="utf-8">
    <title>HTML表格</title>
    <meta name="description" content="HTML表格知识讲解">
    <meta name="keywords" content="HTML,表格, Table">
    <style type="text/css">
    table {
        border-collapse: collapse;
        width:400;
    }

    caption {
        font-weight: bold;
        margin-bottom: .5em;
    }

    th,
    td {
        padding: .5em .75em;
        border: 1px solid #000;
    }

    tfoot {
        font-weight: bold;
    }
    </style>
</head>

<body>
    <table border="1" style="margin:auto"width="400">
        <caption>日常消费账单</caption>
        <thead>
            <!-- 表格头部 -->
            <tr>
                <th align="left"scope="col">消费项目</th>
                <th align="right"scope="col">一月</th>
                <th align="right"scope="col">二月</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格主体 -->
            <tr>
                <th align="left" scope="row">食品烟酒</th>
                <td align="right">￥1241.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">衣物</th>
                <td align="right">￥330.00</td>
                <td align="right">￥594.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">居住</th>
                <td align="right">￥2100</td>
                <td align="right">￥2100</td>
            </tr>
            <tr>
                <th align="left" scope="row">生活用品及服务</th>
                <td align="right">￥700.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">医疗保健</th>
                <td align="right">￥150.00</td>
                <td align="right">￥50.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">教育、文化和娱乐</th>
                <td align="right">￥1030.00</td>
                <td align="right">￥1250.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">交通和通信</th>
                <td align="right">￥230.00</td>
                <td align="right">￥650.00</td>
            </tr>
            <tr>
                <th align="left" scope="row">其他用品和服务</th>
                <td align="right">￥130.40</td>
                <td align="right">￥150.00</td>
            </tr>
        </tbody>
        <tfoot>
            <!-- 表格尾部 -->
            <tr>
                <th align="left" scope="row">总计</th>
                <th align="right">￥5911</th>
                <th align="right">￥6694</th>
            </tr>
        </tfoot>
    </table>
</body>
  <!--------- End-------->

</html>