rowspan和colspan使用

最新推荐文章于 2023-03-29 12:08:39 发布

旋律Melody

最新推荐文章于 2023-03-29 12:08:39 发布

阅读量1.9w

点赞数 10

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_38391672/article/details/78481708

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

重点就是一定先分清楚，几个<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>