CSS（十一）表格与多列布局

原创已于 2026-05-05 16:43:03 修改 · 298 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端

于 2026-05-04 16:56:21 首次发布

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

CSS表格控制

核心知识点

CSS表格属性用于美化HTML表格，在文旅官网中可用于门票价格表、景区开放时间表、行程安排表等场景，核心属性如下：

属性	作用	常用值与说明
`border-collapse`	表格边框合并	`collapse`（合并为单一边框，消除双线）、`separate`（默认，边框分离）
`border-spacing`	单元格边框间距	长度值，仅`border-collapse: separate`时生效
`caption-side`	表格标题位置	`top`（默认，表格顶部）、`bottom`（表格底部）
`vertical-align`	单元格内容垂直对齐	`top`（顶端对齐）、`middle`（居中对齐）、`bottom`（底端对齐）

配套案例练习：景区门票价格表制作

需求：制作景区门票价格表，用CSS表格属性美化表格，贴合文旅官网的使用场景。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格控制练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 50px;
            font-family: "微软雅黑", sans-serif;
        }
        .ticket-table {
            width: 800px;
            margin: 0 auto;
            /* 合并边框，消除双线 */
            border-collapse: collapse;
            text-align: center;
        }
        /* 表格标题 */
        .ticket-table caption {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #2c7a7b;
            caption-side: top;
        }
        /* 单元格边框 */
        .ticket-table th, .ticket-table td {
            border: 1px solid #ddd;
            padding: 12px 15px;
        }
        /* 表头样式 */
        .ticket-table th {
            background-color: #2c7a7b;
            color: #fff;
            font-weight: bold;
        }
        /* 隔行变色 */
        .ticket-table tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        /* 单元格垂直居中 */
        .ticket-table td {
            vertical-align: middle;
        }
        /* 鼠标悬停行高亮 */
        .ticket-table tr:hover {
            background-color: #e8f4f4;
        }
    </style>
</head>
<body>
    <table class="ticket-table">
        <caption>XX景区门票价格表</caption>
        <thead>
            <tr>
                <th>门票类型</th>
                <th>票价</th>
                <th>适用人群</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>成人票</td>
                <td>80元/人</td>
                <td>18-60周岁成年人</td>
                <td>全景区通用</td>
            </tr>
            <tr>
                <td>儿童票</td>
                <td>40元/人</td>
                <td>1.2-1.5米儿童</td>
                <td>1.2米以下免票</td>
            </tr>
            <tr>
                <td>老人票</td>
                <td>40元/人</td>
                <td>60-70周岁老人</td>
                <td>70周岁以上免票</td>
            </tr>
            <tr>
                <td>学生票</td>
                <td>40元/人</td>
                <td>全日制本科及以下学生</td>
                <td>需凭学生证购票</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

CSS多列布局（长文本排版优化）

核心知识点

CSS多列布局用于将大段文本分为多列显示，类似报纸、杂志的排版，在文旅官网的景区介绍、文旅故事等长文本场景中非常实用，核心属性如下：

column-count：设置列数，例：column-count: 3; 将文本分为3列
column-gap：设置列与列之间的间距，例：column-gap: 40px;
column-rule：设置列之间的分隔线，语法同border，例：column-rule: 2px dashed #2c7a7b;

配套案例练习：景区介绍多列排版

需求：将景区介绍的长文本分为3列显示，优化阅读体验，贴合文旅官网的文本排版需求。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多列布局练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            padding: 50px;
            font-family: "微软雅黑", sans-serif;
            line-height: 1.8;
            color: #333;
        }
        .scenic-intro {
            width: 1200px;
            margin: 0 auto;
        }
        .scenic-intro h2 {
            font-size: 28px;
            color: #2c7a7b;
            text-align: center;
            margin-bottom: 20px;
        }
        .intro-text {
            /* 分为3列 */
            column-count: 3;
            /* 列间距40px */
            column-gap: 40px;
            /* 列分隔线 */
            column-rule: 1px solid #ddd;
            text-indent: 2em;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="scenic-intro">
        <h2>XX山风景区介绍</h2>
        <p class="intro-text">
            XX山风景区位于本市西南部，是国家4A级旅游景区，总面积达120平方公里，主峰海拔1280米，素有“岭南第一奇山”的美誉。景区内森林覆盖率高达96%，是天然的森林氧吧，负氧离子含量最高达每立方厘米10万个，是休闲养生、避暑度假的绝佳去处。
            景区内自然风光奇绝，集奇松、怪石、云海、飞瀑于一体。其中“龙潭飞瀑”落差达80米，水流从悬崖倾泻而下，声震山谷，蔚为壮观；“一线天”峡谷两侧峭壁对峙，最窄处仅容一人通过，抬头只见一线天光，是徒步探险的热门打卡点。
            除了自然风光，XX山还拥有深厚的人文底蕴。山上始建于唐代的XX古寺，距今已有1200多年历史，寺内保存有大量古代碑刻、佛像，是省级文物保护单位。每年农历二月十九的观音庙会，都会吸引周边数万游客前来祈福，成为当地重要的文旅民俗活动。
            近年来，景区不断完善配套设施，新建了环山观光步道、高空玻璃观景台、亲子研学基地等项目，开发了徒步登山、星空露营、自然研学等多元化的文旅产品，满足不同游客的需求。同时，景区联动周边乡村，打造了“景区+民宿+农家乐”的乡村旅游模式，带动了当地乡村振兴，成为本市文旅融合发展的标杆项目。
        </p>
    </div>
</body>
</html>