需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<body>标签中输入html代码:
<table border="1">
<tr><td colspan="2" rowspan="2">1</td><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
3、浏览器运行index.html页面,此时表格的第一格同时跨两行和两列。
Html中的table元素中,colspan 属性规定单元格可横跨的列数即跨列,rowspan 属性规定单元格可横跨的行数跨行。
两个属性的代码实例如下:
1、表格单元横跨两列的表格:
<table border="1"><tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td><!--设置横跨两列-->
</tr>
<tr>
<td colspan="2">February</td><!--设置横跨两列-->
</tr>
</table>
结果:
2、表格单元横跨两行的表格:
<table border="1"><tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
<td rowspan="2">$50</td><!--设置横跨两行-->
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
</table>
<table border="1"><tr>
<td colspan="2">第一行横跨两列</td>
</tr>
<tr>
<td >第二行1列</td> <td >第二行2列</td>
</tr>
</table>