欢迎登录

HTML5 table表格合并单元格和合并边框

:2019-11-18    :50 次   :1460 字   

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合并单元格</title>
    <style>
        table,
        table tr th,
        table tr td {
            border: 1px solid #000000;
            margin: 0;
            padding: 50px;
            /* 合并边框 */
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <caption>食物链顶端</caption>
            <tr>
                <th>水果</th>
                <th>蔬菜</th>
                <th>肉类</th>
            </tr>
            <tr>
                <td colspan="2">苹果</td>
                <td>菠菜</td>
            </tr>
            <tr>
                <td>橙子</td>
                <td rowspan="2">菜花</td>
                <td>牛肉</td>
            </tr>
            <tr>
                <td>香梨</td>
                <td>羊肉</td>
            </tr>
        </table>
    </div>

</body>

</html>

效果:

    暂无评论,快来抢沙发吧!
×