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

利用HTML5和CSS来实现一个漂亮的表格样式

news 文章来源：https://blog.csdn.net/guo_qiangqiang/article/details/144068635 2025/1/18 14:02:06

利用HTML5和CSS来实现一个漂亮的表格样式

    • 第一步：创建HTML结构
    • 第二步：添加CSS样式
    • 第三步：响应式设计
    • 第四步：加入交互效果

第一步：创建HTML结构

我们将用HTML创建一个基本的表格结构。代码如下：

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>美化表格示例</title><link rel="stylesheet" href="styles.css"> <!-- 引用外部CSS文件 -->
</head><body><table><thead><tr><th>姓名</th> <!-- 表头 --><th>年龄</th><th>城市</th><th>职业</th></tr></thead><tbody><tr><td>张三</td> <!-- 表格内容 --><td>25</td><td>北京</td><td>开发者</td></tr><tr><td>李四</td><td>30</td><td>上海</td><td>设计师</td></tr></tbody></table>
</body></html>

第二步：添加CSS样式

下面是我们可以使用的CSS样式。将以下内容放入一个名为styles.css的文件中：

body {font-family: Arial, sans-serif;  /* 设置全局字体 */margin: 20px;                      /* 页面边距 */
}table {width: 100%;                      /* 表格宽度 */border-collapse: collapse;       /* 合并边框 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}th, td {padding: 15px;                   /* 单元格内边距 */text-align: left;                /* 左对齐 */border: 1px solid #ccc;          /* 块边框 */
}th {background-color: #f2f2f2;      /* 表头背景色 */
}tr:hover {background-color: #f1f1f1;      /* 鼠标悬停效果 */
}

第三步：响应式设计

我们可以通过媒体查询来实现简单的响应式设计，使得表格在移动端上也能较好的显示。添加以下CSS到styles.css：

@media (max-width: 600px) {table {width: 100%;                /* 宽度100% */display: block;            /* 使表格变为块级元素 */overflow-x: auto;          /* 横向滚动 */}th, td {display: block;            /* 每个单元格使用块级样式 */}
}

第四步：加入交互效果

你可以使用JavaScript来增强表格的交互性。例如，当用户点击表格行时，显示更多信息：

<script>const rows = document.querySelectorAll("tbody tr"); // 选择所有表格行rows.forEach(row => {row.addEventListener("click", () => {alert(`你点击了: ${row.cells[0].innerText}`); // 弹出点击的名字});});
</script>

相关文章：

利用HTML5和CSS来实现一个漂亮的表格样式

利用HTML5和CSS来实现一个漂亮的表格样式 第一步&#xff1a;创建HTML结构第二步&#xff1a;添加CSS样式第三步&#xff1a;响应式设计第四步&#xff1a;加入交互效果 第一步&#xff1a;创建HTML结构 我们将用HTML创建一个基本的表格结构。代码如下&#xff1a; <!DOCT…...

编程日记 2024/11/27 9:04:46

Vivado程序固化到Flash

在上板调试FPGA时&#xff0c;通常使用JTAG接口下载程序到FPGA芯片中&#xff0c;FPGA本身是基于RAM工艺的器件&#xff0c;因此掉电后会丢失芯片内的程序&#xff0c;需要重新烧写程序。但是当程序需要投入使用时不能每一次都使用JTAG接口下载程序&#xff0c;一般FPGA的外围会…...

编程日记 2024/11/27 9:03:45

HCIA笔记3--TCP-UDP-交换机工作原理

1. tcp协议 可靠的连接 1.1 报文格式 1.2 三次握手 1.3 四次挥手 为什么TIME_WAIT需要2MSL的等待时间&#xff1f; &#xff08;a&#xff09; 为了实现可靠的关闭 &#xff08;b&#xff09;为了让过期的报文在网络上消失 对于(a), 假设host发给server的last ack丢了。 ser…...

编程日记 2024/11/27 9:02:42

计算机网络的功能

目录 信息交换 资源共享 分布式处理 可靠性增强 集中管理 信息交换 计算机网络最基本的功能之一是允许不同设备之间的数据通信。这包括电子邮件的发送和接收、即时消息的传递、文件传输等。通过网络&#xff0c;用户可以轻松地与全球各地的其他人进行沟通和协作。 信息交…...

编程日记 2024/11/27 9:01:40

Redis设计与实现第14章 -- 服务器 总结（命令执行器 serverCron函数 初始化）

14.1 命令请求的执行过程 一个命令请求从发送到获得回复的过程中&#xff0c;客户端和服务器都需要完成一系列操作。 14.1.1 发送命令请求 当用户在客户端中输入一个命令请求的时候&#xff0c;客户端会把这个命令请求转换为协议格式&#xff0c;然后通过连接到服务器的套接字…...

编程日记 2024/11/27 8:59:38

多输入多输出 | Matlab实现TCN-GRU时间卷积神经网络结合门控循环单元多输入多输出预测

多输入多输出 | Matlab实现TCN-GRU时间卷积神经网络结合门控循环单元多输入多输出预测 目录 多输入多输出 | Matlab实现TCN-GRU时间卷积神经网络结合门控循环单元多输入多输出预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 多输入多输出 | Matlab实现TCN-GRU时间卷积…...

编程日记 2024/11/27 8:56:34

windows安全中心，永久卸载工具分享

使用方法 2024Goby红队版工具分享&#xff0c;附2024年漏洞POC下载 下载链接&#xff1a; https://pan.quark.cn/s/4fc2712a2afc一路回车&#xff0c;选项Y即可 耐心等待几秒种&#xff0c;自动重启 此时打开windows安全中心&#xff0c;已经完全不能使用了&#xff0c;响应…...

编程日记 2024/11/27 8:54:32

《安富莱嵌入式周报》第346期：开源2GHz带宽，12bit分辨率，3.2Gsps采样率示波，开源固件安全分析器, 开源口袋电源，开源健康测量，FreeCAD

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频&#xff1a; https://www.bilibili.com/video/BV1TYBhYKECK/ 《安富莱嵌入式周报》第346期&#xff1a;开源2GHz带…...

编程日记 2024/11/27 8:52:30

Apache OFBiz xmlrpc XXE漏洞（CVE-2018-8033）

目录 1、漏洞描述 2、EXP下载地址 3、EXP利用 1、漏洞描述 Apache OFBiz是一套企业资源计划&#xff08;ERP&#xff09;系统。它提供了广泛的功能&#xff0c;包括销售、采购、库存、财务、CRM等。 Apache OFBiz还具有灵活的架构和可扩展性&#xff0c;允许用户根据业务需求…...

编程日记 2024/11/27 8:50:28

【论文复现】融入模糊规则的宽度神经网络结构

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ 融入模糊规则的宽度神经网络结构 论文概述创新点及贡献 算法流程讲解核心代码复现main.py文件FBLS.py文件 使用方法测试结果示例&#xff1a…...

编程日记 2024/11/27 8:49:26

sql server 获取当前日期的时间戳

SQL Server 获取当前日期的时间戳 在 SQL Server 中&#xff0c;可以使用 GETDATE() 函数获取当前日期和时间。如果想要获取当前日期的时间戳&#xff0c;可以将日期转换为 UNIX 时间戳格式。本文将介绍如何在 SQL Server 中获取当前日期的时间戳&#xff0c;并提供示例代码。 …...

编程日记 2024/11/27 8:48:24

LLM PPT Translator

LLM PPT Translator 引言Github 地址UI PreviewTranslated Result Samples 引言 周末开发了1个PowerPoint文档翻译工具&#xff0c;上传PowerPoint文档&#xff0c;指定想翻译的目标语言&#xff0c;通过LLM的能力将文档翻译成目标语言的文档。 Github 地址 https://github.…...

编程日记 2024/11/27 8:45:19

铲屎官进，2024年宠物空气净化器十大排行，看看哪款吸毛最佳？

不知道最近换毛季&#xff0c;铲屎官们还承受的住吗&#xff1f;我家猫咪每天都在表演“天女散花”&#xff0c;家里没有一块干净的地方&#xff0c;空气中也都是堆积的浮毛&#xff0c;幸好有宠物空气净化器这种清理好物。宠物空气净化器针对宠物浮毛设计&#xff0c;可以有效…...

编程日记 2024/11/27 8:44:18

python 中常用的定积分求解方法

【例1】 解&#xff1a;本例题使用 Scipy 科学计算库的 quad 函数&#xff0c;它的一般形式是 scipy.integrate.quad(f,a,b)&#xff0c;其中 f 是积分的函数名称&#xff0c;a和b分别是下线和上线。 【代码如下】&#xff1a; import numpy as np from scipy.integrate impo…...

编程日记 2024/11/27 8:43:15

音视频相关的一些基本概念

音视频相关的一些基本概念 文章目录 音视频相关的一些基本概念RTTH264profile & levelI帧 vs IDRMP4 封装格式AAC封装格式TS封装格式Reference RTT TCP中的RTT指的是“往返时延”&#xff08;Round-Trip Time&#xff09;&#xff0c;即从发送方发送数据开始&#xff0c;到…...

编程日记 2024/11/27 8:40:11

pikachu文件上传漏洞通关详解

声明&#xff1a;文章只是起演示作用&#xff0c;所有涉及的网站和内容&#xff0c;仅供大家学习交流&#xff0c;如有任何违法行为&#xff0c;均和本人无关&#xff0c;切勿触碰法律底线 目录 概念&#xff1a;什么是文件上传漏洞一、客户端check二、MIME type三、getimagesi…...

编程日记 2024/11/27 8:38:09

【拥抱AI】向量数据库有哪些常见的检索算法？

在信息检索领域&#xff0c;有许多常见的算法用于帮助用户从大量数据中找到相关的信息。以下是一些常见的检索算法&#xff1a; 布尔模型示例&#xff08;文本操作&#xff09; 在文本操作中&#xff0c;布尔模型可以通过编写一个简单的脚本来实现。例如&#xff0c;你可以创…...

编程日记 2024/11/27 8:37:08

Webpack前端工程化进阶系列(二) —— HMR热模块更新(图文+代码)

前言 之前更新过一篇Webpack文章:Webpack入门只看这一篇就够了(图文代码)&#xff0c;没想到颇受好评&#xff0c;很快就阅读量就破万了hhh&#xff0c;应读者私信的要求&#xff0c;决定继续更新Webpack进阶系列的文章&#xff01; 进入今天的主题 —— HMR 热模块替换(HotM…...

编程日记 2024/11/27 8:36:06

【RAG 项目实战 07】替换 ConversationalRetrievalChain（单轮问答）

【RAG 项目实战 07】替换 ConversationalRetrievalChain&#xff08;单轮问答&#xff09; NLP Github 项目&#xff1a; NLP 项目实践&#xff1a;fasterai/nlp-project-practice 介绍&#xff1a;该仓库围绕着 NLP 任务模型的设计、训练、优化、部署和应用&#xff0c;分享大…...

编程日记 2024/11/27 8:35:05

godot游戏引擎_瓦片集和瓦片地图介绍

在 Godot 中&#xff0c;TileSet 和 TileMap 是用于处理瓦片地图的两个关键概念&#xff0c;它们的作用和用途有明显的区别。以下是两者的详细对比&#xff1a; 1. TileSet&#xff08;瓦片集&#xff09; TileSet 是资源&#xff0c;定义瓦片的内容和属性。 特点&#xff1a…...

编程日记 2024/11/27 8:28:58

7、深入剖析PyTorch nn.Module源码

文章目录 1. 重要类2. add_modules3. Apply(fn)4. register_buffer5. nn.Parametersister_parameters6. 后续测试 1. 重要类 nn.module --> 所有神经网络的父类&#xff0c;自定义神经网络需要继承此类&#xff0c;并且自定义__init__,forward函数即可&#xff1a; #!/usr…...

编程日记 2024/11/27 8:27:57

如何提升编程能力第二篇

如何提升编程能力2 1. 引言2. 掌握理论基础2.1 理解编程语言的核心2.2 数据结构与算法2.3 计算机基础与系统设计3.1 多写代码3.2 参与开源项目3.3 开发自己的项目 4. 提高代码质量4.1 代码风格与可读性4.2 测试驱动开发 1. 引言 编程是推动现代科技发展的核心技能&#xff0c;…...

编程日记 2024/11/27 8:24:55

问：SpringBoot核心配置文件都有啥，怎么配？

在SpringBoot的开发过程中&#xff0c;核心配置文件扮演着至关重要的角色。这些文件用于配置应用程序的各种属性和环境设置&#xff0c;使得开发者能够灵活地定制和管理应用程序的行为。本文将探讨SpringBoot的核心配置文件&#xff0c;包括它们的作用、区别&#xff0c;并通过…...

编程日记 2024/11/27 8:23:54

RHCSA作业

课后练习 将整个 /etc 目录下的文件全部打包并用 gzip 压缩成/back/etcback.tar.gz [rootlocalhost ~]# tar -czvf /back/etcback.tar.gz -C / etc 使当前用户永久生效的命令别名&#xff1a;写一个命令命为hello,实现的功能为每输入一次hello命令&#xff0c;就有hello&#…...

编程日记 2024/11/27 8:21:52

ESP32学习笔记_FreeRTOS(3)——SoftwareTimer

摘要(From AI): 这篇笔记全面介绍了 FreeRTOS 软件定时器的核心概念和使用方法&#xff0c;包括定时器的创建、管理、常用 API 和辅助函数&#xff0c;并通过示例代码演示了如何启动、重置和更改定时器的周期。它强调了软件定时器的灵活性、平台无关性以及与硬件定时器的对比 …...

编程日记 2024/11/27 8:19:49

文心一言与千帆大模型平台的区别：探索百度AI生态的双子星

随着人工智能技术的迅猛发展&#xff0c;越来越多的公司开始投入资源开发自己的AI解决方案。在中国&#xff0c;百度作为互联网巨头之一&#xff0c;不仅在搜索引擎领域占据重要位置&#xff0c;还在AI领域取得了显著成就。其中&#xff0c;“文心一言”和“千帆大模型平台”便…...

编程日记 2024/11/27 8:16:47

【c语言】文件操作详解 - 从打开到关闭

文章目录 1. 为什么使用文件&#xff1f;2. 什么是文件&#xff1f;3. 如何标识文件&#xff1f;4. 二进制文件和文本文件&#xff1f;5. 文件的打开和关闭5.1 流和标准流5.1.1 流5.1.2 标准流 5.2 文件指针5.3 文件的打开和关闭 6. 文件的读写顺序6.1 顺序读写函数6.2 对比一组…...

编程日记 2024/11/27 8:13:43

Flink Sink的使用

经过一系列Transformation转换操作后&#xff0c;最后一定要调用Sink操作&#xff0c;才会形成一个完整的DataFlow拓扑。只有调用了Sink操作&#xff0c;才会产生最终的计算结果&#xff0c;这些数据可以写入到的文件、输出到指定的网络端口、消息中间件、外部的文件系统或者是…...

编程日记 2024/11/27 8:10:39

pcl::PointCloud＜PointType＞::Ptr extractedCloud； 尖括号里的值表示什么含义？

在C中&#xff0c;pcl::PointCloud<PointType>::Ptr是一种智能指针&#xff0c;它是Point Cloud Library (PCL)中用于管理pcl::PointCloud对象的智能指针类型。这里的<pcl::PointCloud<PointType>::Ptr>尖括号里的值表示智能指针所指向的对象类型。 让我们分…...

编程日记 2024/11/27 8:08:35

《基于FPGA的便携式PWM方波信号发生器》论文分析（三）——数码管稳定显示与系统调试

一、论文概述 基于FPGA的便携式PWM方波信号发生器是一篇由任青颖、庹忠曜、黄洵桢、李智禺和张贤宇 等人发表的一篇期刊论文。该论文主要研究了一种新型的信号发生器&#xff0c;旨在解决传统PWM信号发生器在移动设备信号调控中存在的精准度低和便携性差的问题 。其基于现场可编…...

编程日记 2024/11/27 8:06:32

wordpress 登录页面变了/营销网页

Linux中如果直接使用物理磁盘的分区为作为文件系统&#xff0c;那么一旦磁盘空间满了&#xff0c;就不易扩容&#xff0c;而使用逻辑卷的话&#xff0c;可以先往逻辑卷所在卷组(VG, Volumn Group)增加物理卷(PV, Physical Volumn)&#xff0c;增加之后&#xff0c;再对逻辑卷括…...

编程日记 2025/1/18 11:03:16

如何设置网站服务器/排名优化网站seo排名

PHP实现抓取HTTPS内容文章主要介绍了PHP实现抓取HTTPS内容,以及遇到的问题的解决方法&#xff0c;需要的朋友可以参考下。最近在研究Hacker News API时遇到一个HTTPS问题。因为所有的Hacker News API都是通过加密的HTTPS协议访问的&#xff0c;跟普通的.HTTP协议不同&#xff0…...

编程日记 2025/1/18 8:24:44

批量入侵wordpress/拉新app渠道

背景 最近一直在做公司的应用软件服务架构的升级工作&#xff0c;里面涉及使用mod_proxy替换先前的mod_ajp&#xff0c;因为我们要用jetty7。 同时万恶的jetty 7对ajp协议支持不是很好&#xff0c; 具体可见我的另一篇博文&#xff1a;　纠结的mod_jk与jetty的组合。　在线下测…...

编程日记 2025/1/18 5:51:47

深圳微信网站建设报价/网站建设与管理

版权声明&#xff1a; 专注于"GIS"前沿技术的研究与交流&#xff0c;将云计算技术、大数据技术、容器技术、物联网与GIS进行深度融合&#xff0c;探讨"GIS"技术和行业解决方案&#xff1b;文章允许转载&#xff0c;但必须以链接方式注明源地址&#xff0c;…...

编程日记 2025/1/18 1:24:50

产品设计培训机构排名/卢镇seo网站优化排名

想在手机上查看你的网站流量分析吗&#xff1f;你可能会想&#xff0c;流量分析&#xff1f;不是有功能强大的Google Analytics吗&#xff1f;但这不是应用啊。你可能再想&#xff0c;这类移动应用不是有Analytics App或Quicklytics吗&#xff1f;可是这些应用收费都高啊。 新推…...

编程日记 2025/1/18 0:21:56

白沟做网站/企业网站设计制作

文章目录练习9.41练习9.42练习9.43练习9.44练习9.45练习9.46练习9.47练习9.48练习9.49练习9.50练习9.41 编写程序&#xff0c;从一个vector初始化一个string。 vector<char> v{ h, e, l, l, o }; string str(v.cbegin(), v.cend());练习9.42 假定你希望每次读取一个字符存…...

编程日记 2025/1/17 22:51:38