我们使用html创建表格的时候,合并单元格是最常见的需求。那么如何实现这种功能呢?下面我给大家分享一下。
工具/材料Sublime Text
01首先打开Sublime Text软件,新建一个html文档,如下图所示
02然后我们在html中定义一个表格,并且给表格设置边框,如下图所示
03接下来我们通过colspan来合并单元格的内容,如下图所示
04最后我们运行页面程序,你就会看到两个单元格的内容都合并到一个里面了,如下图所示
colspan 是合并列,rowspan是合并行,合并行的时候,比如rowspan="2",它的下一行tr会少一列;合并列的时候 colspan="2",此行的列会少一列。
代码演示:
<table border="1" style={{margin:200}}>
<tbody>
<tr>
<th colspan="2">我是占位符</th>
<th colspan="2">我是占位符</th>
</tr>
<tr>
<th rowspan="2">我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
</tr>
<tr>
<th>我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
</tr>
</tbody>
</table>
演示结果
扩展资料:
rowspan规定表头单元格应该横跨的行数。注意: rowspan="0" 告知浏览器使单元格横跨到表格组件中的最后一个行(thead、tbody 或 tfoot)。