如何用html完成下图操作

img


怎样简单做出如图所示的表格，利用html进行解答，必须按照图内的具体情况进行解答（请看仔细），求解答！


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="900" cellspacing="5">
    <tr bgcolor="#6495ed">
        <td colspan="3" height="100"></td>
    </tr>
    <tr bgcolor="aqua">
        <td colspan="3" height="30"></td>
    </tr>
    <tr >
        <td height="500" width="100"  bgcolor="#7fffd4"></td>
        <td height="500" width="690" bgcolor="#00bfff"></td>
        <td height="500" width="100" bgcolor="#7fffd4"></td>
    </tr>
    <tr bgcolor="aqua">
        <td colspan="3" height="60"></td>
    </tr>
</table>
</body>
</html>

img

这有什么难的，几个div就能搞定

你是要做
html+css，实现一个900px宽100px高的浅蓝色banner，下面是一个30px高900px宽的深蓝色banner，下面分为三列，宽度分别是100px，690px，100px，颜色分别是浅蓝色、白色、浅蓝色，高度都是500px，最后是一个900px宽度60px高度的浅蓝色banner
我帮你弄一个，稍等

<!DOCTYPE html>
<html>
<head>
    <title>Banner Example</title>
    <style>
        /* 设置页面整体宽度和背景颜色 */
        body {
            margin: 0;
            padding: 0;
            background-color: #fff;
        }

        /* 设置顶部浅蓝色Banner */
        .top-banner {
            width: 900px;
            height: 100px;
            background-color: #add8e6;
            margin: 0 auto;
        }

        /* 设置中间三列布局 */
        .container {
            width: 900px;
            height: 500px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
        }

        .left-column, .right-column {
            width: 100px;
            height: 500px;
            background-color: #add8e6;
        }

        .middle-column {
            width: 690px;
            height: 500px;
            background-color: #fff;
        }

        /* 设置底部浅蓝色Banner */
        .bottom-banner {
            width: 900px;
            height: 60px;
            background-color: #add8e6;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="top-banner"></div>
    <div class="container">
        <div class="left-column"></div>
        <div class="middle-column"></div>
        <div class="right-column"></div>
    </div>
    <div class="bottom-banner"></div>
</body>
</html>

这个呢规整的布局，直接堆叠就可以了啊