合并单元格
在table表格标签的使用中,有时我们会看到类似于如下简历表格中的照片区域一样的合并单元格,那我们需要怎么做。
合并单元格方式
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan="“合并单元格的个数”
目标单元格(写合并代码)
- 跨行:最上侧单元格为目标单元格,写合并代码。
- 跨列:最左侧单元格为目标单元格,写合并代码。
如下红色框为目标单元格
合并单元格三部曲
- 确定是跨行还是跨列。
- 找到目标单元格,写上合并方式=合并的单元格数量。如
<td colspan="2"></td>
。- 删除多余单元格。
如以下代码:<body> <table align="center" width="500px" height="200px" border="1px" cellspacing="0px"> <tr> <td></td> <td colspan="2"></td> <!-- <td></td> 删除--> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> 删除--> <td></td> <td></td> </tr> </table> </body>
运行截图