HTML 布局-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51735681/article/details/115727604

本文探讨了使用HTML <div>和<table>元素创建网页布局的方法，通过实例展示了如何用<div>实现灵活布局，并介绍了表格标签在创建固定列数布局中的应用，突出了CSS在定位和美化页面中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML 布局：
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
接下来，我们看看<div>元素进行网页布局的示例，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="container" style="width: 500px;">
        <div id="header" style="background-color: blue;">
            <h1 style="margin-bottom:0;">主要的网页标题</h1>

            <div id="menu" style="background-color: chartreuse;height: 200px;width: 100px;float: left;">
                <b>菜单</b><br> HTML <br> CSS <br> JavaScript
            </div>
            <div id="content" style="background-color: crimson;height: 200px;width: 400px;float: left;">
                内容在这里
            </div>
            <div>
                版权@Bill Hu
            </div>
        </div>
    </div>

</body>

</html>

以上代码运行结果如下：
在这里插入图片描述
这个例子使用五个<div> 元素来创建多列布局。
（--------------------------------------------分割线------------------------------------------------）
接下来，我们研究一下使用表格标签进行页面布局，使用 HTML <table> 标签是创建布局是一种比较简单的方式。
备注：大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
举例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color: cyan;">
                <h1>主要的网页标题</h1>
            </td>
        </tr>
        <tr>
            <td style="background-color: darkorange; width: 100px;">
                <b>菜单</b><br> HTML <br> CSS <br> JavaScript <br>
            </td>
            <td style="background-color: darkorchid; width: 400px;">
                内容在这里
            </td>
        </tr>
        <tr>
            <td colspan="2" style="background-color: dodgerblue; text-align: center;">版权@Bill Hu</td>
        </tr>

    </table>
</body>

</html>