HTML 教程 – 第四章：HTML 表格与布局-谷穗社区

在HTML中，表格（Tables）不仅用于展示数据，还可以用来进行页面布局。然而，随着CSS的发展，表格在布局方面的使用逐渐减少，但了解表格的基本结构和用法仍然很重要。本章将介绍HTML表格的创建和样式设置，以及如何使用HTML进行简单的页面布局。

一、HTML表格

HTML表格由<table>标签定义，包含行（<tr>）、表头（<th>）和数据单元格（<td>）。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>HTML 表格</title>  
</head>  
<body>  
    <table border="1">  
        <tr>  
            <th>姓名</th>  
            <th>年龄</th>  
            <th>职业</th>  
        </tr>  
        <tr>  
            <td>张三</td>  
            <td>25</td>  
            <td>工程师</td>  
        </tr>  
        <tr>  
            <td>李四</td>  
            <td>30</td>  
            <td>设计师</td>  
        </tr>  
    </table>  
</body>  
</html>

在上述示例中，border属性用于设置表格边框的宽度。<th>标签用于定义表头单元格，它们通常显示为粗体并居中对齐。<td>标签用于定义数据单元格。

二、表格样式

虽然可以使用HTML属性（如border、bgcolor等）来设置表格样式，但建议使用CSS来进行更灵活和强大的样式控制。例如，可以使用CSS来设置表格边框颜色、单元格间距、单元格内边距等。

三、简单的页面布局

在HTML中，可以使用<div>、<span>等标签结合CSS来进行页面布局。<div>标签常用于定义文档中的区块或节（section），而<span>标签则用于对文本中的一部分进行样式设置。

以下是一个简单的页面布局示例：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>页面布局示例</title>  
    <style>  
        .container {  
            width: 100%;  
            max-width: 1200px;  
            margin: 0 auto;  
            padding: 20px;  
            box-sizing: border-box;  
        }  
        .header {  
            background-color: #f2f2f2;  
            padding: 10px;  
            text-align: center;  
        }  
        .content {  
            margin-top: 20px;  
        }  
        .sidebar {  
            float: right;  
            width: 25%;  
            background-color: #f9f9f9;  
            padding: 10px;  
        }  
        .main-content {  
            float: left;  
            width: 70%;  
            padding: 10px;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <div class="header">  
            <h1>页面标题</h1>  
        </div>  
        <div class="content">  
            <div class="main-content">  
                <p>这里是主要内容...</p>  
            </div>  
            <div class="sidebar">  
                <p>这里是侧边栏内容...</p>  
            </div>  
        </div>  
    </div>  
</body>  
</html>

在上述示例中，.container类用于设置页面的容器宽度和内外边距。.header类用于设置页眉的样式。.content类用于包含主要内容和侧边栏。.sidebar和.main-content类分别用于设置侧边栏和主要内容的样式。通过float属性，可以实现侧边栏和主要内容并排显示的效果。

四、总结

在本章中，我们介绍了HTML表格的创建和样式设置，以及如何使用HTML和CSS进行简单的页面布局。了解这些基础知识后，你可以开始构建更复杂的网页结构，并使用CSS来增强页面的视觉效果和用户体验。在后续章节中，我们将进一步探讨CSS和JavaScript等技术在网页开发中的应用。

文章版权归作者所有，未经允许请勿转载。

THE END