HTML合并单元

最新推荐文章于 2024-05-16 12:43:50 发布

皮喆

最新推荐文章于 2024-05-16 12:43:50 发布

阅读量746

点赞数 4

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_74268056/article/details/129484688

版权

合并单元格专栏收录该内容

1 篇文章 0 订阅

订阅专栏

跨行合并（上下合并）：rowspan="合并单元格的个数"

跨列合并（左右合并）：colspan="合并单元格的个数"

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body>
        <table width="520" height="288" border="1" cellspacing="0">
            <tr>
                <td></td>
                <td colspan="2"></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <!-- <td></td> -->
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

效果显示

小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="400" height="300" align="center" border="1" cellpadding="9" cellspacing="6">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td rowspan="3">1</td>
                <td colspan="3">234合在一起</td>
                <!-- <td>3</td> -->
                <!-- <td>4</td> -->
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <!-- <td>1</td> -->
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</body>
</html>