rowspan和colspan使用

最新推荐文章于 2024-03-29 14:25:56 发布

原创最新推荐文章于 2024-03-29 14:25:56 发布 · 2w 阅读

32 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文详细解析了HTML表格中rowspan与colspan属性的使用方法，通过实例展示了如何利用这两个属性实现行合并与列合并的效果，帮助读者更好地掌握表格布局技巧。

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

重点就是一定先分清楚，几个<tr> 一个<tr>就是一行

rowspan代表rownspan，row，英文行的意思

代表的意思就是行合并

分清楚几个tr再做处理

<table style="text-align: center">
    <thead>
    <tr>
        <th>第一</th>
        <th>第二</th>
        <th>第三</th>
        <th>第四</th>
    </tr>
    </thead>
    <tbody>
    <tr>      	<td rowspan="4">1</td> <!--合并四行,下面的三行全部被占-->
	<td rowspan="2">2</td> <!--合并两行,下面的1行被占-->
        <td>3</td>        <td>4</td>    </tr>    <tr>        <td>3</td>        <td>4</td>    </tr>    <tr>        <td rowspan="2">2</td>        <td>3</td>        <td>4</td>    </tr>    <tr>        <td>3</td>        <td>4</td>    </tr>    </tbody></table>

colspan代表columnspan，column，英文列的意思

代表的意思就是，列合并

<table class="table table-bordered" style="wtext-align: center;">
    <thead>
    <tr>
        <th>第一</th>
        <th>第二</th>
        <th>第三</th>
        <th>第四</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td colspan="2">2</td> <!--跨两列-->
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td colspan="3">4</td><!--跨三列-->
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    </tbody>
</table>