前端表格的合并行和合并列

虽然现在早已没人用表格进行布局,但是并不代表table标签被放弃,反而在前端布局中许多行列数据的呈现还是使用table更为合适,特别是有行列合并的情况下尤为需要使用表格
TD标签有个两个属性,分别是rowspan和colspan分别代表跨行数和跨列数,指定他们的值便可实现单元格的合并

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style type="text/css">
                .table td {
                    text-align: center;
                    width: 180px;
                    border: #0CC 3px solid;
                }
            </style>
        </head>
        <body>
            <table class="table">
                <tr>
                    <td>一行一列</td>
                    <td>一行二列</td>
                    <td>一行二列</td>
                </tr>
                <tr>
                    <td>二行一列</td>
                    <td>二行二列</td>
                    <td rowspan="2">一行三列,二行三列</td>
                </tr>
                <tr>
                    <td>三行一列</td>
                    <td>三行二列</td>
                </tr>
                <tr>
                    <td>四行一列</td>
                    <td colspan="2">四行二列</td>
                </tr>
            </table>
        </body>
    </html>

一行一列 一行二列 一行二列
二行一列 二行二列 一行三列,二行三列
三行一列 三行二列
四行一列 四行二列

标签: none