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

004+limou+HTML——(4)HTML表格

000、前言

表格在实际开发中的应用还是比较多的,表格可以更加清晰地排列数据

001、基本结构

(1)构成

  • 表格:<table>
  • 行:<tr>(table row,表格行),由多少组tr标签,就有多少行
  • 单元格:/(table data cell,表格单元格)

(2)代码

<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>网页标题</title></head><body><h1>网页标题1</h1><table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><h1>网页标题2</h1></body>
</html>

在这里插入图片描述

(3)使用CSS进行优化(CSS以后学习,这里只是单纯让表格更加直观,因为默认情况下表格是没有边框的)

(3)使用CSS进行优化(CSS以后学习,这里只是单纯让表格更加直观,因为默认情况下表格是没有边框的)<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>网页标题</title><!--这里使用了CSS为表格加上边框--><style type="text/css">table,tr,td{border:1px solid silver;}</style></head><body><h1>网页标题1</h1><table><caption>表格标题1</caption><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><h1>网页标题2</h1><table><caption>表格标题2</caption><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table></body>
</html>

在这里插入图片描述

002、完整结构

除了上面的基本架构,还有一些其他表格会用到的标签

(1)表标题:

  • 一般来说一个表格只有一个表头,默认情况下,caption标签位于表格的第一行

(2)表头单元格:

  • 单元格其实有两种:
    • 表头单元格:(table header cell,表头单元格)
    • 表行单元格:
  • 两者都是单元格,但是不可以进行互换使用
    • 表头单元格会用“粗体”、“居中”来显示th里的内容,但是td不会
    • 两者的语义不一样,调试不一样
<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>网页标题</title><!--这里使用了CSS为表格加上边框--><style type="text/css">table,tr,td{border:1px solid silver;}</style></head><body><h1>网页标题1</h1><table><caption>表格标题1</caption><tr><th>表头单元格01</th><th>表头单元格02</th></tr><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table><h1>网页标题2</h1><table><caption>表格标题2</caption><tr><th>表头单元格01</th><th>表头单元格02</th></tr><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr></table></body>
</html>

在这里插入图片描述

003、语义化后完整的表格语法,上述的东西可以直接整合为下面这个code

为了更好语义化,HTML还引入了、、三个标签,使得逻辑更加清晰,调试更加方便,并且方便分块来控制表格的CSS样式

<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>表格语义化完整语法</title><!--这里使用了CSS为表格加上边框--><style type="text/css">table,tr,td{border:1px solid silver;}</style></head><body><table><caption>表格标题</caption><!--表头部分--><thead><tr><th>表头单元格</th><th>表头单元格</th><th>表头单元格</th></tr></thead><!--表身部分--><tbody><tr><td>表行单元格</td><td>表行单元格</td><td>表行单元格</td></tr><tr><td>表行单元格</td><td>表行单元格</td><td>表行单元格</td></tr><tr><td>表行单元格</td><td>表行单元格</td><td>表行单元格</td></tr></tbody><!--表脚部分--><tfoot><tr><td>标准单元格</td><td>标准单元格</td><td>标准单元格</td></tr></tfoot></table></body>
</html>

004、合并属性,即:合并行[rowspan]/合并列:[colspan]

(1)概念

这个类似word的表格合并,rowspan可以将单元格合并

(2)具体语法

<td rowspan=“行数”><td>

(3)具体代码

<!DOCTYPE html>
<html><head><meat charset="utf-8"/><title>表格语义化完整语法</title><!--这里使用了CSS为表格加上边框--><style type="text/css">table,tr,td{border:1px solid silver;}</style></head><body><table><caption>表格标题</caption><!--表头部分--><thead><tr><th>表头单元格</th><th>表头单元格</th><th>表头单元格</th></tr></thead><!--表身部分--><tbody><tr><td rowspan="2">表行单元格</td><td>表行单元格</td><td>表行单元格</td></tr><tr><td>表行单元格</td><td>表行单元格</td></tr><tr><td colspan="2">表行单元格</td><td>表行单元格</td></tr></tbody><!--表脚部分--><tfoot><tr><td>标准单元格</td><td>标准单元格</td><td>标准单元格</td></tr></tfoot></table></body>
</html>

在这里插入图片描述

相关文章:

004+limou+HTML——(4)HTML表格

000、前言 表格在实际开发中的应用还是比较多的&#xff0c;表格可以更加清晰地排列数据 001、基本结构 &#xff08;1&#xff09;构成 表格&#xff1a;<table>行&#xff1a;<tr>&#xff08;table row&#xff0c;表格行&#xff09;&#xff0c;由多少组t…...

uniapp实现自定义相机

自定义相机起因由于最近用uniapp调用原生相机容易出现闪退问题&#xff0c;找了很多教程又是压缩图片又是优化代码&#xff0c;我表示并没有太大作用!!实现自定义相机使用效果图拓展实现多种自定义相机水印相机身份证相机人像相机起因 由于最近用uniapp调用原生相机容易出现闪退…...

插值多项式的龙格现象的介绍与模拟

在文章拉格朗日插值多项式的原理介绍及其应用中&#xff0c;笔者介绍了如何使用拉格朗日插值多项式来拟合任意数据点集。   事实上&#xff0c;插值多项式会更倾向于某些形状。德国数学家卡尔龙格Carl Runge发现&#xff0c;插值多项式在差值区间的端点附近会发生扭动&#x…...

Spring整体架构包含哪些组件?

Spring是一个轻量级java开源框架。Spring是为了解决企业应用开发的复杂性而创建的&#xff0c;它使用基本的JavaBean来完成以前只可能由EJB完成的事情。 Spring的用途不仅限于服务器端的开发&#xff0c;从简单性、可测试性和松耦合的角度而言&#xff0c;任何java应用都可以从…...

开发接口需要考虑哪些问题?

1 接口名字 user/ user/adduser/xxx 见名知意&#xff0c;调用接口的开发人员和后来接手的开发人员能够根据接口名称大致猜测出接口作用。 2 协议 设计接口时&#xff0c;应明确调用接口的协议&#xff0c;是采用HTTP协议,HTTPS协议还是FTP协议。比如跨语言调用通常使用WebS…...

关于Activiti7审批工作流绘画流程图(2)

文章目录一、25张表详解二、安装插件一.定制流程提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、25张表详解 虽然表很多&#xff0c;但是仔细观察&#xff0c;我们会发现Activiti 使用到的表都是 ACT_ 开头的。表名的第二部分用两个字母表明表的用…...

String.format()对日期进行格式化

前言&#xff1a;String.format()作为文本处理工具&#xff0c;为我们提供强大而丰富的字符串格式化功能&#xff0c;这里根据查阅的资料做个学习笔记&#xff0c;整理成如下文章&#xff0c;供后续复习查阅。一. format()方法的两种重载形式&#xff1a;format(String format,…...

核酸检测信息管理系统

目录前言一、功能与需求分析二、详细设计与实现1、data包&#xff08;1&#xff09;DataDataBase&#xff08;2&#xff09;NaPaNamePassword2、operation包&#xff08;1&#xff09;操作接口&#xff08;2&#xff09;Resident用户功能&#xff08;3&#xff09;Simper用户功…...

典型回溯题目 - 全排列(一、二)

典型回溯题目 - 全排列&#xff08;一、二&#xff09; 46. 全排列 题目链接&#xff1a;46. 全排列状 题目大意&#xff1a; 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 注意&#xff1a;&#xff08;1&#xf…...

数据清洗和特征选择

数据清洗和特征选择 数据清洗和特征挖掘的工作是在灰色框中框出的部分&#xff0c;即“数据清洗>特征&#xff0c;标注数据生成>模型学习>模型应用”中的前两个步骤。 灰色框中蓝色箭头对应的是离线处理部分。主要工作是 从原始数据&#xff0c;如文本、图像或者应…...

java StringBuilder 和 StringBuffer 万字详解(深度讲解)

StringBuffer类介绍和溯源StringBuffer类常用构造器和常用方法StringBuffer类 VS String类&#xff08;重要&#xff09;二者的本质区别&#xff08;含内存图解&#xff09;二者的相互转化StringBuilder类介绍和溯源StringBuilder类常用构造器和常用方法String类&#xff0c;St…...

【Linux】帮助文档查看方法

目录1 Linux帮助文档查看方法1.1 man1.2 内建命令(help)1 Linux帮助文档查看方法 1.1 man man 是 Linux 提供的一个手册&#xff0c;包含了绝大部分的命令、函数使用说明。 该手册分成很多章节&#xff08;section&#xff09;&#xff0c;使用 man 时可以指定不同的章节来浏…...

UEFI 实战(2) HelloWorld 之一 helloworld及.inf文件

初识UEFI 按惯例&#xff0c;首先让我们用HelloWorld跟UEFI打个招呼吧 标准application /*main.c */ #include <Uefi.h> EFI_STATUS UefiMain ( IN EFI_HANDLE ImageHandle, IN EFI_SYSTEM_TABLE *SystemTable ) { SystemTable -> ConOut-> OutputString(SystemTab…...

向2022年度商界木兰上榜女性致敬!

目录 信息来源&#xff1a; 2022年度商界木兰名单 简介 评选标准 动态 榜单 为你心中的2023商界女神投上一票 信息来源&#xff1a; 2022年度商界木兰榜公布 华为孟晚舟获商界木兰最高分 - 脉脉 【最具影响力女性】历届商界木兰榜单 中国最具影响力的30位商界女性名单…...

ChatGPT助力校招----面试问题分享(二)

1 ChatGPT每日一题&#xff1a;DC-DC与LDO的区别 问题&#xff1a;介绍一下DC-DC与LDO的区别 ChatGPT&#xff1a;DC-DC和LDO都是电源管理电路&#xff0c;它们的主要作用是将输入电压转换为所需的输出电压&#xff0c;以供电子设备使用。但是&#xff0c;它们之间存在一些重…...

JAVA架构与开发(JAVA架构是需要考虑的几个问题)

在企业中JAVA架构师主要负责企业项目技术架构&#xff0c;企业技术战略制定&#xff0c;技术框架搭建&#xff0c;技术培训和技术攻坚的工作。 在JAVA领域&#xff0c;比较多的都是web项目。用于解决企业的数字化转型。对于JAVA架构师而言&#xff0c;平时对项目的架构主要考虑…...

vue 中 v-for 的使用

v-for 获取列表的前 n 条、中间范围、末尾 n 条的数据 list: [{ img: /static/home/news1.png, title: 标题1 },{ img: /static/home/news2.png, title: 标题2 },{ img: /static/home/news1.png, title: 标题3 },{ img: /static/home/news2.png, title: 标题4 },{ img: /stati…...

项目--基于RTSP协议的简易服务器开发(2)

一、项目创立初衷&#xff1a; 由于之前学过计算机网络的相关知识&#xff0c;了解了计算机网络的基本工作原理&#xff0c;对于主流的协议有一定的了解。但对于应用层的协议还知之甚少&#xff0c;因此我去了解了下目前主要的应用层传输协议&#xff0c;发现RTSP&#xff08;…...

ubus编译_环境搭建

文章目录一、环境搭建脚本toolChain_jsonc.cmaketoolChain_libubox.cmaketoolChain_ubus.cmakeinstall.sh二、测试出现问题&#xff1a;三、测试uloopmain.c 每5s打印信息一、环境搭建脚本 准备四个文件 install.sh,toolChain_jsonc.cmake,toolChain_libubox.cmake,toolChai…...

移动通信(16)信号检测

常见的信号检测算法一般包括以下几类检测算法&#xff1a;最优、线性和非线性。最优检测算法&#xff1a;最大似然算法线性检测算法&#xff1a;迫零检测算法和最小均方误差检测算法非线性检测算法&#xff1a;串行干扰消除检测算法球形译码检测算法属于一种次优检测算法&#…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...