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

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

news 2025/7/3 15:12:42

利用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

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/6/17 3:47:36

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

编程新知 2025/6/21 3:36:25

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2025/7/1 6:03:26

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/6/17 16:58:36

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/6/24 2:02:57

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/6/21 8:09:03

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/6/16 21:35:46

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/6/21 12:56:10

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/6/16 13:45:35

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

编程新知 2025/6/26 1:16:57