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.mzph.cn/diannao/26622.shtml

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

相关文章

vue+java实现简易AI问答组件(基于百度文心大模型)

一、需求 公司想要在页面中加入AI智能对话功能&#xff0c;故查找免费gpt接口&#xff0c;最终决定百度千帆大模型&#xff08;进入官网、官方文档中心&#xff09;&#xff1b; 二、主要功能列举 AI智能对话&#xff1b;记录上下文回答环境&#xff1b;折叠/展开窗口&#…

用Qt 中的QPainter类画时钟

在Qt中&#xff0c;我们可以通过QPainter类来绘制各种图形&#xff0c;包括时钟指针。以下是一个简单的例子&#xff0c;展示了如何在Qt中绘制一个简单的时钟指针。 #include <QPainter> #include <QWidget> #include <QTimer> #include <QTime>class…

管道(channel)select

select功能&#xff1a;解决多个管道的选择问题&#xff0c;也可以叫多路复用&#xff0c;可以从多个管道中随机公平的选择一个来执行 case后面必须进行的是io操作&#xff0c;不能是等值&#xff0c;随机去选择一个io操作 default防止select被阻塞&#xff0c;加入default 只…

使用MATLAB对地铁站、公交站等求解最短路径

使用MATLAB对城市的地铁站、公交站等站点&#xff0c;根据站点的经纬度坐标和彼此之间的权重&#xff0c;求解其最短路径、途径站点和路程 已知的数据如图&#xff0c;是西安市地铁站点的数据&#xff0c;保存在一个Excel里 如图&#xff0c;每列的内容都在上面&#xff0c;不…

滚动条样式

/*滚动条*/ //滚动条没有滑块的轨道部分. ::-webkit-scrollbar-track-piece {background: #fff;border-radius: 0px;opacity: 1;border: 1px solid #D9D9D9; } //整个滚动条 ::-webkit-scrollbar {width: 8px;height: 8px;background-color: transparent; } //滚动条上的滚动滑…

经常加班却不给加班费,我又不想离开这个单位,该怎么办?

经常加班却不给加班费&#xff0c;我又不想离开这个单位&#xff0c;该怎么办&#xff1f; --#李秘书讲写作#教你如何在维护权益与保持工作稳定间找到平衡&#xff1f; 在现代社会中&#xff0c;加班已经成为许多职场人士的常态。你也许也不例外&#xff0c;每天都在忙碌的工作…

Python教程:机器学习 - 百分位数(4)

什么是百分位数&#xff1f; 统计学中使用百分位数&#xff08;Percentiles&#xff09;为您提供一个数字&#xff0c;该数字描述了给定百分比值小于的值。 例如&#xff1a;假设我们有一个数组&#xff0c;包含住在一条街上的人的年龄。 ages [5,31,43,48,50,41,7,11,15,3…

深入理解服务器路由功能:配置与应用详解

在现代网络结构中&#xff0c;服务器不仅仅是提供数据和服务的中心节点&#xff0c;它们还经常承担着路由的角色&#xff0c;负责在不同网络之间转发数据包。这一过程依赖于服务器的路由功能&#xff0c;通过精确的路由表配置和管理&#xff0c;确保数据能够高效、准确地到达目…

SSL协议在实际生活中有哪些应用实例?

SSL协议的实际应用案例 SSL&#xff08;Secure Sockets Layer&#xff09;协议是一种网络通信协议&#xff0c;用于在客户端和服务器之间建立加密链接&#xff0c;以确保数据在传输过程中的安全性。尽管SSL协议已被TLS&#xff08;Transport Layer Security&#xff09;协议所取…

AMS(ActivityManagerService)源码解析,Activity是如何被打开的

AMS解析&#xff0c;Activity是如何被打开的 前言总结1. PMS保存App缩略信息2. startActivity发送请求3. AMS从PMS获取目标Activity的相关信息3.1 AMS部分3.2 PMS部分 4. AMS操作Activity返回栈&#xff0c;将目标Activity调用resume5. AMS将目标页面信息发给ActivityThread6. …

STM32学习笔记(二)--GPIO通用输入输出口详解

&#xff08;1&#xff09;配置步骤1.使用RCC开启GPIO时钟2.使用GPIO_Init函数初始化GPIO3.使用输入或输出的函数等来控制GPIO 其中涉及外设有RCC、GPIO &#xff08;2&#xff09;代码示例 案例1&#xff08;设置PA0为推挽输出&#xff09; RCC_APB2PeriphClockCmd(RCC_APB2…

使用Spring Cloud设计电商系统架构

在当今互联网高速发展的时代&#xff0c;电子商务系统成为了商家与用户互动的主要方式之一。为了能够更好地应对高并发、可扩展性、灵活性等需求&#xff0c;微服务架构逐渐成为设计电商系统的首选方案。Spring Cloud作为一个成熟的微服务框架&#xff0c;为开发人员提供了一整…

后端开发面试题4(附答案)

前言 在下首语言是golang,所以会用他作为示例。 原文参见 @arialdomartini的: Back-End Developer Interview Questions 语言相关问题 1. 告诉我你的首选语言的三个最坏的缺陷。 Golang虽然在很多方面表现出色,但它并非完美无缺,根据已有的讨论和批评,以下是Go语言被广泛…

深入浅出:面向对象软件设计原则(OOD)

目录 前言 1.单一责任原则&#xff08;SRP&#xff09; 2.开发封闭原则&#xff08;OCP&#xff09; 3.里氏替换原则&#xff08;LSP&#xff09; 4.依赖倒置原则&#xff08;DIP&#xff09; 5.接口分离原则&#xff08;ISP) 6.共同封闭原则&#xff08;CCP&#xff09…

Android替换默认的按键音

替换audio_assets.xml文件 此文件在AudioService.java被调用 <!--文件位置 /frameworks/base/core/res/res/xml/--> <audio_assets version"1.0"><group name"touch_sounds"><asset id"FX_KEY_CLICK" file"Effect…

用idea将java文件打成jar包

一、用idea将java文件打成jar包 1、在idea上选择file—Project Structure 2、Artifacts —点–JAR—From modules with dependencies 3、选择要打包的java文件 4、Build — Build Artifacts 5、找到刚才添加的Artifacts直接Build 6、生成jar包文件

【总结】项目中用过的设计模式

1.单例模式&#xff08;饿汉式 、懒汉式&#xff09; 应用场景&#xff1a;当频繁使用同一个对象&#xff0c;如配置信息、数据库连接池、线程池等时&#xff0c;使用单例模式可以避免重复创建对象&#xff0c;节省资源 线程池 2.工厂模式 应用场景&#xff1a;当需要创建的…

关于 UEditorPlus 和 TinyMCE 编辑器上线 HKCMS 插件市场的通知

亲爱的各位用户&#xff1a; 我们非常高兴地向大家宣布一个重要的消息&#xff01;UEditorPlus 和 TinyMCE 编辑器现已成功上线 HKCMS 插件市场&#xff01; UEditorPlus 以其强大的功能和便捷的操作&#xff0c;为用户提供了卓越的编辑体验。而 TinyMCE 编辑器也一直以其稳定…

C语言 | Leetcode C语言题解之第140题单词拆分II

题目&#xff1a; 题解&#xff1a; struct Trie {int ch[26];bool flag; } trie[10001];int size;void insert(char* s, int sSize) {int add 0;for (int i 0; i < sSize; i) {int x s[i] - a;if (trie[add].ch[x] 0) {trie[add].ch[x] size;memset(trie[size].ch, 0…

C语言 | Leetcode C语言题解之第139题单词拆分

题目&#xff1a; 题解&#xff1a; unsigned long long Hash(char* s, int l, int r) {unsigned long long value 0;for (int i l; i < r; i) {value value * 2333ull;value s[i] - a 1;}return value; } bool query(unsigned long long* rec, int len_rec, unsigned…