使用html语言实现学生成绩表展示

最新推荐文章于 2025-03-03 19:38:11 发布

狮子座的男孩

最新推荐文章于 2025-03-03 19:38:11 发布

阅读量8.3k

点赞数 15

分类专栏： # 前端实战与例子文章标签： html html5

本文链接：https://blog.csdn.net/weixin_43405300/article/details/114776728

版权

前端实战与例子专栏收录该内容

53 篇文章

订阅专栏

Ⅰ、问题描述：
简单使用html写学生成绩表；
Ⅱ实现过程如下：
1、运行软件VScode，亲测可实现；
2、运行代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6table</title>
    <!-- 
        CSS样式中的，将表格粗线修改为细线；
        
        在"<style></style>"中的代码是CSS的格式，没有其中的代码，
        那么表格会看起来比较粗，去除了之后比较细，可以试一下；
     -->
    <style>
        table,tr,td{
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <!-- 
        完整的表格结构：
        表格的标题标签：为caption;(也可以用<h1></h1>代替)
        表格的头标签：为thead(设计表头样式);
        表格的主体标签：tbody(表格主题样式)；
        表格的尾部标签：tfoot(设计表尾样式);

        同时，如果你没有定义写thead,tfoot标签，那么默认表格里会是tbody;

     -->
     <!--
     其中的border="1"的作用是：使得表格有外边框；
     -->
    <table border="1">
        <caption>学生成绩表</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>成绩</th> 
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>100</td>
                <td>张三</td>
                <td>计科1</td>
                <td>90</td>
            </tr>
            <tr>
                <td>101</td>
                <td>王伟</td>
                <td>计科2</td>
                <td>80</td>
            </tr>
        </tbody>  
        <tfoot>
            <tr>
            <!-- 
        表格中的合并单元格；
        "<td rowspan="2">"意思：跨行合并单元格；
        "<td colspan="2">"意思：跨列合并单元格；

            -->
                <td colspan="3">sum</td>
                <td>..</td>
            </tr>
        </tfoot>
    </table>
</body>

</html>

3、结果展示：
A、无border="1"的展示结果：
在这里插入图片描述
B、无如下代码的情况下结果展示：

    <style>
        table,tr,td{
            border-collapse: collapse;
        }
    </style>

在这里插入图片描述
C、正常运行出来的结果：