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

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

news 2026/5/12 3:51:08

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

League Akari：英雄联盟玩家的终极智能助手，5大核心功能全面解析

League Akari&#xff1a;英雄联盟玩家的终极智能助手&#xff0c;5大核心功能全面解析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为…...

编程新知 2026/5/12 3:47:49

Spring Boot 2026教育技术演示项目全栈架构与工程实践解析

1. 项目概述&#xff1a;一个面向未来的教育技术演示 最近在整理开源项目时&#xff0c;我注意到了 holzerjm/GACEP-Spring-2026-demo 这个仓库。乍一看&#xff0c;这个标题信息量不小&#xff0c;它像是一个技术演示&#xff0c;但前缀 GACEP 和 Spring-2026 又透露出…...

编程新知 2026/5/12 3:18:56

SITS 2026多目标优化落地指南：从梯度冲突到任务解耦，7步实现Pareto前沿精度提升23.6%

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI原生多任务学习&#xff1a;SITS 2026多目标优化实战技巧 在SITS 2026竞赛框架下&#xff0c;AI原生多任务学习&#xff08;AI-Native Multi-Task Learning, AMTL&#xff09;不再依赖传统单任务迁移…...

编程新知 2026/5/12 2:41:15

数据标注平台搭建：支持主动学习的智能标注工具

在软件测试领域&#xff0c;测试数据的质量直接决定了测试覆盖率和缺陷发现能力。随着AI驱动测试的兴起&#xff0c;高质量标注数据成为训练测试预言、缺陷预测模型、自动化测试脚本生成等智能测试工具的核心资产。然而&#xff0c;传统的人工标注方式效率低下、一致性差&#…...

编程新知 2026/5/11 20:10:39

Wechatsync（文章同步助手）自动发布神器

下载地址：https://www.chajianxw.com/product-tool/16773.html 安装教程：https://www.chajianxw.com/tutorial/how-to-install-chrome-plugin.html AI-Skills 技能包一键调用：https://ai-skills.ai/?inviteCode=S2JV3NCK 目录 一、引言 二、系统整体架构设计 核心技术栈…...

编程新知 2026/5/11 19:30:42

CANN/ge 图引擎资源释放

aclgrphBuildFinalize 【免费下载链接】ge GE&#xff08;Graph Engine&#xff09;是面向昇腾的图编译器和执行器&#xff0c;提供了计算图优化、多流并行、内存复用和模型下沉等技术手段&#xff0c;加速模型执行效率&#xff0c;减少模型内存占用。 GE 提供对 PyTorch、Tens…...

编程新知 2026/5/11 19:16:26

3分钟零部署：在浏览器中畅玩开源三国杀网页版

3分钟零部署&#xff1a;在浏览器中畅玩开源三国杀网页版 【免费下载链接】noname 项目地址: https://gitcode.com/GitHub_Trending/no/noname 还在为找不到合适的桌游伙伴而烦恼&#xff1f;想随时随地体验三国杀策略对决的乐趣&#xff1f;开源三国杀网页版为你提供了…...

编程新知 2026/5/11 17:42:46

LogExpert终极指南：Windows平台最强大的免费开源日志分析工具

LogExpert终极指南&#xff1a;Windows平台最强大的免费开源日志分析工具 【免费下载链接】LogExpert Windows tail program and log file analyzer. 项目地址: https://gitcode.com/gh_mirrors/lo/LogExpert LogExpert是Windows平台上最强大的免费开源日志分析工具&…...

编程新知 2026/5/11 17:29:12

从皮肤色素基因到育种选择：Fst值在动植物研究中的实战解读指南

从皮肤色素基因到育种选择&#xff1a;Fst值在动植物研究中的实战解读指南 当我们在玉米田里观察不同品种的株高差异&#xff0c;或比较藏猪与大白猪的肉质特性时&#xff0c;本质上都在探索同一个问题&#xff1a;群体间的遗传分化如何塑造了这些表型多样性&#xff1f;Fst值作…...

编程新知 2026/5/11 17:26:03

谷歌排名算法有哪些？ 解决AI生成内容不收录的3个操作方案

2024年3月5日&#xff0c;谷歌启动了一场持续45天的核心算法更新。这次调整导致互联网上超过40%的低质量内容被清除。许多依靠软件大批量产出文章的站点&#xff0c;网页收录量在短时间内缩减了九成。单纯依靠算法堆砌出来的文字&#xff0c;在目前的搜索环境下很难获得生存空间…...

编程新知 2026/5/11 16:36:05