html之colspan && rowspan讲解

最新推荐文章于 2022-08-18 15:01:02 发布

weixin_34400525

最新推荐文章于 2022-08-18 15:01:02 发布

阅读量173

点赞数

本文详细介绍了HTML表格中colspan和rowspan属性的使用方法，并通过多个实例展示了如何利用这些属性来合并单元格，实现不同布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.colspan && rowspan均在td标签中使用

2.每个单元格大小一致的前提

<table border="1" bordercolor="red">
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
</table>

效果：

colspan属性代码：

<table border="1" bordercolor="red">
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td colspan="3">nokiacomputer</td>
</tr>
</table>
效果：

全面举例说明：

一行一列的表格：

<table>

<tr>

</tr>

</table>

一行两列的表格：

<table>

<tr>

</tr>

</table>

一行三列的表格：

<table>

<tr>

</tr>

</table>

两行一列的表格：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

两行两列的表格：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

有趣的现象：

<table border="1" bordercolor="red">
<tr>
    <td rowspan="2">nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
</table>

效果：

而在第二行去掉一个<td>nokiacomputer</td>时，

代码如下：

<table border="1" bordercolor="red">
<tr>
    <td rowspan="2">nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
</table>

效果：