HTML表格和基于DIV的布局

网页布局对改善网站的外观非常重要, 大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。在本教程中,您将了解创建网页布局的不同方法。

创建网站布局

创建网站布局是定位各种元素的活动,这些元素以结构良好的方式制作网页并赋予网站吸引人的外观。

您已经看到互联网上的大多数网站通常以多行多列的形式显示其内容,其格式类似于杂志或报纸,以便为用户提供更好的阅读和写作环境。这可以通过使用 HTML 标记(例如<table><div><header><footer><section>等)并向它们添加一些CSS 样式来轻松实现。

 

基于 HTML 表格的布局

在 HTML 中,Table 提供了创建布局的最简单方法。通常,这涉及将文本、图像等内容放入行和列的过程。

以下布局是使用具有 3 行和 2 列的 HTML 表格创建的——第一行和最后一行使用表格的colspan属性跨越两列:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
    <table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
        <tr>
            <td colspan="2" style="padding:10px 20px; background-color:#acb3b9;">
                <h1 style="font-size:24px;">Tutorial Republic</h1>
            </td>
        </tr>
        <tr style="height:170px;">
            <td style="width:20%; padding:20px; background-color:#d4d7dc; vertical-align: top;">
                <ul style="list-style:none; padding:0px; line-height:24px;">
                    <li><a href="#" style="color:#333;">Home</a></li>
                    <li><a href="#" style="color:#333;">About</a></li>
                    <li><a href="#" style="color:#333;">Contact</a></li>
                </ul>
            </td>
            <td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
                <h2>Welcome to our site</h2>
                <p>Here you will learn how to create websites...</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding:5px; background-color:#acb3b9; text-align:center;">
                <p>copyright &copy; tutorialrepublic.com</p>
            </td>
        </tr>
    </table>
</body>
</html>

上面的 HTML 代码将产生以下输出

基于 HTML 表格的布局

警告:上例中用于创建布局的方法没有错,但不推荐使用。避免使用表格和内联样式来创建布局。使用表格创建的布局通常呈现非常缓慢。表格只能用于显示表格数据。

 

基于 HTML div 的布局

在 HTML 中创建布局的最常用方法是使用<div>元素。<div>元素用于标记内容块或 HTML 文档中的一组其他元素。如果需要,它可以包含更多其他 div 元素。

以下示例使用 div 元素创建多列布局。它将产生与前面使用 table 元素的示例相同的结果:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    .header {
        padding: 10px 20px;
        background: #acb3b9; 
    }
    .header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2; 
    }
    .nav, .section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    .nav {            
        width: 20%;             
        background: #d4d7dc;
    }
    .section {
        width: 80%;
    }
    .nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    .nav ul li a {
        color: #333;
    }    
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Tutorial Republic</h1>
        </div>
        <div class="wrapper clearfix">
            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="section">
                <h2>Welcome to our site</h2>
                <p>Here you will learn how to create websites...</p>
            </div>
        </div>
        <div class="footer">
            <p>copyright &copy; tutorialrepublic.com</p>
        </div>
    </div>
</body>
</html>

上面的 HTML 代码将产生与上一个示例相同的输出。

我们使用CSS 浮动技术创建了这个布局,因为大多数 Web 浏览器都支持它。或者,您也可以使用 CSS3 flexbox 创建现代且更灵活的布局。请参阅有关CSS3 灵活框布局的教程以详细了解 flexbox。

提示:使用 DIV 元素和 CSS 可以创建更好的网页布局。您只需编辑一个 CSS 文件即可更改网站所有页面的布局。要详细了解 CSS,请查看我们的CSS 教程。

 

使用 HTML5 结构元素

HTML5 引入了新的结构元素,如<header><footer><nav><section>等,以更语义化的方式定义网页的不同部分。

您可以将这些元素视为常用类(如.header.footer.nav.section等)的替代品。以下示例使用新的 HTML5 结构元素来创建我们在前面示例中创建的相同布局。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Web Page Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    header {
        padding: 10px 20px;
        background: #acb3b9; 
    }
    header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2;  
    }
    nav, section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    section {
        width: 80%;
    }
    nav {
        width: 20%;             
        background: #d4d7dc;
    }    
    nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    nav ul li a {
        color: #333;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Tutorial Republic</h1>
        </header>
        <div class="wrapper clearfix">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <section>
                <h2>Welcome to our site</h2>
                <p>Here you will learn how to create websites...</p>
            </section>
        </div>
        <footer>
            <p>copyright &copy; tutorialrepublic.com</p>
        </footer>
    </div>
</body>
</html>

上面的 HTML 代码也将产生与上一个示例相同的输出。

 

下表简要概述了新的 HTML5 结构元素。

标签 描述
<header> 表示文档或部分的标题。
<footer> 表示文档或节的页脚。
<nav> 表示导航链接的一部分。
<section> 表示文档的一部分,例如页眉、页脚等。
<article> 表示文章、博客文章或其他独立的信息单元。
<aside> 表示与页面内容松散相关的一些内容。

请查看HTML5 标签的参考以了解新引入的标签。