Excel表格样式

最新推荐文章于 2025-05-22 06:02:22 发布

dieshitun4694

最新推荐文章于 2025-05-22 06:02:22 发布

阅读量107

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/lj9837/p/3170736.html

版权

本文详细介绍如何使用HTML和CSS创建类似Excel的学生成绩表格，包括居中对齐、表格边框、隔行变色及输入框设计等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <style type="text/css">
            body{
                 margin:0px;
                 padding: 0px;
                 text-align:center;
            }
            #container{
                margin: 0 auto;
                width:700px;
                text-align: left;
                position: relative;
                
            }
            .datalist{
                border: 1px solid black;
                border-collapse:collapse;
                text-align:center;
                width:100%;
            }
            .datalist caption{
                text-align: center;
                font-weight:bold;
                font-size:20px;
            }
            .datalist th{
                border: 1px solid black;
                text-align: center;
                font:bold;
            }
            .datalist td{
                border: 1px solid black;
                text-align: center;
                padding: 0px;
                margin:0px;
            }
            .datalist input{
                padding: 1px 3px;
                margin:0px;
                border:none;
                width: 90%;
            }
            tr.altrow{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <form action="" method="get">
        <div id="container">
        <table class="datalist">
            <caption>学生成绩表</caption>
            <tr>
                <th>&nbsp;</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr>
            <tr>
                <th>张三</th>
                <td><input type="text" name="input1" /></td>
                <td><input type="text" name="input2" /></td>
                <td><input type="text" name="input3" /></td>
            </tr>
            <tr>
                <th>李四</th>
                <td><input type="text" name="input4" /></td>
                <td><input type="text" name="input5" /></td>
                <td><input type="text" name="input6" /></td>
            </tr>
            <tr >
                <th>王五</th>
                <td><input type="text" name="input7" /></td>
                <td><input type="text" name="input8" /></td>
                <td><input type="text" name="input9" /></td>
            </tr>
        </table>
        <input type="submit" name="input1" value="提交"/>
        </div>
        </form>
    </body>
</html>

效果如图：

跟Excel差不多了吧，分数是输入的哦，包含的内容有居中、表格边框、隔行变色、输入框不显示等。

转载于:https://www.cnblogs.com/lj9837/p/3170736.html