HTML——表格合并

最新推荐文章于 2025-02-18 21:18:20 发布

原创最新推荐文章于 2025-02-18 21:18:20 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍了如何使用HTML的colspan和rowspan属性来合并表格中的单元格，展示了代码示例以及合并后的效果图，包括中路和发育路的游戏场景模拟，通过调整colspan和rowspan值实现单元格跨行和跨列的效果。

表格合并列

Colspan=“所要合并的单元格的列数”必须给td。

表格合并行

Rowspan=“所要合并的单元格的行数”必须给td。

3.代码演示及效果图

<!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>
     <!-- 表格合并 -->
    <!-- 1.创建表格 -->
    <table border="1" width="500px" height="100px" 
    align="center" bordercolor="black" bgcolor="white" 
    cellspacing="5" cellpadding="5">
        <!-- 2.创建行 -->
        <tr >
            <!-- 3.创建单元格 -->
            <td>安琪拉</td>
            <td>亚瑟</td>
            <td>兰陵王</td>
            <td>后裔</td>
            <td>蔡文姬</td>
        </tr>

        <tr >
            <td>王昭君</td>
            <td>钟无艳</td>
            <td>澜</td>
            <td>伽罗</td>
            <td>钟馗</td>
        </tr>
    </table>
</body>
</html>

开局效果图

中路：安琪拉VS王昭君，假设安琪拉赢了

<!-- 2.创建行 -->
        <tr >
            <!-- 3.创建单元格 -->
            <td rowspan="2">安琪拉</td>
            <td>亚瑟</td>
            <td>兰陵王</td>
            <td>后裔</td>
            <td>蔡文姬</td>
        </tr>

        <tr >
            <!-- <td>王昭君</td> -->
            <td>钟无艳</td>
            <td>澜</td>
            <td>伽罗</td>
            <td>钟馗</td>
        </tr>

效果图

发育路：后裔跟奶妈吵架了，导致奶妈挂机。

 <!-- 2.创建行 -->
        <tr >
            <!-- 3.创建单元格 -->
            <td rowspan="2">安琪拉</td>
            <td>亚瑟</td>
            <td>兰陵王</td>
            <td colspan="2">后裔</td>
            <!-- <td>蔡文姬</td> -->
        </tr>

        <tr >
            <!-- <td>王昭君</td> -->
            <td>钟无艳</td>
            <td>澜</td>
            <td>伽罗</td>
            <td>钟馗</td>
        </tr>

效果图