html table合并单元格同时合并行列的方法

html table合并单元格同时合并行列的方法

    • 只合并一行的单元格/只合并一列单元格的一般情况
    • 同时合并行列的情况
    • 同时合并行列单元格时出现的单元格显示比例异常问题及解决方案
      • 问题描述
      • 解决方案

在html中使用table标签,有时会需要合并单元格。
在单元格标签td中,用于合并单元格的属性:
rowspan=“合并的单元格个数” 合并行
colspan=“合并的单元格个数” 合并列
合并的代码写在参与合并的单元格中,最左侧/最上侧的单元格。最后删掉被合并的单元格。

只合并一行的单元格/只合并一列单元格的一般情况

画一个9x9的表格

    <table border="1" width="200">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

显示效果
初始9x9表格

合并列:对2号单元格和3号单元格进行合并
在2号单元格的td标签中输入colspan=“2”
并删掉被合并的单元格(3号单元格)
删掉之后第一行只剩下两个td标签

合并行:对4号单元格和7号单元格进行合并
在4号单元格的td标签中输入rowspan=“2”
并删掉被合并的单元格(7号单元格)
删掉之后第三行只剩下两个td标签

	<table border="1" width="200">
        <tr>
            <td>1</td>
            <td colspan=
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值