CSS表格

标准的表格结构

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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【八十二】【算法分析与设计】2421. 好路径的数目,928. 尽量减少恶意软件的传播 II,并查集的应用,元素信息绑定下标一起排序,元素通过下标进行绑定

2421. 好路径的数目 给你一棵 n 个节点的树&#xff08;连通无向无环的图&#xff09;&#xff0c;节点编号从 0 到 n - 1 且恰好有 n - 1 条边。 给你一个长度为 n 下标从 0 开始的整数数组 vals &#xff0c;分别表示每个节点的值。同时给你一个二维整数数组 edges &#xff…

OS复习笔记ch5-4-2

引言 承接上文我们介绍了信号量机制和应用信号量机制实现的进程同步和互斥&#xff0c;这一节我们将围绕一些经典问题对信号量机制展开更深入地探讨。 读者/写者问题 读者/写者问题与我们之前遇到的问题类型不同&#xff0c;它描述的是&#xff1a; 有读者和写者两组进程&am…

SpringSecurity6集成数据库

本文章对应视频可在B站查看SpringSecurity6对应视频教程&#xff0c;记得三连哦&#xff0c;这对我很重要呢&#xff01; 温馨提示&#xff1a;视频与文章相辅相成&#xff0c;结合学习效果更强哦&#xff01; 系列文章链接 1、初识SpringSecurity&#xff0c;认识主流Java权限…

近屿OJAC带你解读:什么是大模型幻觉?

忠实性幻觉也可以细分&#xff0c;分为指令不一致&#xff08;输出偏离用户指令&#xff09;、上下文不一致&#xff08;输出与上下文信息不符&#xff09;、逻辑不一致三类&#xff08;推理步骤以及与最终答案之间的不一致&#xff09;。 具体解析 大模型产生幻觉的原因可能…

Linux 第三十章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

Ubuntu与Windows之间互传文件

Ubuntu与Windows之间互传文件 前言&#xff1a; 使用工具&#xff1a;FTP 客户端软件&#xff0c; FileZilla 下载地址如下&#xff1a;https://www.filezilla.cn/download 1、打开软件 2、建立连接 3、连接信息 4、如果连接不上可能是Ubuntu没有开启FTP 服务&#xff0c;先…

台服dnf局域网搭建,学习用笔记

台服dnf局域网搭建 前置条件虚拟机初始化上传安装脚本以及其他文件至虚拟机密钥publickey.pem客户端配置如果IP地址填写有误&#xff0c;批量修改IP地址 前置条件 安装有vmvarecentos7.6镜像&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/centos-vault/7.6.1810/isos/x86…

01-项目功能,架构设计介绍

稻草快速开发平台 开发背景就是通过此项目介绍使用SpringBoot Vue3两大技术栈开发一个拥有动态权限、路由的前后端分离项目&#xff0c;此项目可以继续完善&#xff0c;成为一个模板为将来快速开发做铺垫。 实现功能 开发流程 通过命令构建前端项目在VSCode中开发&#xff…

JavaScript数字(Number)个数学(Math)对象

目录 前言&#xff1a; Number&#xff08;数字&#xff09;对象 前言&#xff1a; nfinity(正负无穷大)&#xff1a; NaN&#xff08;非数字&#xff09;&#xff1a; Number的属性 Number的方法 构造函数 静态方法 实例方法 Math&#xff08;数学&#xff09;对象…

阿里天池基于LLM智能问答系统学习赛排到第一名了

阿里天池基于LLM智能问答系统学习赛排到第一名了 0. 引言1. 05-09分数排到第一名了 0. 引言 5.1 假期期间发现阿里天池基于LLM智能问答系统学习赛正好是我工作上用到的技术&#xff0c;就抱着玩一玩的心里挑战了一下。 这个比赛包含了text_comprehension&#xff08;RAG&…

【Linux】Linux安装JDK

一、卸载Linux自带的JDK #查询已有的JDK rpm -qa | grep jdk ①将查询到的JDK全部卸载掉 #直接复制一整行的JDK名称 yum -y remove java-1.7.0-openjdk-headless-1.7.0.261-2.6.22.2.el7_8.x86_64 ②卸载完第一个后再次查询 ③继续卸载&#xff0c;卸载完成后再次查询 ④查询…

2024 年中国大学生程序设计竞赛全国邀请赛(郑州)暨第六届CCPC河南省大学生程序 设计竞赛Problem L. Toxel 与 PCPC II

//sort bug下标 遍历dp. //没修负的bug肯定连续 #include<bits/stdc.h> using namespace std; #define int long long const int n1e611; int a,b,c[n],dp[n]; signed main() {ios::sync_with_stdio(false);cin.tie(0),cout.tie(0);cin>>a>>b;for(int i1;…

高铁列车班组信息宣传投稿我喜欢上了这个好方法

作为高铁列车班组的一名工作人员,我肩负着对外信息宣传的重任。随着高铁列车的快速发展,我们班组不仅需要提供优质的服务,还需要通过媒体向外界传递我们的声音,展示我们的风采。然而,在投稿的过程中,我经历了一段充满挑战和困惑的时光。 起初,我采用传统的邮箱投稿方式,将精心撰…

基于Java的qq截图工具参考论文(论文 + 源码)

【免费】基于Java的qq截图工具.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89304179 基于Java的qq截图工具 摘要 当今时代是飞速发展的信息时代&#xff0c;人们在对信息的处理中对图像的处理量与日俱增&#xff0c;这一点在文档人员上显得非常突出。 本软…

Hbase基础操作Demo(Java版)

一、前置条件 HBase服务&#xff1a;【快捷部署】023_HBase&#xff08;2.3.6&#xff09;开发环境&#xff1a;Java&#xff08;1.8&#xff09;、Maven&#xff08;3&#xff09;、IDE&#xff08;Idea 或 Eclipse&#xff09; 二、相关代码 代码结构如上图中①和② pom.x…

新消息:2024中国(厦门)国际义齿加工产品展览会

DPE2024中国&#xff08;厦门&#xff09;国际义齿加工产品展览会暨学术研讨会 2024 China (Xiamen) International Denture Processing Products Exhibition 时 间&#xff1a;2024年11月1-3日 November 1-3, 2024 地 点&#xff1a;厦门国际会展中心 Xiamen Int…

Llama3中文聊天项目全能资源库

Llama3 中文聊天项目综合资源库&#xff0c;集合了与Lama3 模型相关的各种中文资料&#xff0c;包括微调版本、有趣的权重、训练、推理、评测和部署的教程视频与文档。1. 多版本支持与创新&#xff1a;该仓库提供了多个版本的Lama3 模型&#xff0c;包括基于不同技术和偏好的微…

基于SpringBoot + Vue的扶贫助农管理系统设计与实现+毕业论文

系统介绍 系统分为用户和管理员两个角色 用户&#xff1a;登录、注册、论坛信息、查看扶贫公告信息、查看扶贫任务信息、报名任务、查看新闻信息&#xff08;新闻收藏、新闻留言&#xff09;、个人中心、在线客服等功能 管理员&#xff1a;登录、管理员管理、基础信息管理、客…

高考志愿系统-信息管理模块:院校信息分析

信息模块包括三个信息实体&#xff1a;招生学校&#xff0c;专业&#xff0c;分数线。 学校实体中有一个叫院校代码的属性&#xff0c;专业实体中含有院校代码这个属性&#xff0c;属于外键&#xff0c;一个学校有多个专业&#xff0c;所以学校和专业属于一对多关系。 专业实…

学习Uni-app开发小程序Day10

前面学习了局部组件的创建和简单使用&#xff0c;今天学习了slot&#xff08;插槽&#xff09;和组件之间的传值1. 插槽的使用 在components中&#xff0c;创建一个组件&#xff0c;给组件设置头部布局、内容布局、底部布局&#xff0c;例如&#xff1a; <template><…