首页 > 其他分享 >CSS 样式化表格——WEB开发系列24

CSS 样式化表格——WEB开发系列24

时间：2024-08-30 14:57:21浏览次数：11  
标签：24 WEB 表格 示例 color 样式 background border CSS

表格在网页设计中扮演了重要角色，尤其是在展示数据和信息时。尽管 HTML 表格提供了结构化的数据展示，但要使其看起来既美观又实用，CSS 样式化至关重要。

一、典型的 HTML 表格

在了解如何样式化表格之前，我们首先来看看一个典型的 HTML 表格结构。一个基本的 HTML 表格由 ​​<table>​​、​​<thead>​​、​​<tbody>​​ 和 ​​<tfoot>​​ 元素组成，分别用于定义表格、表头、表体和表脚。表格中的每一行由 ​​<tr>​​ 定义，而每一列由 ​​<td>​​（数据单元格）或 ​​<th>​​（表头单元格）定义。

示例: 基本 HTML 表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础 HTML 表格</title>
</head>
<body>
    <h1>员工信息表</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>部门</th>
                <th>薪资</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>开发工程师</td>
                <td>技术部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>设计师</td>
                <td>设计部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">数据来源：公司人力资源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

上述例子中创建了一个简单的员工信息表，包含了表头、表体和表脚，表头定义了表格的列名，表体包含了实际的数据行，而表脚提供了额外的信息或说明。

二、样式化我们的表格

1、基本样式

为了让表格看起来更加美观，我们可以使用 CSS 来设置表格的边框、背景色、文本对齐方式等基本样式。

示例: 基本表格样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式化表格</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse; /* 合并表格边框 */
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #e2e2e2;
        }
    </style>
</head>
<body>
    <h1>样式化表格示例</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>部门</th>
                <th>薪资</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>开发工程师</td>
                <td>技术部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>设计师</td>
                <td>设计部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">数据来源：公司人力资源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

我们对表格应用了一些基本的样式：边框、内边距、背景颜色和交替行的背景色，另外还添加了悬停效果，以便在用户将鼠标悬停在行上时，背景色会有所变化。

2、间距和布局

控制表格的间距和布局是确保表格在不同屏幕上显示良好的关键。可以使用 CSS 的 ​​padding​​ 和 ​​margin​​ 属性来调整间距，使用 ​​border-spacing​​ 属性来设置单元格之间的间距。

示例: 调整表格间距和布局
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格间距和布局</title>
    <style>
        table {
            width: 80%;
            margin: 20px auto; /* 自动居中 */
            border-spacing: 0; /* 单元格之间的间距 */
        }

        th, td {
            border: 1px solid #ddd;
            padding: 12px; /* 单元格内边距 */
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <h1>表格间距和布局示例</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>部门</th>
                <th>薪资</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>开发工程师</td>
                <td>技术部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>设计师</td>
                <td>设计部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">数据来源：公司人力资源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

这个例子设置表格的宽度为页面宽度的 80%，并将表格居中显示，使用 ​​border-spacing​​ 属性来调整单元格之间的间距，并增加了单元格的内边距，使得内容更为舒适易读。

三、简单的排版

1、字体和文本对齐

通过 CSS，我们可以控制表格中的字体和文本对齐方式，使其符合设计需求。

示例: 表格排版样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格排版样式</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif; /* 字体 */
        }

        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center; /* 中央对齐 */
        }

        th {
            background-color: #2196F3;
            color: white;
            font-weight: bold; /* 加粗 */
        }

        td {
            color: #555;
        }
    </style>
</head>
<body>
    <h1>表格排版样式示例</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>部门</th>
                <th>薪资</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>开发工程师</td>
                <td>技术部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>设计师</td>
                <td>设计部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">数据来源：公司人力资源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

示例中我们设置了字体样式为 Arial，并将单元格中的文本居中对齐，表头使用了更为显眼的颜色和加粗字体，使其更加突出。

2、颜色样式

颜色不仅可以提升表格的视觉效果，还可以帮助突出关键信息。使用 CSS 可以轻松地为表格添加背景色、边框颜色等样式。

示例: 表格颜色样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格颜色样式</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 2px solid #4CAF50;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:nth-child(odd) {
            background-color: #ffffff;
        }

        tr:hover {
            background-color: #d1e7dd;
        }
    </style>
</head>
<body>
    <h1>表格颜色样式示例</h1>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>职位</th>
                <th>部门</th>
                <th>薪资</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>开发工程师</td>
                <td>技术部</td>
                <td>￥8000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>设计师</td>
                <td>设计部</td>
                <td>￥7000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">数据来源：公司人力资源部</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

示例中我们使用了不同的背景颜色来区分奇数行和偶数行，同时设置了悬停效果的背景颜色，使得用户在浏览时更容易阅读和辨别数据。

四、综合练习题

下面我们自己动手来练习一下以下的两道题目吧：

题 1: 创建一个自定义的产品表格

要求：

  1. 创建一个产品表格，包含以下列：产品名、类别、价格和库存。
  2. 使用 CSS 样式化表格，确保表头使用醒目的颜色，表体交替行有不同的背景色，并添加悬停效果。
  3. 添加一个“总计”行，在表脚部分显示总产品数和库存总数。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品表格</title>
    <style>
        table {
            width: 90%;
            margin: 20px auto;
            border-collapse: collapse;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #ff5722;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #e0e0e0;
        }

        tfoot {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>产品信息表</h1>
    <table>
        <thead>
            <tr>
                <th>产品名</th>
                <th>类别</th>
                <th>价格</th>
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>笔记本</td>
                <td>电子产品</td>
                <td>￥500</td>
                <td>50</td>
            </tr>
            <tr>
                <td>智能手机</td>
                <td>电子产品</td>
                <td>￥3000</td>
                <td>20</td>
            </tr>
            <!-- 添加更多产品行 -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">总计</td>
                <td>70</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
题 2: 设计一个学生成绩表格

要求：

  1. 创建一个学生成绩表格，包含以下列：学生姓名、科目、成绩。
  2. 使用 CSS 样式化表格，使表头具有背景色和白色文本，所有单元格的文本居中对齐，表格宽度设置为 100%。
  3. 添加一个行样式，当成绩低于 60 时，该行背景色为红色；当成绩在 60 到 80 之间时，背景色为黄色；当成绩在 80 以上时，背景色为绿色。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Arial', sans-serif;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #2196F3;
            color: white;
        }

        .low {
            background-color: #ffcccc;
        }

        .medium {
            background-color: #ffffcc;
        }

        .high {
            background-color: #ccffcc;
        }
    </style>
</head>
<body>
    <h1>学生成绩表</h1>
    <table>
        <thead>
            <tr>
                <th>学生姓名</th>
                <th>科目</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr class="low">
                <td>王五</td>
                <td>数学</td>
                <td>45</td>
            </tr>
            <tr class="medium">
                <td>赵六</td>
                <td>英语</td>
                <td>75</td>
            </tr>
            <tr class="high">
                <td>孙七</td>
                <td>物理</td>
                <td>90</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

如有表述错误及欠缺之处敬请批评指正。

标签：24,WEB,表格,示例,color,样式,background,border,CSS
From： https://blog.csdn.net/LEECOO666/article/details/141718390

相关文章

  • CSS、JS之动态展开式菜单
    效果演示实现了一个可展开菜单按钮的效果，点击按钮会弹出一个菜单列表，菜单列表中包含多个选项。按钮的样式为一个圆形背景，中间有三条横线，表示可以展开。当按钮被点击后，三条横线会变成一个叉号，表示可以收起。菜单列表的样式为一个白色背景，四周有阴影，包含多个选项，每个选项都有......
  • CSS、JS之密码灯登录表单
    效果演示实现了一个登录页面，包括一个标题、两个输入框（用户名和密码）、一个登录按钮和一个眼睛图标。点击眼睛图标可以显示或隐藏密码。页面背景有两个圆形的半透明元素，整个页面使用了flex布局，并且在水平和垂直方向上都居中对齐。登录框使用了阴影效果和圆角边框，并且在水平和......
  • CSS、JS之滚动导航栏
    效果演示实现了一个滚动导航栏，包括一个固定在页面顶部的导航栏和四个全屏高度的区块。导航栏的背景颜色为半透明黑色，高度为60px，导航链接为白色，字体大小为30px，链接之间有15px的间距。当鼠标悬停在链接上时，下划线会出现。四个区块的背景颜色分别为#95e1d3、#eaffd0、#fce38a......
  • POA：已开源，蚂蚁集团提出同时预训练多种尺寸网络的自监督范式 | ECCV 2024
    1.概述ApacheHive是一款建立在Hadoop之上的数据仓库工具，它提供了类似于SQL的查询语言，使得用户能够通过简单的SQL语句来处理和分析大规模的数据。本文将深入分析ApacheHive的源代码，探讨其关键组件和工作原理，以便更好地理解其在大数据处理中的角色。2.内容在开始源代码分析之前......
  • 【开源分享】2024PHP在线客服系统源码 带搭建教程
    PHP在线客服系统主要功能：用户信息用户提交：新用户可以通过表单留言输入相关信息，如用户名、密码、邮箱等，完成后获得唯一的用户ID和密码。客服管理客服信息管理：管理客服人员的基本信息，如姓名、工号、权限等。客服工作状态：实时显示客服人员的在线/离线状态，方便客户选择合适的......
  • WebTopo连同ARMxy实现数字化转型可视化解决方案
    随着工业4.0的迅猛发展，企业对于实时数据监控、设备管理和智能化生产的需求日益增加。为了满足这些需求，WebTopo与ARMxy携手推出了一套高效、灵活的数字化转型可视化解决方案。本文将详细介绍WebTopo软件、钡铼ARMxy系列BL340嵌入式计算机，并探讨它们如何共同支持数字化转型。一、WebT......
  • 2024年8月PMP考试考前注意事项说明,请查收！
    距离8月考试只剩1天啦，已经报名的小友准备的怎么样了？今天，就和大家说说考PMP®的注意事项。 错过8月考试的小友别再犹豫啦！本年度最后一次考试PMP®考试火热招生中，想要报名的小友，赶紧安排起来！  一、考试注意事项 1、考试时间及报到要求 考试时长为230分钟，具体时间为上午9:00至12:......
  • 2024年软管防护罩投资机会分析报告-聚亿信息咨询
    【出版机构】：聚亿信息咨询 (广东) 有限公司聚亿信息咨询(Market Monitor Global)调研机构最新发布了【软管防护罩市场调研报告，全球行业规模展望2024-2030】。本市场调研报告为读者提供专业且深入的产品销量、收入、价格、增长率、市场占有规模及竞争对手等数据分析，包含分析过去......
  • 2024年聚丙烯晴针刺毡滤袋行业现状与前景分析-聚亿信息咨询
    【出版机构】：聚亿信息咨询 (广东) 有限公司聚亿信息咨询(Market Monitor Global)调研机构最新发布了【聚丙烯晴针刺毡滤袋市场调研报告，全球行业规模展望2024-2030】。本市场调研报告为读者提供专业且深入的产品销量、收入、价格、增长率、市场占有规模及竞争对手等数据分析，包含......
  • 2024年反向空气滤袋行业现状与前景分析-聚亿信息咨询
    【出版机构】：聚亿信息咨询 (广东) 有限公司聚亿信息咨询(Market Monitor Global)调研机构最新发布了【反向空气滤袋市场调研报告，全球行业规模展望2024-2030】。本市场调研报告为读者提供专业且深入的产品销量、收入、价格、增长率、市场占有规模及竞争对手等数据分析，包含分析过......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99