HTML列表和表格标签

目录

1.列表标签

1.1无序列表

1.2有序列表

1.3定义列表 

2. 表格标签、

2.1表格标签的属性

2.2合并单元格


1.列表标签

1.1无序列表

<ul>: [type 属性: disc( 实心圆点 )( 默认 ) circle( 空心圆圈 ) square( 实心方块 )]   
<li>: 列表中的每一项

Emment语法:ul>li*3 


<ul><li></li><li></li><li></li>
</ul>
对于属性的表现展示:
1. disc( 实心圆点 )( 默认 )
代码:
显示效果: 

2. circle(空心圆圈)

代码:

  显示效果

3. square(实心方块)

代码:

   显示效果

1.2有序列表

Emment语法:ol>li*3 

<ol><li></li><li></li><li></li>
</ol>

1.代码: 

   显示效果

如果你想要从特定的序号开始 

2.代码: 

  显示效果

无序和有序也可以嵌套

3.代码:

   显示效果

1.3定义列表 

实现问答和解释的效果,dd有默认缩进的效果

Emment语法:dl>dt+dd

   <dl><dt></dt><dd></dd></dl>

 代码:

显示效果


2. 表格标签

table 标签 : 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格 . 会居中加粗
thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的 )
tbody: 表格得到主体区域 .
caption:表格的标题

Emment语法:table>(tr>th*3)*4

   <table><tr><th></th><th></th><th></th></tr><tr><th></th><th></th><th></th></tr><tr><th></th><th></th><th></th></tr><tr><th></th><th></th><th></th></tr></table>

 接下来我们逐一添加属性(因为我们只是看看添加属性后的效果,就不分表头和表身了)

2.1表格标签的属性

代码:

  显示效果

1.border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框

2.width / height: 设置尺寸 

3.cellspacing: 单元格之间的距离. 默认为 2 像素 ,cellpadding: 内容距离边框的距离, 默认 1 像素

2.2合并单元格

1.跨行合并 : rowspan="n"
2.跨列合并 : colspan="n"
步骤
1. 先确定跨行还是跨列
2. 找好目标单元格 ( 跨列合并 , 左侧是目标单元格 ; 跨行合并 , 上方是目标单元格 )
3. 删除的多余的单元

代码:

 <table align="center" border="10" cellpadding="20" cellspacing="0" width="500"height="500"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td colspan="2">男</td></tr><tr><td>李四</td><td>女</td><td>11</td></tr></table>

  显示效果


以上为我个人的小分享,如有问题,欢迎讨论!!! 

都看到这了,不如关注一下,给个免费的赞 

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

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

相关文章

在VSCode中安装python

引言 Python 是一种广泛使用的高级编程语言&#xff0c;因其易学、易用、强大而受到欢迎。它由 Guido van Rossum 于 1991 年首次发布&#xff0c;并以简洁的语法和丰富的库生态系统而著称。 以下是 Python 的一些关键特点和优势&#xff1a; 关键特点 易于学习和使用&#x…

SolidWorks对设计电脑硬件配置要求是怎么样的

SolidWorks&#xff0c;作为达索系统&#xff08;Dassault Systemes&#xff09;旗下的子公司&#xff0c;一直以其出色的机械设计软件解决方案而著称。它是基于Parasolid内核开发&#xff0c;是单核三维设计软件&#xff0c;面上使用比较多的版本有SolidWorks2022、SolidWorks…

Java 数据类型 -- Java 语言的 8 种基本数据类型、字符串与数组

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 004 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…

6.每日LeetCode-数组类,找到所有数组中消失的数字(Go)

题目 448找到所有数组中消失的数字.go 给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 示例 1&#xff1a; 输入&#xff1a;nums [4,3,2,7,8,2,…

MySQL 8.0 安装、配置、启动、登录、连接、卸载教程

目录 前言1. 安装 MySQL 8.01.1 下载 MySQL 8.01.2 安装 MySQL 8.0 2. 配置 MySQL 8.02.1打开环境变量2.2新建变量 MYSQL_HOME2.3编辑 Path 变量 3. 启动MySQL 8.03.1验证安装与配置是否成功3.2初始化并注册MYSQL3.3 启动MYSQL服务 4.登录MySQL4.1修改账户默认密码4.2登录MYSQL…

基于springboot实现小型诊疗预约平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现小型诊疗预约平台系统的设计演示 摘要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本小型诊疗预约平台就是在这样的大环境下诞生&#xff0c…

西安交通大学联合中科院半导体所通过龙讯旷腾PWmat发表最新《iScience》:固定电势法揭示质子转移过程中的电子转移之谜

电化学是研究电能和化学能之间相互转换的科学。在能源日趋紧张的今天&#xff0c;研究电化学中的能量转换特性对能源科学的进步具有深远的意义。电子是电能的载体&#xff0c;因此研究电子在电化学过程中的转移是加深对电化学反应能量交换机制理解的关键。以质子电化学还原反应…

架构设计 - nginx 的核心机制与主要应用场景

一、nginx 的核心机制&#xff1a; 1. 事件驱动模型&#xff08;epoll 多路复用&#xff09; 事件循环&#xff1a; Nginx的核心组件是一个事件循环&#xff0c;它不断地监听事件&#xff08;如新连接的到来、请求数据的可读性等&#xff09;。 当有事件发生时&#xff0c;事…

深入解析TF-IDF算法:文本分析的基石与力量

在信息爆炸的时代文本数据无处不在&#xff0c;从新闻报道到社交媒体帖子&#xff0c;从学术论文到产品评论&#xff0c;大量的文本信息需要被有效地分析和利用。在这样的背景下TF-IDF&#xff08;Term Frequency-Inverse Document Frequency&#xff09;算法作为一种简单而有效…

【动态规划算法题记录】70. 爬楼梯——递归/动态规划

题目描述 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 题目分析 递归法&#xff08;超出时间限制&#xff09; 递归参数与返回值 void reversal(int i, int k) 每次我们处理第i个台阶到第k个…

redis 一些笔记1

redis 一、redis事务二、管道2.1 事务与管道的区别 三、主从复制3.13.2 权限细节3.3 基本操作命令3.4 常用3.4.1 一主几从3.4.2 薪火相传3.4.3 反客为主 3.5 步骤3.6 缺点 一、redis事务 放在一个队列里&#xff0c;依次执行&#xff0c;并不保证一致性。与mysql事务不同。 命…

一文讲清:bom管理系统是什么?在生产管理中有什么作用?

在制造业中&#xff0c;物料清单&#xff08;Bill of Materials&#xff0c;简称BOM&#xff09;扮演着至关重要的角色。物料清单&#xff08;BOM&#xff09;是制造或维修产品所需的材料、组件和零件的结构化综合列表&#xff0c;以及所需材料的数量、名称、描述和成本。简而言…

4.3 Python 元组类型常用操作及内置方法

文章目录 1. Tuple元组1.1 元组1.2 获取元素1.3 修改元素 2. 类型转换3. 索引取值与切片4. 遍历元组5. 获取长度6. 拼接与复制6.1 元组的拼接6.2 元组元素复制 7. 成员运算8. 统计元素9. 获取索引10. 练习 1. Tuple元组 1.1 元组 特征: 使用小括号括起来, 内部可以存放多个数…

【C++进阶】RBTree封装map与set

1.红黑树的迭代器 1.1 begin() begin()就是红黑树的开头&#xff0c;那么对于红黑树来说按照中序序列是该树的最左节点。 Iterator Begin(){Node* leftMin _root;while (leftMin->_left){leftMin leftMin->_left;}return Iterator(leftMin);} 1.2 end() begin()就是…

【启明智显分享】个位数价格工业HMI芯片:720P@60fps,配备2D加速

我们生活在一个“屏”的时代&#xff0c;工业自动化、智能生活的实现都离不开屏幕的帮助&#xff0c;而对于消费者而言&#xff0c;最大的痛点就是显示屏的画质&#xff0c;一个优质的人机交互界面影响着用户体验&#xff0c;流畅清晰的图像呈现与屏幕的分辨率、刷新率都息息相…

VScode ssh远程连接代码开发XHR failed

一、问题描述 在vscode下载插件Remote-SSH远程连接进行代码开发时&#xff0c;提示 XHR failed 无法建立连接。 二、解决方案 1. 离线下载vscode-server 第一步&#xff1a;vscode菜单栏----帮助----关于----提交后面的一串数字字母即为vscode的 commit_id 第二步&#xff…

uniapp地图导航

我们只需要给图标加一个点击事件 我这里的数据都是动态的&#xff0c;想测试的朋友可以写固定值 然后跳转之后首先会调到选择软件导航 点击导航之后会显示使用哪个app 最后我们选择之后将会直接跳转到app进行导航

Git基础指令(图文详解)

目录 Git概述Git基础指令Linux系统操作指令 Git软件指令1.配置信息2.名称和邮箱3.初始化版本库4.向版本库中添加文件5.修改版本库文件6. 查看版本库文件历史 7.删除文件8.恢复历史文件 Git概述 Git基础指令 Linux系统操作指令 Git是一款免费、开源的分布式版本控制系统&…

028、工具_Pipeline

Redis客户端执行一条命令分为如下四个过程: 1)发送命令 2)命令排队 3)命令执行 4)返回结果 其中1)+4)称为Round Trip Time(RTT,往返时间)。 Pipeline(它能将一组Redis命令进 行组装,通过一次RTT传输给Redis,再将这组Redis命令的执行结果按顺序返回给客户端,图3-…

早知 121私人导航升级新版本, 第一次使用原生dialog标签。

早知121项目介绍说明 早知121 - 一个快速创建私人导航网站。 用途&#xff1a; 创建个人的工作导航&#xff0c;收集常用网址&#xff0c;可贡献给同事。创建个人垂直领域导航 优点&#xff1a; - 不需懂技术&#xff0c;不用维护服务器&#xff0c;维护私人导航收藏站。 网…