HTML表格布局

2019年9月7日 88次阅读 来源: Corwien

一个后台展示页面需要一个子列可以动态划分出等份的行，如果是固定的还好，可以用rowspan解决，但是这里不固定，所以，只能在列中嵌套一个表了，然后再进行行遍历。

具体效果图-列表里边嵌套子表

《HTML表格布局》

代码：

<html>

<body>

    <h2 align="center">合并表格行或列</h2>
    <!--显示菜单-->
    <table border="1" align="center" bordercolor="#E76BFF" height="225px" cellpadding="1px" cellspacing="0px" width="400px">
        <tr>
            <!--colspan="3"表该列要占用三列-->
            <td align="center" colspan="3">菜谱</td>

        </tr>
        <tr>
            <td rowspan="3">素菜</td>
            <td>青草茄子</td>
            <td>花椒扁豆</td>
        </tr>

        <tr>

            <td>小炒韭菜</td>
            <td>白豆腐</td>
        </tr>
        <tr>
            <td rowspan="2">荤菜</td>
            <td>清蒸龙</td>
            <td>鱼香肉丝</td>
        </tr>
        <tr>

            <td>小炒肉
                <imgsrc="dog.jpg" width="70px" />
            </td>
            <td>水煮肉片</td>
        </tr>
    </table>

    <h2 align="center">列里边嵌入子表</h2>
    <table border="1" align="center" bordercolor="#E76BFF" height="200px" cellpadding="1px" cellspacing="0px" width="400px">
        <caption>购物车</caption>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>名称</td>
            <td align=center>
                <table border="0" bordercolor="#E76BFF" cellpadding="1px" width="100%" height="100%" cellspacing="0px">
                    <tr>
                        <td align=center>1</td>

                    </tr>
                    <tr>
                        <td style="border-top:1px solid #E76BFF;" align=center>2</td>
                    </tr>

                </table>
            </td>
            <td>
                <table border="0" bordercolor="#E76BFF" cellpadding="1px" width="100%" height="100%" cellspacing="0px">
                    <tr>
                        <td align=center>1</td>

                    </tr>
                    <tr>
                        <td style="border-top:1px solid #E76BFF;" align=center>2</td>
                    </tr>
                    <tr>
                        <td style="border-top:1px solid #E76BFF;" align=center>3</td>
                    </tr>
                </table>
            </td>
            <td>小计</td>
        </tr>
        <tr>
            <td>名称</td>
            <td align=center><b>2016-11-22</b></td>
            <td>小计</td>
            <td>小计</td>

        </tr>
        <tr>
            <td>苹果</td>
            <td>3公斤</td>
            <td>5元/公斤</td>
            <td>15元</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>2公斤</td>
            <td>6元/公斤</td>
            <td>12元</td>
        </tr>
        <tr>
            <td colspan=3 align=center>总价</td>
            <td>27元</td>
        </tr>
    </table>
</body>

</html>
    原文作者：Corwien
    原文地址: https://segmentfault.com/a/1190000010722291
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞