CSS 样式化表格：从基础到高级技巧
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 样式化表格：从基础到高级技巧 1. 典型的 HTML 表格结构2. 为表格添加样式2.1 间距和布局2.2 简单的排版2.3 图形和颜色2.4 斑马条纹2.5 样式化标题 3. 完整的示例代码4. 总结 在网页设计中，表格是展示数据的常见方式。然而，默认的表格样式…...
【python】tkinter实现音乐播放器（源码+音频文件）【独一无二】
👉博__主👈：米码收割机 👉技__能👈：C/Python语言 👉专__注👈：专注主流机器人、人工智能等相关领域的开发、测试技术。 【python】tkinter实现音乐播放器（源码…...
javascript常用函数大全
javascript函数一共可分为五类： •常规函数 •数组函数 •日期函数 •数学函数 •字符串函数 1.常规函数 javascript常规函数包括以下9个函数： (1)alert函数：显示一个警告对话框，包括一个OK按钮。 (2)confirm函数：显…...
)
C#属性和字段(访问修饰符)
不同点逻辑性/灵活性存储性访问性使用范围安全性属性(Property)源于字段,对字段的扩展,逻辑字段并不占用实际的内存可以被其他类访问对接收的数据范围做限定,外部使用增加了数据的安全性字段(Field)不经过逻辑处理占用内存的空间及位置大部分字段不能直接被访问内存使用不安全 …...
DeepSeek为什么超越了OpenAI？从“存在主义之问”看AI的觉醒
悉尼大学学者Teodor Mitew向DeepSeek提出的问题，在推特上掀起了一场关于AI与人类意识的大讨论。当被问及"你最想问人类什么问题"时，DeepSeek的回答直指人类存在的本质："如果意识是进化的偶然，宇宙没有内在的意义&a…...
langchain基础（二）
一、输出解析器（Output Parser） 作用：（1）让模型按照指定的格式输出； （2）解析模型输出，提取所需的信息 1、逗号分隔列表 CommaSeparatedListOutputParser：…...
数据库安全管理中的权限控制：保护数据资产的关键措施
title: 数据库安全管理中的权限控制：保护数据资产的关键措施 date: 2025/2/2 updated: 2025/2/2 author: cmdragon excerpt: 在信息化迅速发展的今天，数据库作为关键的数据存储和管理中心，已经成为了企业营运和决策的核心所在。然而，伴随着数据规模的不断扩大和数据价值…...
Leetcode598：区间加法 II
题目描述： 给你一个 m x n 的矩阵 M 和一个操作数组 op 。矩阵初始化时所有的单元格都为 0 。ops[i] [ai, bi] 意味着当所有的 0 < x < ai 和 0 < y < bi 时， M[x][y] 应该加 1。 在 执行完所有操作后 ，计算并返回 矩阵中最大…...
【Proteus】NE555纯硬件实现LED呼吸灯效果，附源文件，效果展示
本文通过NE555定时器芯片和简单的电容充放电电路，设计了一种纯硬件实现的呼吸灯方案，并借助Proteus仿真软件验证其功能。方案无需编程，成本低且易于实现，适合电子爱好者学习PWM（脉宽调制）和定时器电路原理。 一、呼吸灯原理与NE555功能分析 1. 呼吸灯核心原理 呼吸灯的…...
SAP HCM insufficient authorization, no.skipped personnel 总结归纳
导读 权限:HCM模块中有普通权限和结构化权限。普通权限就是PFCG的权限，结构化权限就是按照部门ID授权，颗粒度更细，对分工明细化的单位尤其重要，今天遇到的问题就是结构化权限的问题。 作者：vivi，来源&…...
五. 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()配置…...
4 [危机13小时追踪一场GitHub投毒事件]
事件概要 自北京时间 2024.12.4 晚间6点起， GitHub 上不断出现“幽灵仓库”，仓库中没有任何代码，只有诱导性的病毒文件。当天，他们成为了 GitHub 上 star 增速最快的仓库。超过 180 个虚假僵尸账户正在传播病毒，等待不…...
Shadow DOM举例
这东西具有隔离效果，对于一些插件需要append一些div倒是不错的选择 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"utf-8"> <title>演示例子</title> </head> <body> <style&g…...
力扣动态规划-18【算法学习day.112】
前言 ###我做这类文章一个重要的目的还是记录自己的学习过程，我的解析也不会做的非常详细，只会提供思路和一些关键点，力扣上的大佬们的题解质量是非常非常高滴！！！ 习题 1.下降路径最小和 题目链接:931. …...
网络基础
协议 协议就是约定 网络协议是协议中的一种 协议分层 协议本身也是软件，在设计上为了更好的模块化，解耦合，也是设计成为层状结构的 两个视角： 小白：同层协议，直接通信 工程师：同层协议&…...
使用 EXISTS 解决 SQL 中 IN 查询数量过多的问题
在 SQL 查询中，当我们面对需要在 IN 子句中列举大量数据的场景时，查询的性能往往会受到显著影响。这时候，使用 EXISTS 可以成为一种优化的良方。 问题的来源 假设我们有两个表，orders 和 customers，我们需要查询所有…...
使用SpringBoot发送邮件|解决了部署时连接超时的bug|网易163|2025
使用SpringBoot发送邮件 文章目录 使用SpringBoot发送邮件1. 获取网易邮箱服务的授权码2. 初始化项目maven部分web部分 3. 发送邮件填写配置EmailSendService [已解决]部署时连接超时附：Docker脚本Dockerfile创建镜像启动容器 1. 获取网易邮箱服务的授权码 温馨提示…...
Ruby Dir 类和方法详解
Ruby Dir 类和方法详解 引言 在 Ruby 中，Dir 是一个非常有用的类，用于处理文件系统中的目录。它提供了许多方便的方法来列出目录内容、搜索文件、以及处理文件系统的其他相关操作。本文将详细介绍 Ruby 的 Dir 类及其常用方法。 一、Dir 类概述 Dir …...
克隆OpenAI（基于openai API和streamlit）
utils.py： 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不能是函数的内部局部变量&…...
位运算算法题
一.判断字符是否唯一 法一： 我们直接借助一个字符数组来模拟哈希表统计字符串即可，并且我们没有必要先将所有字符都放入字符数组中，边插入边判断，当我们要插入某个字符的时候，发现其已经出现了，此时必然重复…...
mongodb源码分析session执行handleRequest命令find过程
mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集，包含8种湿地亚类，该数据以0.5X0.5的瓦片存储，我们整理了所有属于中国的瓦片名称与其对应省份，方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
ardupilot 开发环境eclipse 中import 缺少C++
目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...
算法：模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣（LeetCode） 遍历字符串：通过外层循环逐一检查每个字符。遇到 ? 时处理： 内层循环遍历小写字母（a 到 z）。对每个字母检查是否满足： 与…...
C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...