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

于 2024-08-30 14:56:09 发布
阅读量433 收藏 2
点赞数 26
分类专栏： WEB前端 文章标签： 前端 css css3 html 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LEECOO666/article/details/141718390
版权

表格在网页设计中扮演了重要角色，尤其是在展示数据和信息时。尽管 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>

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

一条晒干的咸魚
关注
  • 26
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[HTML]Web前端开发技术7（HTML5、CSS3、JavaScript ）CSS的定位机制——喵喵画网页
ormstq的博客
12-05 2564
CSS的定位机制文档流定位元素类型浮动定位float的用处float的特点clear属性层定位position属性fixed固定定位相对定位：relative课后练习网页标题：CSS背景样式的应用网页标题：背景图像的应用网页标题：炫彩网站Logo网页标题：鼠标悬停效果
“从零开始的HTML 表格”——WEB开发系列09
一条晒干的咸鱼的博客
08-14 1065
HTML 表格是一种用于在网页上组织和显示信息的结构性元素，它能够将数据以行和列的形式呈现，帮助用户更清晰地理解数据关系。表格在展示统计数据、产品列表、日程安排等方面非常实用。
CSS入门到精通——表格样式
weixin_54327001的博客
12-15 9361
第1关：表格边框 任务描述 本关任务：在本关中，我们将学习如何使用CSS设置表格样式，使表格更好看。本关任务完成之后的效果图(index.html)如下： 相关知识 为了完成本关任务，请大家认真阅读以下内容。 在之前的HTML教程中，我们学习了各类基本表格。 例如，下面网页代码的表格： HTML 页面： <body> <table width="400"> <!-- 表标题 --> <caption>通讯录</capti
响应式 HTML 表单设计——WEB开发系列11
一条晒干的咸鱼的博客
08-17 1067
HTML 表单是 Web 应用程序的重要组成部分，用户通过它与网站交互，可以填写信息、提交数据等。HTML 表单用于收集用户的输入信息。HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
Web前端开发——CSS样式（Ⅲ）列表、表格样式
wq_ocean_的博客
02-04 6908
1. 列表 这里的列表样式指的是无序列表u1、有序列表ol的共用样式 1.1 list-style 表示将列表的所有子样式，都放在一个属性当中声明出来 1.2 list-style-image 它可以规定这个列表的标号是一幅图片，起到美化界面的效果 1.2.1 文件组织形式 images内是一幅作为标号的图片 1.2.2 测试代码 <!doctyp...
头歌教学实践平台 Web前端开发基础 CSS-表格样式
01-20
"头歌教学实践平台"提供的"CSS——表格样式"课程，通过实际案例和练习，帮助学习者理解并运用上述知识点，提升Web前端开发技能。 总之，理解和掌握CSS在表格样式设计中的应用，对于构建美观且功能齐全的网页至关...
web开发——CSS语法（二）.docx
09-26
在Web开发中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）文档中元素外观、布局和结构的重要样式语言。本文主要关注CSS语法的第二部分，涵盖了一些核心概念，如规则的组织、空格和大...
web开发——CSS类选择器.docx
09-26
CSS 类选择器 CSS 类选择器是 CSS 中的一种选择器，用于选择拥有特定类名的 HTML 元素。类选择器以一个点号（.）开头，后面跟着类名。 例如，`.center {text-align: center}`，这意味着所有拥有 center 类的 HTML ...
Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript
08-10
CSS样式代码 ```css /* 全局样式 */ body { font-family: Arial, sans-serif; color: #333; } .content { max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f4f4f4; } .menu ul { ...
JavaScript代码片段
weixin_66128399的博客
08-26 512
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
Window Performance API
Bruce__taotao的博客
08-28 750
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
vue 通过事件的形式调用全局组件
最新发布
liux6687的博客
08-29 291
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
vue ref和reactive区别
灰海
08-25 1792
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
vue3插件原理
m0_46281382的博客
08-26 967
简述vue3中use方法加载第三方插件原理
AI 大模型时代，对前端工程师有哪些机遇和挑战？
Z4400840的博客
08-28 581
AI 大模型时代为前端工程师带来了丰富的机遇，同时也带来了挑战。前端工程师需要积极适应这些变化，掌握新的技能，以抓住时代发展的红利。通过不断学习和提升技术水平，前端工程师可以在AI时代中发挥更大的作用，创造更多的价值。
前端开发学习Docker记录02容器操作
第⑦个前端
08-29 305
使用docker ps 可以看到有哪些镜像在运行。
零基础5分钟上手亚马逊云科技-云原生架构设计
m0_66628975的博客
08-26 1829
欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。我会每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS最佳实践，并应用到自己的日常工作里。
前端自动导入依赖
owo_ovo的博客
08-26 446
前端模块自动导入的插件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值