使用table标签创建表单
使用tr标签创建行,使用td标签创建单元格,th标签为table head的简写,即为表单的表头,从而实现表单的创建
首先需要做的是对单元格以及行列的创建:
例如
<table>
<tr style="text-align: center;">
<th>学号</th>
<th>姓名</th>
<th>手机号</th>
<th>住址</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>123456789</td>
<td>郑州市高新技术开发区</td>
</tr>
<tr>
<td style="height: 300px; vertical-align: top;">002</td>
<td>李四</td>
<td>987654321</td>
<td style="text-align: center;">北京市海淀区</td>
</tr>
</table>
此时只是完成了对表单内容的创建,但是还未设置样式,即表格线以及表单内容样式尚未进行更改,接下来需要对表单的样式进行设计
使用style标签对样式进行设计
例如:
<style>
table{
width: 720px;/*//设置table宽度*/
margin:0 auto;/*//设置table水平居中*/
border: black 1px solid;/*//设置边框线为1px*/
border-spacing: 0px;/*//去掉table标签以及其子标签边框之间的间隙*/
border-collapse: collapse;/*//去掉重合线*/
}
th{
border: black 1px solid;
}
td{
border: black 1px solid;
}
</style>
此时对表单的样式进行了设计,得到了我们预想的结果。