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

CSS表格

news 2026/2/9 18:37:41

标准的表格结构

table标签：定义表格
caption标签：定义表格标题，这个标题会居中显示在表格上，一个表格只能定义一个标题
th标签：定义表格的表头，通常成粗体居中表示
tr标签：定义表格的一行
td标签：定义表格的一个单元格
thead标签：定义表头
tbidy标签：定义表格主体部分。
tfoot标签：定义表格页脚（脚注）
col标签：针对一个或多个列的属性值，只能table或colgroup标签中使用
colgroup标签：表格列的分组，可以对表格的列组进行格式化，只能在table中使用。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table ,th,td{border: 1px solid #000;width: 400px;}tbody tr td{text-align: center;}colgroup .a1{background-color: aqua;}colgroup .a2{background-color: red;}colgroup .a3{background-color: yellow;}</style></head><body><table><colgroup ><col class="a1"><col class="a2"><col class="a3"></colgroup><thead><caption>学习成绩表</caption><th>数学</th><th>语文</th><th>英语</th></thead><tbody><tr><td>90</td><td>100</td><td>30</td></tr><tr><td>90</td><td>100</td><td>30</td></tr></tbody><tfoot><tr><td>总分：</td><td></td><td>220</td></tr></tfoot></table></body>
</html>

在这里插入图片描述

表格标签的一些属性

colspan：规定单元格可以横跨的列数
rowspan：规定表头单元格可以横跨的行数
headers：规定与表头单元格或单元格相连的一个或多个单元格
span：规定列组应该横跨的列数
其他属性HTML5已弃用不建议使用。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table,tr,th,td{border: 1px solid #000;}table{width: 400px;line-height:10px;font-size:10px}td{text-align:center;}</style></head><body><table><caption>人员信息表</caption><tr><th rowspan="2">姓名</th><th rowspan="2">年龄</th><th id="gender" colspan="2">性别</th></tr><tr><th headers="gender">男</th><th headers="gender">女</th></tr><tr><td>付东流</td><td>26</td><td>✔️</td><td></td></tr></table></body>
</html>

定义细线表格

在表格中每个单元格都有一个独立的空间，因此在设定边框线时显示的是不连贯的线条。
要想使之紧密连接在一起需要使用border-collapse属性来合并单元格，他的值有：
collapse：合并单元格
separate：默认值，每个单元格都有独立的边框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table,tr,td{border: 1px solid #000;width: 200px;height: 50px;}table{border-collapse: collapse;}</style></head><body><table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body>
</html>

单元格空隙

border-spacing：属性定义单元格的空隙，该属性可以分离单元格间距。
他的两个值表示行间距与列间距。也可以定义一个值，行间距与列间距都是这个值
注意：表格的单元格间距不能与合并单元格一起使用，这样会不显示效果。并且这个属性不能使用margin代替。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table,tr,td{border: 1px solid #000;width: 200px;height: 50px;}table{/* border-collapse: collapse; */border-spacing: 10px 10px;}</style></head><body><table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table></body>
</html>

隐藏单元格

单元格边框处于分离状态时可以使用empty-cells属性设置是否隐藏空白单元格，
他的值是show（展示），hide（不展示）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>table,tr,td{border: 1px solid #000;width: 200px;height: 50px;}table{/* border-collapse: collapse; */border-spacing: 10px 10px;empty-cells: hide;}</style></head><body><table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td></td></tr></table></body>
</html>

相关文章：

CSS表格

标准的表格结构 table标签&#xff1a;定义表格 caption标签&#xff1a;定义表格标题&#xff0c;这个标题会居中显示在表格上&#xff0c;一个表格只能定义一个标题 th标签&#xff1a;定义表格的表头&#xff0c;通常成粗体居中表示 tr标签&#xff1a;定义表格的一行 td标…...

编程日记 2024/5/14 1:45:09

东芝移动硬盘数据恢复方法有哪些

谁能懂我此刻的心情啊&#xff01;移动硬盘用起来真的超级方便&#xff0c;如今我的工作几乎都离不开它&#xff0c;用来存放各种重要文件。可是&#xff0c;让人头疼的事情发生了&#xff0c;昨天我发现移动硬盘里的部分数据竟然莫名其妙地消失了&#xff01;这可咋整啊&#…...

编程日记 2024/5/14 1:44:08

FullCalendar日历组件集成实战（1）

背景 有一些应用系统或应用功能&#xff0c;如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件&#xff0c;但功能比较简单&#xff0c;用来做数据展现勉强可用。但如果需要进行复杂的数据展示&#xff0c;以及互动操作如通过点击添加事件&#xff0…...

编程日记 2024/5/14 1:43:07

wps

文章目录 取消自动升级、WPS热点及广告推送excel数字大小排序函数不起作用vlookup函数 取消自动升级、WPS热点及广告推送 打开WPS Office&#xff0c;点击左上角“首页”图标&#xff0c;依次点击右上角“设置”—>“配置和修复工具”。在弹出框点击“高级”&#xff0c;选…...

编程日记 2024/5/14 1:42:05

【软设】常见易错题汇总

目录 计算机系统基础 程序语言基础 数据结构 算法设计与分析 计算机网络与信息安全 软件工程基础 开发方法&#xff08;结构化与面向对象&#xff09; 数据库 操作系统 知识产权相关的法律法规 &#x1f92f;&#x1f92f;&#x1f92f;&#x1f92f;&#x1f92f;&#x1f9…...

编程日记 2024/5/14 1:38:01

安全数据交换系统哪个好？该如何选型？

安全数据交换系统是用于在不同网络或组织之间安全、高效地传输和共享数据的解决方案。安全数据交换系统对于任何需要处理敏感数据、确保数据安全、并满足合规要求的组织来说都是至关重要的。 这种系统通常用于以下目的&#xff1a; 1&#xff09;数据传输&#xff1a;允许用户…...

编程日记 2024/5/14 1:37:00

用matplotlib制作代码和色块

代码如下&#xff1a; # 声明 # -*- coding: utf-8 -*- """ Created on Mon May 13 11:18:59 2024author: sankang """ # 这里调用包 import matplotlib as mpl import matplotlib.pyplot as plt import numpy as npplt.rcParams[axes.unicode_…...

编程日记 2024/5/14 1:34:57

centos无法tab补全至文件

很奇怪的需求&#xff1a;redhat 7.9版本用cd 只能到目录&#xff0c;无法到文件 我个人认为不是个问题&#xff0c;但是甲方需求&#xff0c;你懂的 首先&#xff0c;我们要搞清楚tab补全功能的包bash-completion是否安装&#xff0c;这里肯定是安装了&#xff0c;不过还是看…...

编程日记 2024/5/14 1:31:53

大模型训练框架DeepSpeed使用入门(1): 训练设置

文章目录 一、安装二、训练设置Step1 第一步参数解析Step2 初始化后端Step3 训练初始化 三、训练代码展示 官方文档直接抄过来&#xff0c;留个笔记。 https://deepspeed.readthedocs.io/en/latest/initialize.html 使用案例来自&#xff1a; https://github.com/OvJat/DeepSp…...

编程日记 2024/5/14 1:29:51

自定义类型——结构体、枚举和联合

自定义类型——结构体、枚举和联合 结构体结构体的声明匿名结构体结构体的自引用结构体的初始化结构体的内存对齐修改默认对齐数结构体传参 位段枚举联合 结构体 结构是一些值的集合&#xff0c;这些值被称为成员变量&#xff0c;结构的每个成员可以是不同类型的变量。 数组是…...

编程日记 2024/5/14 1:28:50

Windows11系统安装Mysql8之后，启动服务net start mysql报错“服务没有响应控制功能”的解决办法

问题 系统环境&#xff1a;Windows11 数据库版本&#xff1a;Mysql8 双击安装&#xff0c;一路下一步&#xff0c;完成&#xff0c;很顺利&#xff0c;但是开启服务后 net start mysql 报错&#xff1a; 服务没有响应控制功能。 请键入 NET HELPMSG 2186 以获得更多的帮助 不…...

编程日记 2024/5/14 1:27:49

WIFI模块的AT指令联网数据交互--第十天

1.1.蓝牙&#xff0c;ESP-01s&#xff0c;Zigbee, NB-Iot等通信模块都是基于AT指令的设计 初始配置和验证 ESP-01s出厂波特率正常是115200, 注意&#xff1a;AT指令&#xff0c;控制类都要加回车&#xff0c;数据传输时不加回车 1.2.上电后&#xff0c;通过串口输出一串系统…...

编程日记 2024/5/14 1:26:48

设计模式Java实现-迭代器模式

✨这里是第七人格的博客✨小七&#xff0c;欢迎您的到来~✨ &#x1f345;系列专栏&#xff1a;设计模式&#x1f345; ✈️本篇内容: 迭代器模式✈️ &#x1f371; 本篇收录完整代码地址&#xff1a;https://gitee.com/diqirenge/design-pattern &#x1f371; 楔子 很久…...

编程日记 2024/5/14 1:25:46

单页源码加密屋zip文件加密API源码

简介&#xff1a; 单页源码加密屋zip文件加密API源码 api源码里面的参数已改好&#xff0c;往服务器或主机一丢就行&#xff0c;出现不能加密了就是加密次数达到上限了&#xff0c;告诉我在到后台修改加密次数 点击下载...

编程日记 2024/5/14 1:21:41

47.全排列

1.题目 47. 全排列 II - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/permutations-ii/description/ 2.思路 注意剪枝的条件 3.代码 class Solution {vector<int> path;vector<vector<int>> ret;bool check[9]; public:vector<…...

编程日记 2024/5/14 1:18:38

呼叫中心系统选pscc好还是okcc好

选择PSCC&#xff08;商业软件呼叫中心&#xff09;还是OKCC&#xff08;开源呼叫中心&#xff09;&#xff0c;应基于以下几个关键因素来决定&#xff1a; 技术能力&#xff1a;如果企业拥有或愿意投入资源培养内部技术团队&#xff0c;开源解决方案可能更合适&#xff0c;因为…...

编程日记 2024/5/14 1:17:36

【SRC实战】前端脱敏信息泄露

挖个洞先 https://mp.weixin.qq.com/s/xnCQQCAneT21vYH8Q3OCpw “ 以下漏洞均为实验靶场&#xff0c;如有雷同&#xff0c;纯属巧合 ” 01 — 漏洞证明 一、前端脱敏&#xff0c;请求包泄露明文 “ 前端脱敏处理&#xff0c;请求包是否存在泄露&#xff1f; ” 1、获取验…...

编程日记 2024/5/14 1:15:34

区块链 | NFT 水印：Review on Watermarking Techniques（三）

&#x1f34d;原文&#xff1a;Review on Watermarking Techniques Aiming Authentication of Digital Image Artistic Works Minted as NFTs into Blockchains 一个 NFT 的水印认证协议 可以引入第三方实体来实现对交易的认证&#xff0c;即通过使用 R S A \mathsf{RSA} RSA…...

编程日记 2024/5/14 1:13:32

初识C语言——第十九天

for循环 1.简单概述 2.执行流程 3.建议事项&#xff1a;...

编程日记 2024/5/14 1:12:30

软件需求工程习题

1.&#xff08;面谈&#xff09;是需求获取活动中发生的需求工程师和用户间面对面的会见。 2.使用原型法进行需求获取&#xff0c;&#xff08;演化式&#xff09;原型必须具有健壮性&#xff0c;代码质量要从一开始就能达到最终系统的要求 3.利用面谈进行需求获取时&#xf…...

编程日记 2024/5/14 1:11:28

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/7 23:18:28

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/8 4:37:13

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！

【把数组变成一棵树】有序数组秒变平衡BST，原来可以这么优雅！ 🌱 前言：一棵树的浪漫，从数组开始说起 程序员的世界里，数组是最常见的基本结构之一，几乎每种语言、每种算法都少不了它。可你有没有想过，一组看似“线性排列”的有序数组，竟然可以**“长”成一棵平衡的二…...

编程新知 2025/8/26 4:33:55

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

编程新知 2025/10/19 1:38:36