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

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

news 2026/2/8 16:35:22

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

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/2 2:30:58

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/2/4 10:54:26

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/11/5 4:36:26

从零手写Java版本的LSM Tree （一）：LSM Tree 概述

&#x1f525; 推荐一个高质量的Java LSM Tree开源项目&#xff01; https://github.com/brianxiadong/java-lsm-tree java-lsm-tree 是一个从零实现的Log-Structured Merge Tree&#xff0c;专为高并发写入场景设计。 核心亮点&#xff1a; ⚡ 极致性能&#xff1a;写入速度超…...

编程新知 2026/2/8 2:26:12

【2D与3D SLAM中的扫描匹配算法全面解析】

引言 扫描匹配(Scan Matching)是同步定位与地图构建(SLAM)系统中的核心组件&#xff0c;它通过对齐连续的传感器观测数据来估计机器人的运动。本文将深入探讨2D和3D SLAM中的各种扫描匹配算法&#xff0c;包括数学原理、实现细节以及实际应用中的性能对比&#xff0c;特别关注…...

编程新知 2026/2/6 4:47:11

基于django+vue的健身房管理系统-vue

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.8数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat12开发软件&#xff1a;PyCharm 系统展示 会员信息管理 员工信息管理 会员卡类型管理 健身项目管理 会员卡管理 摘要 健身房管理…...

编程新知 2026/2/7 1:51:26