HTML做个数据录入的模板。如下参考：
1、首先新建一个html，点击<body></body>中间，先填入表格内容：
2.内容可根据要求编写，示例代码如下：
<table>
<p style="text-align:center ">功课表</p>
<tr>
<th>语文</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
<tr>
<th>数学</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
<tr>
<th>英文</th>
<td>7:00-7:40</td>
<td>7:50-8:30</td>
</tr>
</table>
3.然后在<head></head>中间输入样式表的样式，如下图：
4.样式也可以根据个人需要设置，设置单元格的宽度高度，合并单元格，位置，颜色等，示例代码如下：
<style type="text/css">
body
{
width:340px
height:800px
}
table
{
border-collapse:collapse
}
th,td
{
width:100px
height:40px
border:1pxsolidblack
font-size:12px
text-align:center
}
</style>
5.注意，此代码“table的意思是表”的含义是将表边框合并为单个边框以合并相邻的更改。
6.预览结果如下图所示，一个制作简单的HTML模板。
这种模板很多的，百度打开一个网页右键源代码就能找到了。<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-57.png" sizes="57x57" rel="apple-touch-icon">
<link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon">
<link href="{dede:global.cfg_templets_skin/}/images/apple-touch-icon-114.png" sizes="114x114" rel="apple-touch-icon">
<title>{dede:global.cfg_webname/}</title>
<meta name="keywords" content="{dede:global.cfg_keywords/}">
<meta name="description" content="{dede:global.cfg_description/}">
<link href="{dede:global.cfg_templets_skin/}/style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/jquery-1.9.1.js"></script>
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/style/theme_trust.js"></script>
<style type="text/css">
html,
body {
margin: 0
padding: 0
}
.iw_poi_title {
color: #CC5522
font-size: 14px
font-weight: bold
overflow: hidden
padding-right: 13px
white-space: nowrap
}
.iw_poi_content {
font: 12px arial, sans-serif
overflow: visible
padding-top: 4px
white-space: -moz-pre-wrap
word-wrap: break-word
}
</style>
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/main.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('#openSidebar').click(function() {
jQuery('.wrapper').toggleClass('openNav')
})
jQuery('#menu a').click(function() {
jQuery('.wrapper').removeClass('openNav')
})
})
</script>
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/api"></script><script type="text/javascript" src="{dede:global.cfg_templets_skin/}/getscript"></script><link rel="stylesheet" type="text/css" href="{dede:global.cfg_templets_skin/}/bmap.css">
<style type="text/css">
html,
body,
wrapper {
height: 100%
}
</style>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<div class="clearfix k1120">
<div class="navBox" id="openSidebar">
<a href="javascript:void(0)" class="navOpen"></a>
</div>
<div id="menu">
<ul class="clearfix">
<li><a href="#home" class="nav_home current"><span>首页<br /><b>Home</b></span></a>
</li>
<li><a href="#services" class="nav_services"><span>服务范围<br /><b>Services</b></span></a>
</li>
<li><a href="#case" class="nav_case"><span>案例展示<br /><b>Case</b></span></a>
</li>
<li><a href="#about" class="nav_about"><span>关于我们<br /><b>About us</b></span></a>
</li>
<li><a href="#news" class="nav_news"><span>新闻动态<br /><b>News</b></span></a>
</li>
<li><a href="#contact" class="nav_contact"><span>联系我们<br /><b>Contact us</b></span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="pageMain">
<div id="header">
<div class="k1120 clearfix"><a href="{dede:global.cfg_basehost/}" id="logo">logo</a>
</div>
</div>
<div id="home" class="scrol-page">
<div class="banner">
<div class="b_1" style="background-position: 50% 0px">
<div class="k1120 clearfix">
<div class="b_pic">
<div class="mac" style="margin-top: 0pxopacity: 1"><img src="{dede:global.cfg_templets_skin/}/images/mac.png">
</div>
<div class="iphone" style="margin-top: 0pxopacity: 1"><img src="{dede:global.cfg_templets_skin/}/images/iphone.png">
</div>
<div class="ipad" style="margin-top: 0pxopacity: 1"><img src="{dede:global.cfg_templets_skin/}/images/ipad.png">
</div>
</div>
<div class="b_text" style="margin-top: 0pxopacity: 1">
{dede:global.cfg_ggg/}
</div>
</div>
</div>
</div>
<div class="banner">
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height:500px
background: linear-gradient(#A6CADE,#F8C6F8) no-repeat
}
ul,li,div {
padding:0margin:0
}
.container{
width: 500px
margin:0 auto
}
#tab-con div{
display: none
width:500px
height:282px
}
#tab-con div img{
width: 100%
height:100%
}
#tab-con div.active{
display: block
}
#tab-list ul li{
float:left
list-style: none
}
#tab-list ul li a{
display: block
width:70px
text-align: center
text-decoration: none
color:#000
background: #D6D6D1
}
#tab-list ul li.active a{
color:#fff
background:#f96302
}
</style>
</head>
<body>
<div class="container">
<div id="tab-con">
<div class="active"><img src="img/test1.jpg"></div>
<div><img src="img/test2.jpg"></div>
<div><img src="img/test3.jpg"></div>
<div>图片4</div>
<div>图片5</div>
<div>图片6</div>
<div>图片7</div>
</div>
<div id="tab-list">
<ul>
<li><a href="javascript:">首页</a></li>
<li><a href="javascript:">美食</a></li>
<li><a href="javascript:">交通</a></li>
<li><a href="javascript:">图片4</a></li>
<li><a href="javascript:">图片5</a></li>
<li><a href="javascript:">图片6</a></li>
<li><a href="javascript:">图片7</a></li>
</ul>
</div>
</div>
<script>
var tablist = document.getElementById('tab-list').getElementsByTagName('li')
var tabcon = document.getElementById('tab-con').getElementsByTagName('div')
for(var i = 0 i<tablist.length i++){
tablist[i].onclick = function(){
starttab(this)
}
}
function starttab(obj){
for(var i = 0 i<tablist.length i++){
if(tablist[i] == obj){
tablist[i].className = "active"
tabcon[i].className = "active"
}else{
tablist[i].className = ""
tabcon[i].className = ""
}
}
}
</script>
</body>
</html>
