表单跨行,跨列实现
1. 需求
欲实现表单的多行/列 的合并,但是不影响整体美观。
2. 代码
<html>
<head >
<meta charset="utf-8">
<style>
<!--html, body {. .}这个是设置html, body的样式 -->
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<style>
table,td,th
{
border:1px solid black;
text-align:center
}
table
{
width:50%;
}
th
{
height:50px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Smith</td>
<td>$100</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<table border= "1 " width= "200 " >
<tr>
<!-- 这个 colspan="4" 表明的就是将span 4 column [合并4列]-->
<td colspan="4" >ss
</td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "rowspan="2"> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% " rowspan="3"> </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% " colspan="2" > </td>
<td width= "25% "> </td>
</tr>
<tr>
<td width= "25% "> </td>
<td width= "25% "> </td>
<td width= "25% "> </td>
</tr>
</table>
</div>
</body>
</html>