HTML设置跨行跨列

最新推荐文章于 2024-07-12 00:07:26 发布

cb++

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量3k

点赞数 2

文章标签： html

本文链接：https://blog.csdn.net/weixin_44768794/article/details/108559084

版权

rowspan=“2” 属性设置跨行
colspan=“2” 属性设置跨列
（数字根据你需要合并的格数选择)

跨行跨列后需将多出来的单元格删除（Ctrl+x）

下面展示一些 跨行跨列代码片。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--     需求1：新建一个五行五列的表格。
    第一行，第一列的单元格要跨两列，
    第二行、第一列的单元格要跨两行，
    第四行第四列的单元格要跨两行两列

    colspan  属性设置跨列
    rowspan  属性设置跨列
    -->
<table width="500" height="500" cellspacing="0" border="1">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>
</body>
</html>