表格分组标签:表格行分组中的隐藏功能

news2024/11/27 22:31:46

在程序员的认知中,表格中存在行分组标签,也就是thead,tbody,tfoot三个行分组标签。也许你会认为我在这里还是为大家继续讲解thead,tbody,tfoot三个标签,那就大错特错了
今天除了要讲解他的基础作用之外,还要为大家带来一个开发中经常使用他的小妙招,在以后的开发中你绝对会爱上表格的分组标签
一、表格分组标签的作用:
thead、tfoot 以及 tbody 元素对表格中的行进行分组。当您创建某个表格时,需要数据进行分区进行显示的时候,我们可以使用行分组标签
Thead代表的则是表格的头部,简称为表头
Tbody代表的则是表格的主体,主要应用在数据显示区域内容
Tfoot代表的则是表格的尾部,简称表尾
在使用表格组开发的时候,如果不对表格行进行分组的话,那么默认都属于 tbody 中,如果想要查找表格内部的单元格(td)则不能直接使用table>tr>td去查找,因为浏览器中默认会为表格进行分组:如下图:默认表格结构中没有分组标签的使用,但是在浏览器中浏览器会自动添加tbody进行分组;
在这里插入图片描述
在这里插入图片描述

所以实际开发的时候我们为了避免与浏览器中的tbody造成冲突,需要添加分组标签;或者是查找元素的时候使用后代选择器(table td)或者是对应浏览器中的子代(table>tbody>tr>td)查找元素
二、添加不添加thead是否有影响呢?
如果我们单纯的只考虑开发效果,把东西做完,添加分组标签与否均可。但是添加thead和tfoot这些分组标签的另外一个小技巧,小作用是什么呢?就是方便我们打印的时候能出现我们的“页眉和页脚”
实际开发过程中,有些表格数据在浏览器中需要我们直接进行打印,但是打印的时候我们需要每一页上面均有表头,这就需要我们使用表格的分组标签来实现了
使用分组标签前在浏览器中打印显示效果:表头只在第一页显示,并且第一页数据结束没有表格横线;第二页没有任何信息表头;
在这里插入图片描述

为表格添加thead表头之后
在这里插入图片描述

显示效果如下:轻松搞定每一页都有表头信息
在这里插入图片描述

好了,有没有发现表格分组标签的强大之处,并且如果你要想添加表格的脚注,可以使用表格的尾部分组标签来完成哦;大家一起动手演示起来吧。需要源码的找我哦

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

栈和队列

声明:本文主要作为作者的复习笔记,由于作者水平有限,难免有错误和不准确之处,欢迎读者批评指正。 目录快捷跳转线性表接口两个常用子类什么时候选择ArrayList,什么时候选择LinkedList?栈和队列的关系栈栈的实现根据使…

ASP.NET Core教程-Exception(异常和错误处理)

更新记录 转载请注明出处: 2022年11月22日 发布。 2022年11月20日 从笔记迁移到博客。 错误处理基础 错误处理说明 ASP.NET Core中的错误处理分为: ​ 局部Controller中处理错误 ​ 在Controller中定义错误代码和转到错误界面即可 ​ 全局应用中设置错误…

vue.js毕业设计,基于vue.js前后端分离教室预约系统设计与实现(H5移动项目)

功能模块 【后台管理功能模块】 系统设置:设置关于我们、联系我们、加入我们、法律声明 广告管理:设置小程序首页轮播图广告和链接 留言列表:所有用户留言信息列表,支持删除 会员列表:查看所有注册会员信息&#xff0c…

[附源码]计算机毕业设计JAVA家政管理系统

[附源码]计算机毕业设计JAVA家政管理系统 项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis M…

Spring Boot中Node.js的下载与Vue CLI在IDEA中的部署及使用(图文解释 简单易懂)

仍有问题可点赞关注收藏后在评论区留言~~~ 一、Node.js与npm的下载 在使用Vue CLI(Vue脚手架)搭建前端系统的时候,因为需要用到npm安装Vue CLI,而npm是集成在Node.js中的,所以需要首先安装Node.js Node.js官网 下载过程很简单,…

数据库错误知识集2

Oracle数据库中最常见的索引类型是b-tree索引,也就是B-树索引,以其同名的计算科学结构命名。 union与union all的区别(摘): ①对重复结果的处理:union会去掉重复记录,union all不会;…

转铁蛋白偶联糖(单糖/多糖),(Transferrin)TF-PEG-Dextran葡聚糖/Lysozyme溶菌酶

产品名称:转铁蛋白-聚乙二醇-葡聚糖 英文名称:TF-PEG-Dextran 纯度:95% 存储条件:-20C,避光,避湿 外观:固体或粘性液体,取决于分子量 PEG分子量可选:350、550、750、1k、2k、34k、5k…

校招补一个什么样的项目比较好?

校招一年比一年卷,千军万马过独木桥的情况下该怎样充实自己的项目经历?有两件事要搞明白! 一、什么是【好】项目? 好项目在简历上要能一眼看出亮点和提问点。并且要能够把提问点对应的回答准备到位,这样才能在招聘量…

外汇天眼周回顾:Equiti开设最新办事处,Vantage推出Vantage Connect服务

在过去的一周内,国外外汇市场都发生了哪些引人注意的外汇新闻?天眼君带大家一起看看,具体新闻如下: 1、Equiti在塞浦路斯利马索尔开设最新办事处 据悉,多资产经纪商Equiti Group在宣布其在塞浦路斯的新业务获得CySEC …

CRM客户管理系统在市面上这么多?应该如何选型?各行业选型CRM必看!

当您下定决心怎样为您的民营企业选择合适的 CRM 时,须要考量很多不利因素。许多基本上国际标准适用于绝大多数寻求 CRM 软件系统的民营企业。其他注意事宜取决于您的业务体量和性质。下列是任何人 CRM 软件系统中须要注意的 14 项常规事宜,以及许多可能对…

【笑小枫玩转SpringBoot系列】目录,一篇拥有一个系列,值得收藏哟~

本系列简介 本系列主要讲解了JAVA后端开发中常用的操作,以初创一个SpringBoot项目开始,以实例的形式讲解了一个单项目框架的诞生。本文可以做为SpringBoot项目的入门学习,也可以当做一个初建项目的框架。 本文主要使用mysql数据库&#xff0…

Flutter for App——一个简单的BMI计算APP

一个简单的BMI计算APP效果截图初始化布局顶部区域标题计算结果组合顶部区域背景中间区域输入框输入行计算按钮分界线组合中间区域底部区域页面组合BMI计算Toast弹窗效果导入依赖封装效果截图 初始化 初始化表单控制器和焦点节点 void initView(){formKey GlobalKey<FormS…

Unity ECS实例:制作俯视角射击游戏!

目录 创建主角 3&#xff1a;主角移动和摄像机跟随 4&#xff1a;实现敌人角色 5&#xff1a;子弹&#xff0c;死亡&#xff0c;机器人 6&#xff1a;粒子与音效 这次我们来使用Unity ECS系统制作一个俯视角度的射击游戏。虽然现在网上有不少ECS的资料和项目&#xff0c;但…

(十二)Spring IoC注解式开发

文章目录回顾注解注解怎么定义&#xff0c;注解中的属性怎么定义&#xff1f;元注解Target注解Retention注解注解怎么使用&#xff1f;通过反射机制怎么读取注解&#xff1f;Spring注解原理声明Bean的注解Spring注解的使用第一步&#xff1a;加入aop的依赖第二步&#xff1a;在…

1.3 c++虚基类的用途以及内存模型

1.3 虚基类 1.3.1 虚基类(菱形继承)的语法实现 对于如下的继承体系&#xff0c;定义了一个公共基类A。类B和类C都由类A公有派生&#xff0c;类D由类B和类C公有派生。 其示例代码如下所示&#xff0c;这段代码的45行是无法通过编译器的&#xff0c;这即是多重继承存在的一个问…

十二、组合API(2)

本章概要 响应式 API reactive() 方法watchEffect() 方法解构响应性状态深入 watchEffect()refreadonlycomputedwatch 11.3 响应式 API Vue 3.0 的核心功能主要是通过响应式 API 实现的&#xff0c;组合 API 将他们公开为独立的函数。 11.3.1 reactive() 方法 reactive()…

基于物联网的自动灌溉系统的设计与实现

本设计是基于物联网的自动灌溉系统&#xff0c;主要实现以下功能&#xff1a; 1&#xff0c;OLED显示温湿度和土壤温湿度&#xff1b; 2&#xff0c;可通过继电器实现自动灌溉和自动加热的功能&#xff1b; 3&#xff0c;通过lora构建自组网&#xff0c;进行主从机间的数据传输…

正点原子 核心板IMX6ULL IIC RTC驱动 PCF8563

目录前言IIC RTC PCF8563硬件使用IIC设备地址配置 menuconfig 自带PCF8563驱动修改设备树dtb编写应用App测试前言 此篇基于学完【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.6 后&#xff0c;使用核心板进行自行设置。 IIC RTC PCF8563硬件使用 Imx6ul内部的RTC时钟不是很准…

VMware Workstation虚拟机网络相关配置

1、网络配置 1.1、方式一&#xff1a;配置文件 配置文件&#xff1a;网络参数之IP地址与子网掩码、网关地址、DNS 1.1.1、删除旧网卡配置文件 rm -rf /etc/sysconfig/network-scripts/ifcfg-* 1.1.2、grub内核引导程序&#xff0c;定义网卡重新命名规则 vim /etc/default/…

若依vue ruoyi-vue ant design版本使用

若依vue默认是使用element ui的&#xff0c;但是现在大部分项目都用ant design&#xff0c;ant design的组件也比element多&#xff0c;所以最近有想更改成ant design。网上搜了一下&#xff0c;已经有现成的了。 RuoYi-Antdv https://gitee.com/fuzui/RuoYi-Antdv RuoYi-Ant…