html表单表格组合示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h3{
text-align: center;
}
table, tr, td {
text-align: center;
border: 1px solid gray;
border-collapse: collapse;
}
table{
margin: 0 auto;
}
tr{
height: 30px;
}
.td1{
width: 100px;
}
.td2{
width: 300px;
}
input{
margin:0 10px;
}
input.in1{
width: 280px;
}
input.in2{
width: 80px;
}
</style>
</head>
<body>
<div>
<h3>请认真填写留言</h3>
<table>
<tr>
<td class="td1">姓名</td>
<td class="td2"><input class="in1" type="text"></td>
</tr>
<tr>
<td class="td1">性别</td>
<td class="td2">
<span><input type="radio" name="gender">男</span>
<span> <input type="radio" name="gender">女</span>
<span><input type="radio" name="gender" checked>保密</span>
</td>
</tr>
<tr>
<td class="td1">家庭地址</td>
<td class="td2"><input class="in1" type="text"></td>
</tr>
<tr>
<td class="td1"></td>
<td class="td2">
<span><input class="in2" type="submit" value="提交"></span>
<span><input class="in2" type="reset" value="重置"></span>
</td>
</tr>
</table>
</div>
</body>
</html>
结果如下: