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>

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

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

相关文章

RabbitMQ(四种使用模式)

文章目录 1.Fanout&#xff08;广播模式&#xff09;1.基本介绍2.需求分析3.具体实现1.编写配置类 RabbitMQConfig.java2.编写生产者&#xff0c;发送消息到交换机 MQSender.java3.编写消费者&#xff0c;接受消息 MQReceiver.java4.控制层调用方法&#xff0c;发送信息到交换机…

RAG应用中的路由模式

依据的用户查询意图在 RAG 应用程序使用“路由控制模式”可以帮助我们创建更强大的 RAG 应用程序。我们通常希望用户能够访问的数据可以来自各种来源,如报告、文档、图片、数据库和第三方系统。 对于基于业务的 RAG 应用程序,我们可能还希望用户能够与其它业务系统进行交互,…

卷积通用模型的剪枝、蒸馏---蒸馏篇--RKD关系蒸馏(以deeplabv3+为例)

本文使用RKD实现对deeplabv3+模型的蒸馏;与上一篇KD蒸馏的方法有所不同,RKD是对展平层的特征做蒸馏,蒸馏的loss分为二阶的距离损失Distance-wise Loss和三阶的角度损失Angle-wise Loss。 完整代码放在文末。 一、RKD简介 RKD算法的核心是以教师模型的多个输出为结构单元,取…

Infuse for Mac激活版:高清影音播放软件

对于热爱影音娱乐的Mac用户来说&#xff0c;Infuse for Mac是一个不容错过的选择。它以其简洁的操作界面和强大的播放功能&#xff0c;为用户带来了全新的影音播放体验。 Infuse for Mac支持广泛的音视频格式&#xff0c;无需额外转换&#xff0c;即可轻松播放您喜爱的影片。无…

图的概念、性质和存储与简单遍历

前置知识&#xff1a;树的基本概念及性质 为了保证学习效果&#xff0c;请保证已经掌握前置知识之后&#xff0c;再来学习本章节&#xff01;如果在阅读中遇到困难&#xff0c;也可以回到前面章节查阅。 学习目标 掌握图的基本概念掌握图的一些性质 图的概念 基本概念 图 (…

算法设计与分析(超详解!) 第三节 贪婪算法

1.贪心算法基础 1.贪心算法的基本思想 贪心算法是从问题的某一个初始解出发&#xff0c;向给定的目标推进。但它与普通递推求解过程不同的是&#xff0c;其推动的每一步不是依据某一固定的递推式&#xff0c;而是做一个当时看似最佳的贪心选择&#xff0c;不断地将问题实例归…

MySQL 大量数据插入优化

效率最好的方式是&#xff1a;批量插入 开启事务。 1、数据批量插入相比数据逐条插入的运行效率得到极大提升&#xff1b; ## 批量插入 INSERT INTO table (field1, field12,...) VALUES (valuea1, valuea2,...), (valueb1, valueb2,...),...;当数据逐条插入时&#xff0c;每…

OpenAI 或将推出多模态人工智能数字助理;研究发现部分 AI 系统已学会「说谎」丨 RTE 开发者日报 Vol.203

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

LeetCode 700.二叉搜索树中的搜索

LeetCode 700.二叉搜索树中的搜索 1、题目 题目链接&#xff1a;700. 二叉搜索树中的搜索 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和一个整数值 val。 你需要在 BST 中找到节点值等于 val 的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则…

【C语言/数据结构】栈:从概念到两种存储结构的实现

目录 一、栈的概念 二、栈的两种实现方式 1.顺序表实现栈 2.链表实现栈 三、栈的顺序存储结构及其实现 1.栈的声明 2.栈的初始化 3.栈的销毁 4.栈的压栈 5.栈的弹栈 6.栈的判空 7.返回栈顶元素 8.返回栈的长度 四、栈的链式存储结构及其实现 1.栈的声明 2.栈的…

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

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

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

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