【HTML】HTML 表格总结 ★★★ ( 表格标签 | 行标签 | 单元格标签 | 表格标签属性 | 表头单元格标签 | 表格标题标签 | 合并单元格 )

news2024/11/14 20:52:13

文章目录

  • 一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 )
  • 二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 )
  • 三、表头单元格标签
  • 四、表格标题标签
  • 五、合并单元格
    • 1、合并单元格方式
    • 2、合并单元格顺序
    • 3、合并单元格流程
  • 六、合并单元格示例
    • 1、原始表格
    • 2、跨行合并单元格
    • 3、跨列合并单元格





一、表格标签组成 ( 表格标签 | 行标签 | 单元格标签 )


HTML 表格 由 3 种标签 组成 : 表格 涉及 的标签都是 双标签 ;

  • 表格标签 : 表格最 外围的标签 , 用于包裹整个表格 ; 其中 包含若干 tr 行标签 ;
	<table>整个表格内容</table>
  • 行标签 : 标签内是 一行的内容 , 其中 包含若干 td 标签 ;
	<tr>表格中一行的内容</tr>
  • 单元格标签 : 表格中一个单元格中的内容 , 只包含一个单元格的文本 ;
	<td>单元格文本内容</td>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 整个表格内容 -->
		<table>
			<!-- 表格中一行的内容 -->
			<tr>
				<!-- 表格中单个单元格内容 -->
				<td>姓名</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :

在这里插入图片描述
在这里插入图片描述





二、table 表格属性 ( border 属性 | align 属性 | width 属性 | height 属性 )


table 表格属性 :

  • border 属性 : 属性值 为 像素值 ; 设置边框 , 默认 0 像素 无边框 ;
  • cellspacing 属性 : 属性值 为 像素值 ; 设置 单元格边框 之间的 间距 , 默认 2 像素 ;
  • cellpadding 属性 : 属性值 为 像素值 ; 设置 单元格边框 与 单元格内容 之间的 间距 , 默认 1 像素 ;
  • width 属性 : 属性值 为 像素值 ; 设置 表格宽度 ;
  • height 属性 : 属性值 为 像素值 ; 设置 表格高度 ;
  • align 属性 : 可设置 left , center , right 等属性值 ; 用于设置 整体表格 在 网页中的 水平对齐方式 ;
    • 设置 left , 表格在网页左侧 ;
    • 设置 center , 表格在网页水平居中 ;
    • 设置 right , 表格在网页右侧 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 整个表格内容 -->
		<table border="1" width="500" height="200" 
			   align="center" cellpadding="10" cellspacing="0">
			<!-- 表格中一行的内容 -->
			<tr>
				<!-- 表格中单个单元格内容 -->
				<td>姓名</td>
				<td>年龄</td>
			</tr>
			<tr>
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :

在这里插入图片描述

在这里插入图片描述





三、表头单元格标签


表头单元格 可以在表格中 用作第一排 作为表格 的 表头 使用 , 表头单元格 中的 文本设置 可以与 普通单元格 中的文本设置 不同 ;


表头单元格 中的 文本 会 居中 , 并且 加粗 显示 ;


表头单元格 标签 如下 :

<th></th>

表头单元格 与 普通单元格 放置位置一样 , 也是放在 table 表格标签 下的 tr 表格行标签 下 , 如 :

		<!-- 表格标签 -->
		<table>
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
		</table>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 表格标签 -->
		<table border="1" width="500" height="200" 
			   align="left" cellpadding="10" cellspacing="0">
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :

在这里插入图片描述

在这里插入图片描述





四、表格标题标签


在 <table>表格标签 中 , 可以使用 表格标题标签 <caption> 为表格添加一个标题 ;

被添加的 表格标题 会 显示在表格上方 , 并且 居中显示 ;


表格标题标签用法 : 表格标题标签 必须紧跟在 <table>表格标签 后面 , 中间不要插入其它标签 , 否则设置无效 ;

		<!-- 表格标签 -->
		<table>
			<!-- 表格标题标签 -->
			<caption>表格标题</caption>
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
		</table>

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 表格标签 -->
		<table border="1" width="500" height="200" 
			   align="left" cellpadding="10" cellspacing="0">
			<!-- 表格标题标签 -->
			<caption>表格标题</caption>
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

网页效果 :

在这里插入图片描述





五、合并单元格



1、合并单元格方式


单元格合并方式 :

  • 跨行合并 : 垂直方向上的 上下 单元格合并 是 跨行合并 , 在 <td> 单元格标签 中 使用 rowspan 属性 , 设置跨行合并单元格数 ;
  • 跨列合并 : 水平方向上的 左右 单元格合并 是 跨列合并 , 在 <td> 单元格标签中 使用 colspan 属性 , 设置跨列合并单元格数 ;

2、合并单元格顺序


单元格 合并 是按照 从上到下 , 从左到右 的顺序进行合并 ;


3、合并单元格流程


合并单元格流程 :

  • 首先 , 确定 合并单元格 类型 , 是 跨行合并 还是 跨列合并 ;
  • 然后 , 根据 从上到下 , 从左到右 的顺序 , 找到要 设置 rowspan 或 colspan 属性 的 目标单元格 ;
    • 跨行合并 : 按照 从上到下 的顺序 进行合并 , 最上方的单元格 是 目标单元格 ;
    • 跨列合并 : 按照 从左到右 的顺序 进行合并 , 最左侧的单元格 是 目标单元格 ;
  • 最后 , 删除 合并后 多余的单元格 ;




六、合并单元格示例



1、原始表格


代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 表格标签 -->
		<table border="1" width="500" height="200" 
			   align="left" cellpadding="10" cellspacing="0">
			<!-- 表格标题标签 -->
			<caption>表格标题</caption>
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Jerry</td>
				<td>16</td>
			</tr>
		</table>
    </body>
</html>

显示效果 :
在这里插入图片描述


2、跨行合并单元格


按照下图的样式 , 合并红色矩形框中的单元格 ;

在这里插入图片描述

合并步骤 :

  • 首先 , 该合并是 跨行合并 , 要在 <td> 标签中 使用 rowspan 属性 ;
  • 然后 , 找到 目标单元格 , 是要合并单元格的最上方的单元格 , 显示 18 文本的单元格 是目标单元格 ;
  • 最后 , 删除多余的单元格 , 第三排 显示 16 文本的单元格要删除 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 表格标签 -->
		<table border="1" width="500" height="200" 
			   align="left" cellpadding="10" cellspacing="0">
			<!-- 表格标题标签 -->
			<caption>表格标题</caption>
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td rowspan="2">18</td>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Jerry</td>
			</tr>
		</table>
    </body>
</html>

显示效果 :
在这里插入图片描述


3、跨列合并单元格


按照下图的样式 , 合并红色矩形框中的单元格 ;

在这里插入图片描述

合并步骤 :

  • 首先 , 该合并是 跨列合并 , 要在 <td> 标签中 使用 colspan 属性 ;
  • 然后 , 找到 目标单元格 , 是要合并单元格的最 左测的单元格 , 显示 Jerry 文本的单元格 是目标单元格 ;
  • 最后 , 删除多余的单元格 , 第三排 显示 16 文本的单元格要删除 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
	<head>    
		<meta charset="UTF-8" /> 
        <title>网页标题</title>
		<base target="_blank"/>
    </head>
    <body>
		<!-- 表格标签 -->
		<table border="1" width="500" height="200" 
			   align="left" cellpadding="10" cellspacing="0">
			<!-- 表格标题标签 -->
			<caption>表格标题</caption>
			<!-- 表格行标签 -->
			<tr>
				<!-- 表格表头单元格标签 -->
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td>Tom</td>
				<td>18</td>
			</tr>
			<tr>
				<!-- 表格普通单元格标签 -->
				<td colspan="2">Jerry</td>
			</tr>
		</table>
    </body>
</html>

显示效果 :
在这里插入图片描述

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

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

相关文章

Linux之ping\kill\killall命令

Linux之ping\kill\killall命令

参考视频&#xff1a;linux命令&#xff08;ping&#xff09;linux命令&#xff08;kill、killall&#xff09;Linux ping 命令用于检测主机。执行 ping 指令会使用 ICMP 传输协议&#xff0c;发出要求回应的信息&#xff0c;若远端主机的网络功能没有问题&#xff0c;就会回应…
阅读更多...
Redis进阶：布隆过滤器（Bloom Filter）及误判率数学推导

Redis进阶：布隆过滤器（Bloom Filter）及误判率数学推导

1 缘起 有一次偶然间听到有同事在说某个项目中使用了布隆过滤器&#xff0c; 哎呦&#xff0c;我去&#xff0c;我竟然不知道啥是布隆过滤器&#xff0c; 这我哪能忍&#xff1f;其实&#xff0c;也可以忍&#xff0c;但是&#xff0c;可能有的面试官不能忍&#xff01;&#…
阅读更多...
简介JVM

简介JVM

目录 一、内存分区 1、程序计数器 2、栈 3、堆 4、方法区 二、类加载 1、Loading 2、Linking Verification Preparation Resolution 3、Initializing 4、双亲委派模型 三、垃圾回收 1、如何判断为垃圾&#xff1f; 引入引用计数 可达性分析 2、如…
阅读更多...
Transformer论文阅读：Swin Transformer算法笔记

Transformer论文阅读：Swin Transformer算法笔记

标题&#xff1a;Swin Transformer: Hierarchical Vision Transformer using Shifted Windows 会议&#xff1a;ICCV2021 论文地址&#xff1a;https://ieeexplore.ieee.org/document/9710580/ 官方代码&#xff1a;https://github.com/microsoft/Swin-Transformer 作者单位&am…
阅读更多...
[安装之2] 台式计算机加固态硬盘,台式机添加固态硬盘教程_台式主机固态硬盘怎么安装

[安装之2] 台式计算机加固态硬盘,台式机添加固态硬盘教程_台式主机固态硬盘怎么安装

固态硬盘是用固态电子存储芯片阵列制成的硬盘&#xff0c;也是电脑中比较常见的内存硬件&#xff0c;有些用户在使用电脑时候&#xff0c;由于内存不足导致系统运行较卡的情况&#xff0c;往往会选择添加固态硬盘来解决&#xff0c;那么台式主机固态硬盘怎么安装呢&#xff1f;…
阅读更多...
shell脚本内调用另外一个shell脚本的几种方法

shell脚本内调用另外一个shell脚本的几种方法

有时会在一个shell脚本(如test_call_other_shell.sh)中调用另外一个shell脚本(如parameter_usage.sh)&#xff0c;这里总结几种可行的方法&#xff0c;这些方法在linux上和windows上(通过Git Bash)均适用&#xff1a; 1.通过source: 运行在相同的进程&#xff0c;在test_…
阅读更多...
CCIE重认证-300-401-拖图题全

CCIE重认证-300-401-拖图题全

拖图 拖图题 编程 snippet&#xff1b;192.168.5.0&#xff0c;mask 255.255.255.0&#xff1b;number是192.168.5.0&#xff1b;mask是255.255.255.0 snippets&#xff1b;edit-config对config&#xff0c;loopback对name 100&#xff0c;address对primary&#xff0c;mask…
阅读更多...
广度优先搜索算法 - 迷宫找路

广度优先搜索算法 - 迷宫找路

广度优先搜索算法1 思考问题1.1 这个迷宫需不需要指定入口和出口&#xff1f;2 先粗略实现2.1 源码2.2 源码解释3 优化代码3.1 优化读取文件部分3.2 增加错误处理4 再优化-让程序变得更加灵活4.1 用户外部可以循环输入入口和出口5 完整代码这是一个提问者的提出的问题&#xff…
阅读更多...
制造业的云ERP在外网怎么访问?内网服务器一步映射到公网

制造业的云ERP在外网怎么访问?内网服务器一步映射到公网

随着企业信息化、智能化时代的到来&#xff0c;很多制造业企业都在用云ERP。用友U 9cloud通过双版本公有云专属、私有云订阅、传统软件购买三种模式满足众多制造业企业的需求&#xff0c;成为一款适配中型及中大型制造业的云ERP&#xff0c;是企业数智制造的创新平台。 用友U 9…
阅读更多...
python 面向对象利用selenium【获取某东商品信息】

python 面向对象利用selenium【获取某东商品信息】

用python程序和谷歌selenium插件获取某东商品详细信息【商品名称、商品简介&#xff0c;超链接】利用selenium自动化程序 中的css页面结构索取来获取详细数据关于谷歌selenium的安装方法和使用方法第一步检查自己谷歌浏览器的版本1.1 找到设置&#xff1a;并鼠标点击进入1.2进入…
阅读更多...
排序评估指标——NDCG和MAP

排序评估指标——NDCG和MAP

在搜索和推荐任务中&#xff0c;系统常返回一个item列表。如何衡量这个返回的列表是否优秀呢&#xff1f; 例如&#xff0c;当我们检索【推荐排序】&#xff0c;网页返回了与推荐排序相关的链接列表。列表可能会是[A,B,C,G,D,E,F],也可能是[C,F,A,E,D]&#xff0c;现在问题来了…
阅读更多...
使用canvas写一个flappy bird小游戏

使用canvas写一个flappy bird小游戏

简介 canvas 是HTML5 提供的一种新标签&#xff0c;它可以支持 JavaScript 在上面绘画&#xff0c;控制每一个像素&#xff0c;它经常被用来制作小游戏&#xff0c;接下来我将用它来模仿制作一款叫flappy bird的小游戏。flappy bird&#xff08;中文名&#xff1a;笨鸟先飞&am…
阅读更多...
XSS注入进阶练习篇（一）XSS-LABS通关教程

XSS注入进阶练习篇（一）XSS-LABS通关教程

XSS注入进阶练习篇1.常用标签整理2. XSS-LABS 练习2.1 level 1 无限制2.2 level 2 双引号闭合2.3 level 3 源码函数书写不全&#xff0c;单引号绕过2.4 level 4 无尖括号绕过2.5 level 5 a标签使用2.6 level 6 大小写绕过2.7 level 7 置空替换绕过2.8 level 8 URL编码绕过 - 重…
阅读更多...
安全—07day

安全—07day

Tomcat AJP 文件包含漏洞&#xff08;CVE-2020- 1938&#xff09; 漏洞概述 Ghostcat(幽灵猫&#xff09;是由长亭科技安全研究员发现的存在于Tomcat 中的安全漏洞&#xff0c;由于Tomcat AJP 协议设计上存在缺陷,攻击者通过Tomcat AJP Connector可以读取或包含 Tomcat上所有…
阅读更多...
Java岗面试题--Java并发（日积月累，每日三题）

Java岗面试题--Java并发（日积月累，每日三题）

目录面试题一&#xff1a;并行和并发有什么区别&#xff1f;面试题二&#xff1a;线程和进程的区别&#xff1f;追问&#xff1a;守护线程是什么&#xff1f;面试题三&#xff1a;创建线程的几种方式&#xff1f;1. 继承 Thread 类创建线程&#xff0c;重写 run() 方法2. 实现 …
阅读更多...
详解垃圾回收算法，优缺点是什么？｜金三银四系列

详解垃圾回收算法，优缺点是什么？｜金三银四系列

本文详细介绍了在 JVM 中如何判断哪些对象是需要回收的&#xff0c;以及不同的垃圾回收算法以及优缺点。点击上方“后端开发技术”&#xff0c;选择“设为星标” &#xff0c;优质资源及时送达上篇文章详细介绍了 JVM 的结构以及其内存结构&#xff0c;需要阅读请移步。本文主要…
阅读更多...
Android 9.0系统源码_通知服务（二）应用发送状态栏通知的流程

Android 9.0系统源码_通知服务（二）应用发送状态栏通知的流程

前言 应用发送一个显示在状态栏上的通知&#xff0c;对于移动设备来说是很常见的一种功能需求&#xff0c;本篇文章我们将会结合Android9.0系统源码具体来分析一下&#xff0c;应用调用notificationManager触发通知栏通知功能的源码流程。 一、应用触发状态栏通知 应用可以通…
阅读更多...
关于HDFS

关于HDFS

目录 一、HDFS概述 二、HDFS架构与工作机制 三、HDFS的Shell操作 四、Hdfs的API操作 一、HDFS概述 HDFS&#xff1a;Hadoop Distributed File System&#xff1b;一种分布式文件管理系统&#xff0c;通过目录树定位文件。使用场景&#xff1a;一次写入&#xff0c;多次读出…
阅读更多...
java 自定义注解

java 自定义注解

文章目录前言Annotation包自定义注解自定义注解示例参考文章&#xff1a;java 自定义注解 用处_java注解和自定义注解的简单使用参考文章&#xff1a;java中自定义注解的作用和写法前言 在使用Spring Boot的时候&#xff0c;大量使用注解的语法去替代XML配置文件&#xff0c;十…
阅读更多...
SpringAMQP消息队列（SpringBoot集成RabbitMQ）

SpringAMQP消息队列（SpringBoot集成RabbitMQ）

一、初始配置1、导入maven坐标<!--rabbitmq--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency>2、yml配置spring:rabbitmq:host: 你的rabbitmq的ipport: …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023