这个例子将清晰地展示在什么情况下使用 table，在什么情况下使用 div，以及如何用 CSS 美化它们。

div table css做网页实例
（图片来源网络，侵删）

核心理念：div vs table 的选择

在开始之前,我们先明确一个非常重要的现代网页设计原则：

  1. 使用 div + CSS Flexbox/Grid 布局：

    • 用途：用于页面的整体布局（如页头、侧边栏、主内容区、页脚）和非表格数据的排列。
    • 优势：语义更清晰（<header>, <main>, <nav> 等），代码更灵活，易于响应式设计（适配不同屏幕尺寸）。
    • 技术：主要通过 CSS 的 Flexbox（一维布局）和 Grid（二维布局）来实现。

  2. 使用 <table>：

    • 用途：专门用于呈现和展示表格数据，学生成绩单、财务报表、产品价格对比等。
    • 优势：浏览器内置的表格渲染算法能很好地处理复杂的表头、跨行/跨列等数据关系，对屏幕阅读器等辅助技术也更友好。
    • 警告：绝对不要用 table 来做整个页面的布局！这会导致代码难以维护、SEO 友差性差、移动端适配困难。

实例：一个个人作品集网站

我们将构建一个简单的个人作品集页面,它包含以下几个部分：

div table css做网页实例
（图片来源网络，侵删）
  • 页眉和导航菜单。
  • 区：
    • 关于我：一段文字介绍。
    • 我的技能：使用 div + Flexbox 布局。
    • 项目展示：一个使用 <table> 展示的项目数据表。
  • 页脚：版权信息。

第一步：HTML 结构

我们使用 div 来搭建页面的大框架，并在“项目展示”部分使用 <table>。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的作品集 - Div & Table 实例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页眉，使用 div 布局 -->
    <header class="main-header">
        <div class="container">
            <h1>我的作品集</h1>
            <nav>
                <ul>
                    <li><a href="#about">关于我</a></li>
                    <li><a href="#skills">我的技能</a></li>
                    <li><a href="#projects">项目展示</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main class="main-content">
        <div class="container">
            <!-- 关于我，使用 div -->
            <section id="about" class="about-section">
                <h2>关于我</h2>
                <p>你好！我是一名前端开发工程师，热爱创造美观且功能强大的网页，我专注于使用现代的前端技术，如 HTML5, CSS3 和 JavaScript，来构建出色的用户体验。</p>
            </section>
            <!-- 我的技能，使用 div + Flexbox -->
            <section id="skills" class="skills-section">
                <h2>我的技能</h2>
                <div class="skills-container">
                    <div class="skill-item">
                        <h3>HTML / CSS</h3>
                        <p>精通语义化HTML和现代CSS布局技术，包括Flexbox和Grid。</p>
                    </div>
                    <div class="skill-item">
                        <h3>JavaScript</h3>
                        <p>熟练掌握ES6+语法，能够开发交互性强的动态网页。</p>
                    </div>
                    <div class="skill-item">
                        <h3>响应式设计</h3>
                        <p>能够确保网站在各种设备上都能完美显示。</p>
                    </div>
                </div>
            </section>
            <!-- 项目展示，使用 TABLE -->
            <section id="projects" class="projects-section">
                <h2>项目展示</h2>
                <p>以下是我参与过的一些项目数据统计：</p>
                <table>
                    <thead>
                        <tr>
                            <th>项目名称</th>
                            <th>技术栈</th>
                            <th>完成日期</th>
                            <th>项目状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>企业官网重构</td>
                            <td>HTML5, SCSS, JavaScript</td>
                            <td>2025-10-15</td>
                            <td><span class="status-completed">已完成</span></td>
                        </tr>
                        <tr>
                            <td>在线购物车应用</td>
                            <td>React, Redux, Node.js</td>
                            <td>2025-11-20</td>
                            <td><span class="status-completed">已完成</span></td>
                        </tr>
                        <tr>
                            <td>移动端App UI设计</td>
                            <td>Figma, Adobe XD</td>
                            <td>2025-12-05</td>
                            <td><span class="status-in-progress">进行中</span></td>
                        </tr>
                        <tr>
                            <td>数据可视化仪表盘</td>
                            <td>D3.js, Vue.js</td>
                            <td>待定</td>
                            <td><span class="status-planning">规划中</span></td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </div>
    </main>
    <!-- 页脚，使用 div 布局 -->
    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 我的作品集. 保留所有权利.</p>
        </div>
    </footer>
</body>
</html>

第二步：CSS 样式 (style.css)

我们用 CSS 来美化这个页面，这里会重点展示如何用 Flexbox 布局 div，以及如何为 table 添加样式，使其看起来更现代。

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --background-color: #f4f4f9;
    --text-color: #333;
    --border-color: #ddd;
    --light-bg: #fff;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
}
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3 {
    color: #222;
}
a {
    color: var(--primary-color);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
/* --- 页眉样式 --- */
.main-header {
    background-color: var(--light-bg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 1rem 0;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-header h1 {
    margin: 0;
    font-size: 1.8rem;
}
.main-header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.main-header nav ul li {
    margin-left: 20px;
}
/* --- 主内容区样式 --- */
.main-content {
    padding: 2rem 0;
}
.about-section, .skills-section, .projects-section {
    background-color: var(--light-bg);
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* --- 技能区：使用 Flexbox 布局 --- */
.skills-container {
    display: flex;
    justify-content: space-between; /* 子元素平均分布，两端对齐 */
    flex-wrap: wrap; /* 允许换行，适应小屏幕 */
    gap: 20px; /* 子元素之间的间距 */
}
.skill-item {
    flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 5px;
    border-left: 4px solid var(--primary-color);
    transition: transform 0.2s;
}
.skill-item:hover {
    transform: translateY(-5px);
}
/* --- 表格样式 --- */
.projects-section table {
    width: 100%; /* 表格宽度占满父容器 */
    border-collapse: collapse; /* 合并边框，更美观 */
    margin-top: 1rem;
}
/* 表头和单元格样式 */
.projects-section th,
.projects-section td {
    padding: 12px 15px; /* 内边距 */
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
/* 表头样式 */
.projects-section thead th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}
/* 隔行变色 */
.projects-section tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}
/* 鼠标悬停行高亮 */
.projects-section tbody tr:hover {
    background-color: #f1f1f1;
}
/* 状态标签样式 */
.status-completed {
    background-color: var(--success-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}
.status-in-progress {
    background-color: var(--warning-color);
    color: #333;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}
.status-planning {
    background-color: var(--info-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
}
/* --- 页脚样式 --- */
.main-footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}
/* --- 响应式设计 (示例) --- */
@media (max-width: 768px) {
    .main-header .container {
        flex-direction: column;
        text-align: center;
    }
    .main-header nav ul {
        margin-top: 1rem;
    }
    .skills-container {
        flex-direction: column; /* 在小屏幕上改为纵向排列 */
    }
}

最终效果解析

  1. 页面布局 (div + Flexbox)：

    • 整个页面被 <header>, <main>, <footer> 这几个 div 结构清晰地划分开。
    • 页眉使用了 display: flex和导航菜单并排显示，并且两端对齐。
    • “我的技能”部分也使用了 display: flex，让三个技能卡片在一行内均匀分布，当屏幕变窄时，flex-wrap: wrap 会让卡片自动换行，这比使用 float 或 display: inline-block 要简单和强大得多。

  2. 数据展示 (table)：

    div table css做网页实例
    （图片来源网络，侵删）
    • 我们用 <table> 来展示项目列表，这是因为它本质上就是行列数据。
    • border-collapse: collapse 让表格的边框看起来更清爽。
    • 通过给 th 和 td 添加 padding 和 border-bottom，让单元格内容有呼吸感。
    • nth-child(even) 和 hover 伪类让表格数据更易于阅读，提供了良好的用户交互体验。
    • 为“项目状态”添加了不同颜色的标签，让信息一目了然。

通过这个实例,你可以看到：

  • div 是构建网页的“积木”，负责搭建结构和布局，特别是借助 Flexbox 和 Grid，可以实现非常灵活和强大的布局效果。
  • table 是展示“表格数据”的“专用工具”，当你的数据天然具有行和列的结构时，使用 table 是最恰当、最语义化的选择。

在现代网页开发中,正确地结合使用 div 和 table，并利用 CSS 进行美化，是创建既美观又实用的网页的关键。