表格的合并

最新推荐文章于 2022-05-11 21:37:42 发布

转载最新推荐文章于 2022-05-11 21:37:42 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/believepd/p/10008447.html

本文详细介绍了HTML中表格单元格的合并方法，包括colspan属性用于跨列显示单元格，rowspan属性用于跨行显示单元格。通过具体示例代码展示了如何在实际网页布局中运用这些属性，以实现更复杂和灵活的表格设计。

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--
        表格的合并
            colspan : 跨列 
            rowspan : 跨行
    -->
    <table border="1px" width="400px">

        <tr>
            <td colspan="2">11</td>
            <td>13</td>
            <td>14</td>
        </tr>

        <tr>
            <td>21</td>
            <td colspan="2" rowspan="2">
                <table border="1px" width="100%">
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                    </tr>
                </table>
            </td>
            <td>24</td>
        </tr>

        <tr>
            <td>31</td>
            
            <td>34</td>
        </tr>

        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td rowspan="2">44</td>
        </tr>

        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
        </tr>

    </table>
</body>
</html>

View Code

效果：

转载于:https://www.cnblogs.com/believepd/p/10008447.html