HTML表格合并多行或合并多列

春雨沙沙地下着,有如绣花针,有如牛毛。河面雪融化了,雪水汇成小溪,淙淙地流着。河水中,一只只小蝌蝌顽皮地游着,好似找它妈妈,可爱极了。

现在的WEB前端都是DIV+CSS布局,很少有使用表格的了(是不是爆露了年龄?),不过后台也有很多使用表格布局的,表格布局可以很方便的勾画出一个直见的数据展示区域。今天就有做后端的小伙伴问关于HTML中表格的合并问题

HTML表格的行合并

HTML表格合并多行或合并多列

HTML table标签的td可以横行合并的,只需要添加一个“colspan”即可,值就是你要合并单元格的个数

HTML代码
<table>
    <tr>
        <td></td>
        <td ></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
        <td></td>
    </tr>
</table>

HTML表格的列合并

HTML表格合并多行或合并多列

HTML table标签的td可以横行合并的,当然也可以竖向合并的,我们只要添加一个rowspan属性,然后把它的值设成你要合并的单元格个数

<table>
    <tr>
        <td rowspan="3"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
     <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

演示代码下载:

[Downloads]下载内容[/Downloads]

到此这篇关于HTML表格合并多行或合并多列就介绍到这了。每天留一点时间和自己相处。更多相关HTML表格合并多行或合并多列内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!