查看目录
我们建站过程中,需要不断的发布文章充实网站内容,会有很多文章用到表格,通常来说我们用到的表格代码都是整行整列的,但是也有一些内容需要我们的表格某一行被合并或者某一列被合并,很多朋友不太熟悉这种用法,今天来和大家分享网站文章页html表格代码合并行、合并列的方法和演示。
一、html表格代码合并列:
例如“<table>第一行合并所有列”,我们首先把网站编辑器切换到文本模式,然后输入:
合并列的代码:
<table border="1">
<tbody>
<tr>
<td style="text-align: center;" colspan="3">合并所有列</td>
</tr>
<tr>
<td>第二行,第一列</td>
<td>第二行,第二列</td>
<td>第二行,第三列</td>
</tr>
</tbody>
</table>
合并列的演示:
合并所有列 | ||
第二行,第一列 | 第二行,第二列 | 第二行,第三列 |
二、html表格代码合并行
合并行的代码:
<table border="1">
<tr>
<td rowspan="4">合并的单元格</td>
<td>第一行的其他单元格</td>
</tr>
<tr>
<td>第二行的单元格</td>
</tr>
<tr>
<td>第三行的单元格</td>
</tr>
<tr>
<td>第四行的单元格</td>
</tr>
</table>
合并行的演示:
合并的单元格 | 第一行的其他单元格 |
第二行的单元格 | |
第三行的单元格 | |
第四行的单元格 |
在上面的表格代码中行和列的合并可以通过 colspan和 rowspan 属性来实现。
colspan属性:用于合并列。它定义了一个表格单元格应该横跨多少列。
rowspan属性:用于合并行。它定义了一个表格单元格应该横跨多少行。
我们注意看表格代码中红色的内容,其中的数字就代表我们想合并的行或者列的数字,是不是很简单呢?如果你认为楚狂人的这篇文章对您有所帮助,可以帮忙点个赞或者收藏一下本站,谢谢!