HTML制作WORD表格

效果图

table属性

align：让内容居中，取值为left、right、center
border：设置表格的边框
cellspacing：单元格与单元格之间的距离
bgcolor：表格的背景色
colspan：跨列数
rowspan：跨行数

HTML代码

<table class="table" style="100%;height:100%;border:1px solid;align:center;font-size:12px;" border cellspacing="0" cellpadding="0">
              <caption style="font-size:24px;font-weight:bold;">个人信息登记表</caption>
              <tr align="center">
                <td rowspan="2"><div class="div1">个人信息</div></td>
                <td>名称：</td>
                <td colspan="3"><input class="myInput"/></td>
                <td>性别：</td>
                <td><input class="myInput"/></td>
                <td>年龄：</td>
                <td><input class="myInput"/></td>
              </tr>
              <tr align="center">
                <td>地址：</td>
                <td colspan="3"><input class="myInput1"/>省<input class="myInput1"/>市<input class="myInput1"/>县</td>
                <td>编号：</td>
                <td><input class="myInput"/></td>
                <td>邮编：</td>
                <td><input class="myInput"/></td>
              </tr>
</table>

输入框代码样式

• 输入框占据全部
  

.myInput{
	 100%;
	height: 100%;
	border: none;
	float: left;
	zoom:1;
	outline: medium;
}

• 输入框分开插入
  

.myInput1{
	 50px;
	border: none;
	zoom:1;
	outline: medium;
}