码农03 2024-05-06 10:37 采纳率: 90.9%
浏览 20
已结题

web前端技术基础上机

案例5-3 表格的设计一、
案例描述 1
、考核知识点名 称：table样式属性2、练习目标掌握表格样式属性用法3、案例要求1）编写一个网页，命名为prj_5_3.html；2）网页的标题显示为“成绩单”；3）编写如图5-3所示页面。
样式说明：
· 表格：宽度600px、居中、单元格距离1px、文字居中、边框2px 实线 红色；
·tr：高度35px；
·td：宽度自定义、文字加粗；
·标题：黑体字、字体大小：size=6；
·表头字体蓝色，所有不及格的成绩标注红色

img

  • 写回答

4条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-05-06 10:37
    关注

    引自免费微信小程序：皆我百晓生

    为了帮助您实现这个案例，我将提供HTML和CSS代码示例，按照您的需求构建一个名为prj_5_3.html的网页。以下是完整的HTML文件内容：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        table {
            width: 600px;
            margin: 0 auto;
            border-collapse: collapse;
            border: 2px solid red;
        }

        th, td {
            text-align: center;
            padding: 1px;
            border: 1px solid black;
        }

        th {
            height: 35px;
            font-weight: bold;
            color: blue;
            font-size: 16px; /* size=6 对应于 CSS 中的 font-size: 16px */
        }

        td {
            font-weight: bold;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .不及格 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>学期成绩表</h1>
    <h2>第一学期成绩</h2>
    <table>
        <thead>
            <tr>
                <th 序号</th>
                <th 学号</th>
                <th 姓名</th>
                <th 英语</th>
                <th 高数</th>
                <th 学科导论</th>
                <th 就业</th>
                <th 总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>101</td>
                <td>王天</td>
                <td class="不及格">80</td>
                <td>36</td>
                <td>52</td>
                <td>78</td>
                <td>264</td>
            </tr>
            <tr>
                <td>2</td>
                <td>102</td>
                <td>孙航</td>
                <td>80</td>
                <td>56</td>
                <td>92</td>
                <td>72</td>
                <td>300</td>
            </tr>
            <tr>
                <td>3</td>
                <td>103</td>
                <td>张元</td>
                <td>55</td>
                <td>95</td>
                <td>76</td>
                <td>99</td>
                <td>292</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">课程平均分</td>
                <td>72</td>
                <td>62</td>
                <td>73</td>
                <td>72</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

    这段代码创建了一个符合您要求的HTML页面，包括一个带有指定样式的表格。请注意，我已根据您的描述添加了相应的CSS样式，并在需要的地方应用了红色标记以表示不及格的成绩。您可以将此代码保存为prj_5_3.html，然后在浏览器中打开查看效果。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

  • web前端第三版习题参考答案_.docx.docx
    2021-04-04 16:40
    【HTML基础】 ...网页由两部分构成：头部（）和...这些都是Web前端开发中不可或缺的部分，对于理解和创建基本的网页内容至关重要。通过练习和实际操作，可以进一步巩固这些知识点，并为更深入的前端学习打下坚实的基础。
  • Web前端开发职业技能等级标准
    2019-09-01 14:21
    Web前端开发是互联网技术领域中的重要分支，主要涉及用户界面的构建和实现，包括网站的视觉呈现和交互功能。随着互联网和移动互联网的快速发展，Web前端开发的技术和需求也在不断地演变和提升。为了适应这一变化，...
  • Web前端设计与开发技术课件第2章规划网站结构.pptx
    2022-11-18 11:20
    在Web前端设计与开发中，规划网站结构是至关重要的第一步。它涉及到网站的整体布局、目录结构和链接设计，这些都会直接影响到用户体验和网站的可维护性。下面将详细阐述这些关键知识点。 首先，规划网站结构需要在...
  • Web前端第一次作业
    2024-07-08 16:27
    Fantasy丶夜雨笙歌的博客 这个家伙什么也没留下
  • Web前端设计与开发技术课件第5章精美内容网页的制作.pptx
    2022-11-13 10:18
    "Web前端设计与开发技术课件第5章精美内容网页的制作" 本章主要介绍Dreamweaver CC 2018如何插入多媒体元素来设计精美内容网页，并掌握重复使用网页部分内容，从而提高内容网页的制作效率。学习目标包括网页复用、...
  • 1+X Web前端开发（初级）讲义
    2022-08-20 00:39
    - Web前端开发职业技能分为初级、中级、高级三个等级，初级是入门基础。 - 考试形式为闭卷上机考试，包括90分钟的理论考试（单选、多选、判断题）和150分钟的实操考试（案例分析、代码编写、网页展示等）。 - ...
  • Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx
    2022-11-14 01:14
    Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx 本资源是关于Web前端设计与开发技术的课件，第7章专门讲解制作表单页面的技术。表单是网页中收集信息的重要组件，可以用于调查、订购和搜索等多种场景。 ...
  • Web前端开发职业标准串讲（初级）初稿.pptx
    2020-01-03 15:09
    ### Web前端开发职业标准串讲（初级） #### 第一部分：Web前端开发职业简介...在掌握了这些基本概念和技术之后，学习者可以进一步探索更高级的Web前端技术，如响应式设计、前端框架（如React、Vue等）以及性能优化等。
  • web前端开发实践心得.docx
    2021-12-31 08:20
    本文总结了 Web 前端开发实践心得，涵盖了基础知识、JavaScript、CSS、布局模式、实践经验等方面的内容。下面是对标题、描述、标签和部分内容的详细解释： 基础知识 在 Web 前端开发方向实习中，学好基础知识是必...
  • Web前端开发技术第二版课后上机题（第四章）
    2022-04-16 22:04
    ASDFGHjilp的博客 前端开发第四章课后上机练习题
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 5月14日
  • 已采纳回答 5月6日
  • 创建了问题 5月6日