html部分:
<table>
<tr>
<td>属性1</td>
<td>
<input type="text">
</td>
<td>属性2</td>
<td colspan="2">
<input type="text">
</td>
</tr>
<tr>
<td rowspan="2">属性1</td>
<td rowspan="2">
<input type="text">
</td>
<td rowspan="2">属性2</td>
<td>姓名</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>年龄</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>属性1</td>
<td colspan="4">
<input type="text">
</td>
</tr>
</table>
css部分:
table {
width: 960px;
border-collapse: collapse; /*应用于表格的样式,合并相邻单元格的边框*/
}
table td {
height: 40px;
line-height: 40px;
margin: 0px;
padding: 0px;
font-family: "仿宋";
font-size: 18px;
text-align: center;
line-height: 40px;
border: 1px solid #ABABAB;
}
table input {
/*可输入区域样式*/
display: inline-block;
width: 100%;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
border: none;
background: none;
}
要清楚rowspan和colspan的使用:
注:每一种颜色代表每一行,也就是tr
标签里面的内容,绿色那一行包含了属性1,属性2,姓名;而蓝色的那一行只包含了年龄,这是因为属性1和属性2已经使用了rowspan="2",占了上下两个单元格
,所以蓝色一行只有两个单元格可展示,而且只能展示在姓名下面,只有那两个单元格是没有被占用的;对于最后一行紫色那行,属性1右边的内容占了4个单元格,所有用了colspan="4"
效果如下: