Excel表格样式

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