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

最新推荐文章于 2024-03-01 20:41:54 发布

卜凡.

最新推荐文章于 2024-03-01 20:41:54 发布

阅读量3.1k

点赞数 3

分类专栏： Educoder刷题文章标签： html visual studio code

本文链接：https://blog.csdn.net/weixin_45784564/article/details/117125310

版权

任务描述

本关任务是编写一个日常消费账单表格展示网页，你将通过本关学习如何使用HTML编写出简洁清晰的表格。

本关网页显示效果如下图所示：
在这里插入图片描述

编程要求

请在右侧的编辑器中直接编辑修改HTML页面，具体要求是：

设置表格总体宽度(width)为400；

在第33行设置表标题，内容为“日常消费账单”；

在表格头部，第37-39行中添加，scope属性，值设置为col；

补全表80-82数据行的标签内容；

添加<tfoot>元素，将总计一行作为表尾。

测试说明

生活是一种律动，须有光有影，有左有右，有晴有雨，趣味就在这变而不猛的曲折里，微微暗些，再明起来，则暗得有趣，而明乃更明。
在这里插入图片描述
恭喜你完成本关，如果觉得有收获，就在下面点个赞吧！

源码

<!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;
    }

    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=&

最低0.47元/天解锁文章

卜凡.

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
第3关：HTML表格：日常消费账单表格展示网页

目录任务描述编程要求测试说明源码任务描述本关任务是编写一个日常消费账单表格展示网页，你将通过本关学习如何使用HTML编写出简洁清晰的表格。本关网页显示效果如下图所示：编程要求请在右侧的编辑器中直接编辑修改HTML页面，具体要求是：设置表格总体宽度(width)为400；在第33行设置表标题，内容为“日常消费账单”；在表格头部，第37-39行中添加，scope属性，值设置为col；补全表80-82数据行的标签内容；添加<tfoot>元素，将总计一行作为表尾。测试说明生活是
复制链接

扫一扫