html中使用table进行布局

效果：

 

 代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body {
                margin: 0%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
            td{
                border: 1px solid #000000;
            }
        </style>
    </head>
    <body>
        <table style="width: 100%;height: 100%;border-collapse: collapse;background-color: aqua">
            <tr style="height: 20%;">
                <td colspan="2">
                    
                </td>
            </tr>
            <tr>
                <td style="width: 20%;">            
                    
                </td>
                <td >    
                
                </td>
            </tr>
            <tr  style="height: 10%;">
                <td  colspan="2">
                    
                </td>
            </tr>
        </table>
    </body>
</html>

 

posted @ 2023-02-20 12:46  在博客做笔记的路人甲  阅读(81)  评论(0)  编辑  收藏  举报