当前位置： 首页 > news >正文

CSS 样式化表格：从基础到高级技巧

news 2025/11/5 15:00:42

CSS 样式化表格：从基础到高级技巧

    • 1. 典型的 HTML 表格结构
    • 2. 为表格添加样式
      • 2.1 间距和布局
      • 2.2 简单的排版
      • 2.3 图形和颜色
      • 2.4 斑马条纹
      • 2.5 样式化标题
    • 3. 完整的示例代码
    • 4. 总结

在网页设计中，表格是展示数据的常见方式。然而，默认的表格样式通常显得单调且难以阅读。本文将详细介绍如何使用 CSS 为 HTML 表格添加样式，使其更加美观和易于理解。我们将通过一个完整的示例代码，逐步优化表格的外观。

1. 典型的 HTML 表格结构

让我们从一个典型的 HTML 表格开始。以下是一个展示英国著名朋克乐队信息的表格：

<table><caption>A summary of the UK's most famous punk bands</caption><thead><tr><th scope="col">Band</th><th scope="col">Year formed</th><th scope="col">No. of Albums</th><th scope="col">Most famous song</th></tr></thead><tbody><tr><th scope="row">Buzzcocks</th><td>1976</td><td>9</td><td>Ever fallen in love (with someone you shouldn't've)</td></tr><tr><th scope="row">The Clash</th><td>1976</td><td>6</td><td>London Calling</td></tr><tr><th scope="row">The Stranglers</th><td>1974</td><td>17</td><td>No More Heroes</td></tr></tbody><tfoot><tr><th scope="row" colspan="2">Total albums</th><td colspan="2">77</td></tr></tfoot>
</table>

2. 为表格添加样式

2.1 间距和布局

首先，我们需要调整表格的间距和布局，使其更加清晰。我们将使用 table-layout: fixed 和 border-collapse: collapse 来控制表格的布局和边框。

/* 间距 */
table {table-layout: fixed;width: 100%;border-collapse: collapse;border: 3px solid purple;
}thead th:nth-child(1) {width: 30%;
}thead th:nth-child(2) {width: 20%;
}thead th:nth-child(3) {width: 15%;
}thead th:nth-child(4) {width: 35%;
}th,
td {padding: 20px;
}

2.2 简单的排版

接下来，我们为表格添加一些简单的排版样式，以提高可读性。

/* 排版 */
html {font-family: "helvetica neue", helvetica, arial, sans-serif;
}thead th,
tfoot th {font-family: "Rock Salt", cursive;
}th {letter-spacing: 2px;
}td {letter-spacing: 1px;
}tbody td {text-align: center;
}tfoot th {text-align: right;
}

2.3 图形和颜色

为了让表格更具视觉吸引力，我们可以为表头和表尾添加背景图像和颜色。

/* 图形和颜色 */
thead,
tfoot {background: url(leopardskin.jpg);color: white;text-shadow: 1px 1px 1px black;
}thead th,
tfoot th,
tfoot td {background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));border: 3px solid purple;
}

2.4 斑马条纹

为了增强表格的可读性，我们可以为表格的行添加斑马条纹效果。

/* 斑马条纹 */
tbody tr:nth-child(odd) {background-color: #ff33cc;
}tbody tr:nth-child(even) {background-color: #e495e4;
}tbody tr {background-image: url(noise.png);
}table {background-color: #ff33cc;
}

2.5 样式化标题

最后，我们为表格的标题添加样式，使其更加突出。

/* 标题 */
caption {font-family: "Rock Salt", cursive;padding: 20px;font-style: italic;caption-side: bottom;color: #666;text-align: right;letter-spacing: 1px;
}

3. 完整的示例代码

以下是完整的 HTML 和 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><link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css"><style>/* 间距 */table {table-layout: fixed;width: 100%;border-collapse: collapse;border: 3px solid purple;}thead th:nth-child(1) {width: 30%;}thead th:nth-child(2) {width: 20%;}thead th:nth-child(3) {width: 15%;}thead th:nth-child(4) {width: 35%;}th,td {padding: 20px;}/* 排版 */html {font-family: "helvetica neue", helvetica, arial, sans-serif;}thead th,tfoot th {font-family: "Rock Salt", cursive;}th {letter-spacing: 2px;}td {letter-spacing: 1px;}tbody td {text-align: center;}tfoot th {text-align: right;}/* 图形和颜色 */thead,tfoot {background: url(leopardskin.jpg);color: white;text-shadow: 1px 1px 1px black;}thead th,tfoot th,tfoot td {background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));border: 3px solid purple;}/* 斑马条纹 */tbody tr:nth-child(odd) {background-color: #ff33cc;}tbody tr:nth-child(even) {background-color: #e495e4;}tbody tr {background-image: url(noise.png);}table {background-color: #ff33cc;}/* 标题 */caption {font-family: "Rock Salt", cursive;padding: 20px;font-style: italic;caption-side: bottom;color: #666;text-align: right;letter-spacing: 1px;}</style>
</head>
<body><table><caption>A summary of the UK's most famous punk bands</caption><thead><tr><th scope="col">Band</th><th scope="col">Year formed</th><th scope="col">No. of Albums</th><th scope="col">Most famous song</th></tr></thead><tbody><tr><th scope="row">Buzzcocks</th><td>1976</td><td>9</td><td>Ever fallen in love (with someone you shouldn't've)</td></tr><tr><th scope="row">The Clash</th><td>1976</td><td>6</td><td>London Calling</td></tr><tr><th scope="row">The Stranglers</th><td>1974</td><td>17</td><td>No More Heroes</td></tr></tbody><tfoot><tr><th scope="row" colspan="2">Total albums</th><td colspan="2">77</td></tr></tfoot></table>
</body>
</html>

4. 总结

通过本文的学习，你应该已经掌握了如何使用 CSS 为 HTML 表格添加样式。从调整间距和布局到添加斑马条纹和背景图像，CSS 提供了丰富的工具来美化表格。

相关文章：

CSS 样式化表格：从基础到高级技巧

CSS 样式化表格&#xff1a;从基础到高级技巧 1. 典型的 HTML 表格结构2. 为表格添加样式2.1 间距和布局2.2 简单的排版2.3 图形和颜色2.4 斑马条纹2.5 样式化标题 3. 完整的示例代码4. 总结 在网页设计中&#xff0c;表格是展示数据的常见方式。然而&#xff0c;默认的表格样式…...

编程日记 2025/2/4 0:38:01

【python】tkinter实现音乐播放器（源码+音频文件）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;专__注&#x1f448;&#xff1a;专注主流机器人、人工智能等相关领域的开发、测试技术。 【python】tkinter实现音乐播放器&#xff08;源码…...

编程日记 2025/2/4 0:37:00

javascript常用函数大全

javascript函数一共可分为五类&#xff1a; •常规函数 •数组函数 •日期函数 •数学函数 •字符串函数 1.常规函数 javascript常规函数包括以下9个函数&#xff1a; (1)alert函数&#xff1a;显示一个警告对话框&#xff0c;包括一个OK按钮。 (2)confirm函数&#xff1a;显…...

编程日记 2025/2/4 0:34:51

C#属性和字段(访问修饰符)

不同点逻辑性/灵活性存储性访问性使用范围安全性属性(Property)源于字段,对字段的扩展,逻辑字段并不占用实际的内存可以被其他类访问对接收的数据范围做限定,外部使用增加了数据的安全性字段(Field)不经过逻辑处理占用内存的空间及位置大部分字段不能直接被访问内存使用不安全 …...

编程日记 2025/2/4 0:32:47

DeepSeek为什么超越了OpenAI？从“存在主义之问”看AI的觉醒

悉尼大学学者Teodor Mitew向DeepSeek提出的问题&#xff0c;在推特上掀起了一场关于AI与人类意识的大讨论。当被问及"你最想问人类什么问题"时&#xff0c;DeepSeek的回答直指人类存在的本质&#xff1a;"如果意识是进化的偶然&#xff0c;宇宙没有内在的意义&a…...

编程日记 2025/2/4 0:28:39

langchain基础（二）

一、输出解析器&#xff08;Output Parser&#xff09; 作用&#xff1a;&#xff08;1&#xff09;让模型按照指定的格式输出&#xff1b; &#xff08;2&#xff09;解析模型输出&#xff0c;提取所需的信息 1、逗号分隔列表 CommaSeparatedListOutputParser&#xff1a;…...

编程日记 2025/2/4 0:26:36

数据库安全管理中的权限控制：保护数据资产的关键措施

title: 数据库安全管理中的权限控制：保护数据资产的关键措施 date: 2025/2/2 updated: 2025/2/2 author: cmdragon excerpt: 在信息化迅速发展的今天，数据库作为关键的数据存储和管理中心，已经成为了企业营运和决策的核心所在。然而，伴随着数据规模的不断扩大和数据价值…...

编程日记 2025/2/4 0:23:31

Leetcode598：区间加法 II

题目描述&#xff1a; 给你一个 m x n 的矩阵 M 和一个操作数组 op 。矩阵初始化时所有的单元格都为 0 。ops[i] [ai, bi] 意味着当所有的 0 < x < ai 和 0 < y < bi 时&#xff0c; M[x][y] 应该加 1。 在 执行完所有操作后 &#xff0c;计算并返回 矩阵中最大…...

编程日记 2025/2/4 0:21:29

【Proteus】NE555纯硬件实现LED呼吸灯效果，附源文件，效果展示

本文通过NE555定时器芯片和简单的电容充放电电路，设计了一种纯硬件实现的呼吸灯方案，并借助Proteus仿真软件验证其功能。方案无需编程，成本低且易于实现，适合电子爱好者学习PWM（脉宽调制）和定时器电路原理。 一、呼吸灯原理与NE555功能分析 1. 呼吸灯核心原理 呼吸灯的…...

编程日记 2025/2/4 0:18:25

SAP HCM insufficient authorization, no.skipped personnel 总结归纳

导读 权限:HCM模块中有普通权限和结构化权限。普通权限就是PFCG的权限&#xff0c;结构化权限就是按照部门ID授权&#xff0c;颗粒度更细&#xff0c;对分工明细化的单位尤其重要&#xff0c;今天遇到的问题就是结构化权限的问题。 作者&#xff1a;vivi&#xff0c;来源&…...

编程日记 2025/2/4 0:13:18

五. Redis 配置内容(详细配置说明)

五. Redis 配置内容(详细配置说明) 文章目录 五. Redis 配置内容(详细配置说明)1. Units 单位配置2. INCLUDES (包含)配置3. NETWORK (网络)配置3.1 bind(配置访问内容)3.2 protected-mode (保护模式)3.3 port(端口)配置3.4 timeout(客户端超时时间)配置3.5 tcp-keepalive()配置…...

编程日记 2025/2/4 0:10:13

4 [危机13小时追踪一场GitHub投毒事件]

事件概要 自北京时间 2024.12.4 晚间6点起&#xff0c; GitHub 上不断出现“幽灵仓库”&#xff0c;仓库中没有任何代码&#xff0c;只有诱导性的病毒文件。当天&#xff0c;他们成为了 GitHub 上 star 增速最快的仓库。超过 180 个虚假僵尸账户正在传播病毒&#xff0c;等待不…...

编程日记 2025/2/4 0:09:09

Shadow DOM举例

这东西具有隔离效果&#xff0c;对于一些插件需要append一些div倒是不错的选择 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"utf-8"> <title>演示例子</title> </head> <body> <style&g…...

编程日记 2025/2/4 0:07:05

力扣动态规划-18【算法学习day.112】

前言 ###我做这类文章一个重要的目的还是记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&#xff01;&#xff01;&#xff01; 习题 1.下降路径最小和 题目链接:931. …...

编程日记 2025/2/4 0:03:00

网络基础

协议 协议就是约定 网络协议是协议中的一种 协议分层 协议本身也是软件&#xff0c;在设计上为了更好的模块化&#xff0c;解耦合&#xff0c;也是设计成为层状结构的 两个视角&#xff1a; 小白&#xff1a;同层协议&#xff0c;直接通信 工程师&#xff1a;同层协议&…...

编程日记 2025/2/4 0:01:59

使用 EXISTS 解决 SQL 中 IN 查询数量过多的问题

在 SQL 查询中&#xff0c;当我们面对需要在 IN 子句中列举大量数据的场景时&#xff0c;查询的性能往往会受到显著影响。这时候&#xff0c;使用 EXISTS 可以成为一种优化的良方。 问题的来源 假设我们有两个表&#xff0c;orders 和 customers&#xff0c;我们需要查询所有…...

编程日记 2025/2/3 23:59:58

使用SpringBoot发送邮件|解决了部署时连接超时的bug|网易163|2025

使用SpringBoot发送邮件 文章目录 使用SpringBoot发送邮件1. 获取网易邮箱服务的授权码2. 初始化项目maven部分web部分 3. 发送邮件填写配置EmailSendService [已解决]部署时连接超时附&#xff1a;Docker脚本Dockerfile创建镜像启动容器 1. 获取网易邮箱服务的授权码 温馨提示…...

编程日记 2025/2/3 23:57:54

Ruby Dir 类和方法详解

Ruby Dir 类和方法详解 引言 在 Ruby 中&#xff0c;Dir 是一个非常有用的类&#xff0c;用于处理文件系统中的目录。它提供了许多方便的方法来列出目录内容、搜索文件、以及处理文件系统的其他相关操作。本文将详细介绍 Ruby 的 Dir 类及其常用方法。 一、Dir 类概述 Dir …...

编程日记 2025/2/3 23:52:46

克隆OpenAI（基于openai API和streamlit）

utils.py&#xff1a; from langchain_openai import ChatOpenAI from langchain.memory import ConversationBufferMemory from langchain.chains import ConversationChain import osdef get_chat_response(api_key,prompt,memory): # memory不能是函数的内部局部变量&…...

编程日记 2025/2/3 23:43:30

位运算算法题

一.判断字符是否唯一 法一&#xff1a; 我们直接借助一个字符数组来模拟哈希表统计字符串即可&#xff0c;并且我们没有必要先将所有字符都放入字符数组中&#xff0c;边插入边判断&#xff0c;当我们要插入某个字符的时候&#xff0c;发现其已经出现了&#xff0c;此时必然重复…...

编程日记 2025/2/3 23:42:27

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/10/30 4:27:23

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/11/5 3:45:16

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/10/31 20:24:01

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/11/2 9:57:20

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/11/5 1:22:14

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/11/4 13:40:14

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

编程新知 2025/9/18 11:31:13

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

编程新知 2025/9/12 8:21:45

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/10/27 3:10:54