效果图
table属性
align:让内容居中,取值为left、right、center
border:设置表格的边框
cellspacing:单元格与单元格之间的距离
bgcolor:表格的背景色
colspan:跨列数
rowspan:跨行数
HTML代码
<table class="table" style="width: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{
width: 100%;
height: 100%;
border: none;
float: left;
zoom:1;
outline: medium;
}
- 输入框分开插入
.myInput1{
width: 50px;
border: none;
zoom:1;
outline: medium;
}