<!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> </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差不多了吧，分数是输入的哦，包含的内容有居中、表格边框、隔行变色、输入框不显示等。