前端css中table表格的属性使用

前端css中table表格的属性使用

  • 一、前言
  • 二、常见的表格属性
    • 1.边框的样式
    • 2.布局和对齐
    • 3.间距和填充
    • 4.背景和颜色
    • 5.字体的样式
    • 6.边框的圆角
  • 三、简单的表格,例子1
    • 1.源码1
    • 2.源码1效果截图
  • 四、给表格添加动画效果,例子2
    • 1.源码2
    • 2.源码2的运行效果
  • 五、结语
  • 六、定位日期

一、前言

今天学习到关于table(表格)的css属性,为了让学习更有趣以及回顾往日的学习内容,笔者除了描写关于基本的宽、高、间距等属性外,还添加了前几天的博文提到“:hover”伪类选择器的使用,transition(过渡)的使用,以及给表格添加背景颜色或图片,模糊和阴影效果等。

二、常见的表格属性

1.边框的样式

关键词说明
dorder设置边框的样式、宽度、颜色
border-collapse边框合一显示,因默认两表格内容之间都各自有边框,需要两边框只显示一条则用此,separate(不相关的)边框分开显示,collapse(坍塌)边框合并显示
border-spacingspacing(行距),当边框未合并为一显示时,这个用来设置表格单元格之间的间距

2.布局和对齐

关键词说明
width、height控制表格宽度和高度
text-align单元格文本水平对齐,align(对齐)
vertical-align单元格内容的垂直对齐,vertical(垂直的)

3.间距和填充

关键词说明
padding内边距,表格内容与边界之间的空间
margin外边距,表格与其他元素之间的空间

4.背景和颜色

关键词说明
background-color背景颜色
background-image表格背景上添加一张图片
color表格内文本的颜色

5.字体的样式

关键词说明
font-family字体
font-size文本的大小
font-weight文本的粗细

6.边框的圆角

关键词说明
border-radius边角变圆

三、简单的表格,例子1

我们先简单编写各关于表格的源码1,其中默认情况下
border-collapse: collapse; /* 边框合并,移除单元格之间的间隔 */
并没有注释,用于展示单元格间边框合二为一的效果,运行效果为后面的截图a。除此,我们还想展现没有使边框没有合二为一的情况,这时只需要把
border-spacing:20px; /*各单元格间距*/
取消注释,当然也不能忘了把border-collapse: collapse;注释掉,因为单元格边框合并情况下是没法设置spacing(间距)的。此外,为了更美观,还给大表格(外围那个天蓝色框框)添加了个50px的圆角。这个效果定位截图b

1.源码1

源码1 如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小蜗牛764号的表格</title>
<style>/* 主表格样式设置 */table {border: 3px solid aqua; /* 设置表格整体边框为3px宽,颜色为水蓝色 */width: 80%; /* 表格宽度占屏幕宽度的80%,以支持响应式设计 */margin: 20px auto; /* 设置表格上下间距为20px,并在页面中水平居中 */box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 为表格添加轻微的阴影,增强视觉深度感 */border-collapse: collapse; /* 边框合并,移除单元格之间的间隔 */font-family: "宋体"; /* 指定表格字体为宋体,适合中文显示 */font-size: 30px; /* 设置字体大小为30px,确保文本清晰可读 *//*       border-spacing:20px; /*各单元格间距*//*       border-radius:50px; /*设置圆角*/}/* 设置表头和单元格的公共样式 */th, td {border: 2px solid #007BFF; /* 单元格边框设置为2px宽,蓝色,增加视觉辨识度 */padding: 10px; /* 单元格内部填充10px,使内容更为舒展 */text-align: center; /* 文本居中显示,使表格内容整齐划一 */background-color: #f8f9fa; /* 单元格背景颜色设置为浅灰蓝色,柔和不刺眼 */}/* 特定样式用于表头 */th {background-color: #007BFF; /* 表头背景颜色为明亮的蓝色,与单元格区分 */color: white; /* 表头文本颜色为白色,对比蓝色背景,提升可读性 */border-color: #0056b3; /* 表头边框颜色为深蓝色,强化视觉层次感 */}
</style>
</head>
<body><table><tr><th>姓名</th> <!-- 表头单元格,显示列名为“姓名” --><th>年龄</th> <!-- 表头单元格,显示列名为“年龄” --><th>职业</th> <!-- 表头单元格,显示列名为“职业” --></tr><tr><td>小蜗牛1号</td> <!-- 数据单元格,显示内容为“小蜗牛1号” --><td>30</td> <!-- 数据单元格,显示内容为“30” --><td>小说家</td> <!-- 数据单元格,显示内容为“小说家” --></tr><tr><td>小蜗牛2号</td> <!-- 数据单元格,显示内容为“小蜗牛2号” --><td>28</td> <!-- 数据单元格,显示内容为“28” --><td>画家</td> <!-- 数据单元格,显示内容为“画家” --></tr><tr><td>小蜗牛3号</td> <!-- 数据单元格,显示内容为“小蜗牛3号” --><td>35</td> <!-- 数据单元格,显示内容为“35” --><td>厨师</td> <!-- 数据单元格,显示内容为“厨师” --></tr></table>
</body>
</html>

2.源码1效果截图

  • 源码默认情况下,各单元格间的边框合并,截图a如下图:
    在这里插入图片描述

  • 注释掉单元格线框合并情况,增加单元格间的间距,截图b如下:
    在这里插入图片描述

四、给表格添加动画效果,例子2

结合前几篇博文关于“:hover”伪选择器等的用法,以及新的关于( filter: blur(1px); /* 单元格默认应用轻微模糊效果)等的效果,编写一个鼠标悬停能发生变化的表格,附名源码2,具体如下:

1.源码2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小蜗牛764号的</title>
<style>/* 主表格样式设置 */table {width: 800px; /* 定义表格宽度 */height: 600px; /* 定义表格高度 */margin: 20px auto; /* 设置表格居中,并在上下各添加20px的边距 */border: 5px solid rgba(215, 29, 51, 0.7); /* 设置表格边框,使用半透明的红色 */border-radius: 5px; /* 设置边框圆角 */background-image: url("./小蜗牛.jpg"); /* 设置表格的背景图片 */background-size: cover; /* 背景图片覆盖整个表格区域 */background-position: center; /* 背景图片居中显示 */}/* 设置表头和单元格的通用样式 */th, td {border: 2px solid blueviolet; /* 单元格边框设置为2px宽,蓝紫色 */padding: 20px; /* 单元格内边距 */text-align: center; /* 文本居中对齐 */border-radius: 20px; /* 设置圆角 */transition: transform 0.3s ease; /* 设置变形动画,持续0.3秒 */}/* 设置表头特定样式 */th {background-color: aqua; /* 表头背景色设置为浅蓝色 */color: green; /* 表头文字颜色设置为绿色 */}/* 设置单元格特定样式 */td {background-image: url(./小蜗牛.jpg); /* 单元格背景图片与表格相同 */background-size: cover; /* 背景图片覆盖整个单元格 */background-position: center; /* 背景图片居中显示 */color: aqua; /* 单元格文字颜色设置为浅蓝色 */filter: blur(1px); /* 单元格默认应用轻微模糊效果 */}/* 设置表头鼠标悬停效果 */th:hover {transform: scale(1.2); /* 悬停时放大1.2倍 */box-shadow: 0 5px 20px rgba(89, 14, 156, 0.7); /* 添加阴影效果 */filter: blur(1px); /* 悬停时保持轻微模糊效果 */}/* 设置单元格鼠标悬停效果 */td:hover {filter: blur(0); /* 悬停时取消模糊效果 */transform: scale(0.9); /* 悬停时缩小到0.9倍 */box-shadow: 0 10px 20px rgba(204, 18, 86, 0.7); /* 添加深红色阴影效果 */}
</style>
</head>
<body><div><table><tr><th>表头 A</th><th>表头 B</th><th>表头 C</th><th>表头 D</th></tr><tr><td>元素 1</td><td>元素 2</td><td>元素 3</td><td>元素 4</td></tr><tr><td>元素 5</td><td>元素 6</td><td>元素 7</td><td>元素 8</td></tr><tr><td>元素 9</td><td>元素 10</td><td>元素 11</td><td>元素 12</td></tr></table></div>
</body>
</html>

2.源码2的运行效果

  • 视频效果如下:

css表格table使用hover的效果

  • 鼠标未悬停时,表头未模糊,各元素是模糊的,效果截图如下:
    在这里插入图片描述
  • 鼠标悬停于表头上时,表头变大,且变清晰,效果截图如下(鼠标随机选择):
    在这里插入图片描述
    在这里插入图片描述
  • 鼠标悬停于元素内容上时,元素变小,变模糊,效果截图如下(鼠标随机选择):
    在这里插入图片描述
    在这里插入图片描述

五、结语

有时候自己对于某个知识了解后,要自己描写把它写出来真不容易。
本文是在学习table表格中的css属性的同时,还结合了前面几天学到的知识transition、hover等。在学习新东西的同时,又回顾复习了学过的东西,这样学习的效率会高一些的吧。本文还增加了关于模糊效果的使用,这边只是简单提及一下,这个效果仍值得深入学习一些。会的终究还是太少了,还得努力学习才行。

六、定位日期

2024.4.20
17:59

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/636258.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux文件系统 软硬链接

文章目录 文件背景知识磁盘文件磁盘物理结构磁盘存储结构对磁盘的存储进行逻辑抽象Boot BlockSuper blockData blocksInode TableBlcokBitmapinode BitmapGroup Descriptor Table 文件名和inode编号创建文件删除文件查找文件 软硬链接软链接硬链接查看文件信息stat命令取消软硬…

数据结构 -- 二叉树二叉搜索树

二叉树 二叉树是这么一种树状结构&#xff1a;每个节点最多有两个孩子&#xff0c;左孩子和右孩子 重要的二叉树结构 完全二叉树&#xff08;complete binary tree&#xff09;是一种二叉树结构&#xff0c;除最后一层以外&#xff0c;每一层都必须填满&#xff0c;填充时要遵…

百科不全书之 docker记录

docker记录 1.参考文件2. Docker简介与虚拟机的区别 3. 安装Docker注意 Windows家庭版的要额外设置 4.使用5.docker与ROS 1.参考文件 参考视频&#xff1a;B站【GeekHour】Docker入门教程: 【GeekHour】30分钟Docker入门教程 2. Docker简介 Docker是一个用于构建运行 传送…

【智能算法】吉萨金子塔建造算法(GPC)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2021年&#xff0c;S Harifi等人受到观古代遗迹构造启发&#xff0c;提出了吉萨金子塔建造算法&#xff08;Giza Pyramids Construction, GPC&#xff09;。 2.算法原理 2.1算法思想 GPC模拟了古埃…

Python 面向对象——1.基本概念

本章学习链接如下&#xff1a; 基本概念与语法 类&#xff08;Class&#xff09;&#xff1a;定义了一组对象共有的属性和方法的蓝图。类是创建对象的模板。 对象&#xff08;Object&#xff09;&#xff1a;类的实例。对象包含实际的数据和操作数据的方法。 属性&#xff0…

unity学习(89)——unity塞满c盘!--删除editor下的log文件

卸了一个视频后强制续命打开详细信息&#xff1a; 这个再往下找也是没用的&#xff01; 显示隐藏文件夹后&#xff01;执行如下操作&#xff01; 30个g&#xff01; 其中unity占23g editer占了21g 删除C:\Users\王栋林\AppData\Local\Unity\Editor下的log文件 恢复到之前的水…

Android AIDL接口

一.AlDI接口简介 AIDL&#xff08;Android Interface Definition Language&#xff09;是一种 IDL 语言&#xff0c;用于生成可以在 Android 设备上两个进程之间进行进程间通信&#xff08;IPC&#xff09;的代码。 通过 AIDL&#xff0c;可以在一个进程中获取另一个进程的数据…

详细剖析多线程4----锁策略(八股文/面试常考)

文章目录 前言一、常见锁策略(八股文)1.1乐观锁和悲观锁1.2轻量级锁和重量级锁1.3自旋锁和挂起等待锁1.4普通互斥锁和读写锁1.5公平锁和非公平锁1.6可重入锁和不可重入锁1.7总结 二、synchronized内部原理三、CAS四、JUC(java.util.concurrent) 的常见类4.1Callable 接⼝4.2Ree…

【LLM】LLM API 开发

文章目录 LLM API 开发LLM入门基本概念LLM API使用实名认证创建应用使用API Prompt Engineering思考总结 参考文章 什么是提示工程&#xff08;Prompt Engineering&#xff09;&#xff1f; ChatGPT Prompt 最佳指南一 LLM API 开发 LLM入门基本概念 Prompt Prompt 最初是 NL…

嵌入式物联网实战开发笔记-乐鑫ESP32芯片功能对比以及功能选型【doc.yotill.com】

乐鑫ESP32入门到精通项目开发参考百例下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1ATvRnAZvxkev-PJfd3EAPg?pwd4e33 提取码&#xff1a;4e33 2.1 初识 ESP32 ESP32-S3 是一款低功耗的 MCU 系统级芯片 (SoC)&#xff0c;支持 2.4 GHz Wi-Fi 和低功耗蓝牙 (…

windows驱动开发-WDM框架(一)

在前面的文章中解释过&#xff0c;NT5.0之后windows确定了新的架构Windows Driver Model (WDM)&#xff0c;在Vista之后又推出了Windows Driver Framework(WDF)&#xff0c;这两个都属于驱动程序框架&#xff0c;那么它们的之间的关系是怎样的&#xff1f; WDF是对WDM进行的封…