HTML列表与表格详解_高效学习攻略

news2024/11/19 13:22:32

HTML列表与表格

  • HTML篇_第六章、HTML列表与表格
    • 一、列表
      • 1.1定义
      • 1.2列表的分类
      • 1.3列表的对比
    • 二、表格
      • 2.1表格的定义
      • 2.2表格的边框
      • 2.3表格的表头单元格
      • 2.4表格标题 <caption>
      • 2.5表格的高度和宽度
      • 2.6表格背景
      • 2.7表格空间
      • 2.8合并单元格
      • 2.9表格头部、主题和页脚
      • 2.10表格的嵌套

HTML篇_第六章、HTML列表与表格

一、列表

1.1定义

列表就是信息资源的一种展现形式,可以使信息结构化、条理化,并以列表的方式显现出来,以便快速获取相应的信息。

1.2列表的分类

HTML中列表分为三种类型,如下:

  • 无序列表

无序列表是一个项目列表,没有顺序,是由<ul>标签内嵌套<li>标签来书写组成,每个<li>标签独占一行。<ul>标签用于声明无序列表,<li>标签用于声明列表项。默认显示为标签项目前有一个粗体圆点,一般用于无顺序类型的列表,例如:导航、侧边栏或者有规律的图文组合模块等。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无序列表</title>
	</head>
	<body>
		<h1>今日新闻热搜</h1>
		<ul>
			<li>新闻1</li>
			<li>新闻2</li>
			<li>新闻3</li>
		</ul>
	</body>
</html>

运行结果:

在这里插入图片描述

  • 有序列表

有序列表,顾名思义是一种有一定顺序的列表,是由<ol>标签内嵌套<li>标签来书写组成的,每个<li>标签独占一行。<ol>标签用于声明有序列表,<li>标签用于声明列表项。默认显示为标签项目前有数字顺序标记,一般用于排序类型的列表,例如:试卷、问卷和选项等。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>
	<body>
		<h1>问卷调查</h1>
		<ol>
			<li>姓名:</li>
			<li>年龄:</li>
			<li>自我评价:</li>
		</ol>
	</body>
</html>

运行结果:

在这里插入图片描述

  • 定义列表

定义列表与无序列表类似,没有顺序,是由<dl>标签嵌套<dt>标签和<dd>标签来书写组成的,每个
<dt>标签和<dd>标签独占一行。<dl>标签用于声明定义列表,<dt>标签用于声明列表项,而<dd>标签则用于定义列表项内容。定义列表默认显示没有标记,一般用于一个标题下包含一个或者多个列表项的情况。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义列表</title>
	</head>
	<body>
		<h1>定义列表</h1>
		<dl>
			<dt>手机品牌</dt>
			<dd>华为</dd>
			<dd>oppo</dd>
			<dd>vivo</dd>
		</dl>
		<dl>
			<dt>电脑品牌</dt>
			<dd>联想</dd>
			<dd>神舟</dd>
			<dd>华硕</dd>
		</dl>
	</body>
</html>

运行结果:

在这里插入图片描述

1.3列表的对比

类型说明项目符号
无序列表· 以<ul>标签来实现
·以<li>标签表示列表项
无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表·以<ol>标签来实现
·以<li>标签表示列表项
有序列表ol-li一般用于显示带有顺序编号的特定场合
定义列表·以<dl>标签来实现
·以<dt>标签定义列表项
·以<dd>标签定义内容
定义列表一般适用于带有标题和标题解释性内容的场合

二、表格

2.1表格的定义

表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格(由<td>标签定义)。字母td指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格</title>
	</head>
	<body>
		<table>
			<tr>
				<td>一行一列</td>
				<td>一行二列</td>
				<td>一行三列</td>
			</tr>
			<tr>
				<td>二行一列</td>
				<td>二行二列</td>
				<td>二行三列</td>
			</tr>
		</table>
	</body>
</html>

运行结果:

在这里插入图片描述

2.2表格的边框

在定义表格时,如果不定义边框属性则表格不显示边框,如上述代码示例。大多数情况下,我们需要显示边框,这时就需要用到边框属性border来实现,设置了该属性则会显示一个带有边框的表格。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>一行一列</td>
				<td>一行二列</td>
				<td>一行三列</td>
			</tr>
			<tr>
				<td>二行一列</td>
				<td>二行二列</td>
				<td>二行三列</td>
			</tr>
		</table>
	</body>
</html>

运行结果:

在这里插入图片描述

2.3表格的表头单元格

众所周知,所有的表格都有表头,因为表头的存在,表格的交互性会会更加友好。HTML的中的表格也可以设置表头,这需要使用<th>标签来定义表格的表头单元格。大多数浏览器会将表头显示为居中加粗的文本。表格的表头单元格可以设置一些属性,例如:align(规定表格相对于周围元素的对齐方式)、dir(规定元素内容的文本方向)、width(规定表格的宽度)和height(规定表格的高度)。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>表头一</th>
				<th>表头二</th>
			</tr>
			<tr>
				<td>一行一列</td>
				<td>一行二列</td>
			</tr>
		</table>
	</body>
</html>

运行结果:

在这里插入图片描述

2.4表格标题

<table>标签内可以使用<caption>标签作为标题,并在表格的顶部显示。(该标签在较新版本的HTML中已经弃用,在这里仅作为了解内容出现)

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格</title>
	</head>
	<body>
		<table border="1">
			<caption>这是表格的标题</caption>
			<tr>
				<th>表头一</th>
				<th>表头二</th>
			</tr>
			<tr>
				<td>一行一列</td>
				<td>一行二列</td>
			</tr>
		</table>
	</body>
</html>

运行结果:

在这里插入图片描述

2.5表格的高度和宽度

在定义表格时可以使用width(宽)和height(高)属性设置表格宽度和高度。设置时按像素或可用屏幕区域的百分比来指定表格宽度或高度。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格</title>
	</head>
	<body>
		<table border="1" width = "200" height = "100">
			<caption>这是表格的标题</caption>
			<tr>
				<th>表头一</th>
				<th>表头二</th>
			</tr>
			<tr>
				<td>一行一列</td>
				<td>一行二列</td>
			</tr>
		</table>
	</body>
</html>

运行结果:

在这里插入图片描述

2.6表格背景

在HTML中,我们可以使用属性来为表格设置背景。这里有三个属性可用,分别为可以为整个表格或仅为一个单元格设置背景颜色的bgcolor属性、可以为整个表设置背景图像或仅为一个单元设置背景图像的background属性,可以设置边框颜色的bordercolor属性。但是HTML5中不推荐使用这些属性。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格背景</title>
	</head>
	<body>
		<h1>HTML表格背景</h1>
		<table border="1" bordercolor = "red" bgcolor = "yellow" background = "">
			<tr>
				<th>表头1</th>
				<th>表头2</th>
			</tr>
			<tr>
				<td>一行一列</td>
				<td>一行二列</td>
			</tr>
		</table>
	</body>
</html>

运行结果:

在这里插入图片描述

注意:background属性需要提供图像的URL地址

2.7表格空间

使用cellspacing属性和cellpadding属性用于调整HTML表格中单元格的空间。其中cellspacing属性用来定义表格单元格之间的空间,cellpadding属性用于表示单元格边框与单元格内容之间的距离

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格与空间</title>
	</head>
	<body>
		<table border="1" cellpadding = "5" cellspacing = "5">
			<tr>
				<th>表头1</th>
				<th>表头2</th>
				<th>表头3</th>
			</tr>
			<tr>
				<td>一行一列</td>
				<td>一行二列</td>
				<td>一行三列</td>
			</tr>
			<tr>
				<td>二行一列</td>
				<td>二行二列</td>
				<td>二行三列</td>
			</tr>
		</table>
	</body>
</html>

运行结果:

在这里插入图片描述

2.8合并单元格

在使用过程中,若需要合并单元格,则需要用的两个属性来实现。将两个或多个列合并为一个列,将使用colspan属性,如果要合并两行或更多行,则将使用rowspan属性。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML合并单元格</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>表头1</th>
				<th>表头2</th>
				<th>表头3</th>
			</tr>
			<tr>
				<td rowspan="2">一行一列</td>
				<td>一行二列</td>
				<td>一行三列</td>
			</tr>
			<tr>
				<td>二行二列</td>
				<td>二行三列</td>
			</tr>
			<tr>
				<td colspan = "3">三行一列</td>
			</tr>
		</table>
	</body>
</html>

运行结果:

在这里插入图片描述

2.9表格头部、主题和页脚

在HTML中表格可以分为三个部分,头部、主体和页脚,如同word文档中页面的页眉、正文、页脚。每个页面保持相同,而正文是表格的主要内容持有者。头部,主体和页脚的对应的三个标签分别是theadtbodytfoot。在表格中可以包含多个tbody元素以指示不同的页面,但是theadtfoot用该出现在tbody之前。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格</title>
	</head>
	<body>
	<table border = "1" width = "300" height = "150">
    <thead>
        <tr>
            <td colspan = "4">单独的表头</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan = "4">单独的表页脚</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>一行一列</td>
            <td>一行二列</td>
            <td>一行三列</td>
            <td>一行四列</td>
        </tr>
    </tbody>         
	</table>
	</body>
</html>

运行结果:

在这里插入图片描述

2.10表格的嵌套

在HTML中可以在一个表中使用另外一个表。在实现表格嵌套时可以使用<table>内的几乎所有标签。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML表格嵌套</title>
	</head>
	<body>
		<table border = "1" width = "100%">
		    <tr>
		        <td>
		            <table border = "1">
		                <tr>
		                    <th>表格1表头1</th>
		                    <th>表格1表头2</th>
		                </tr>
		                <tr>
		                    <td>表格1一行一列</td>
		                    <td>表格1一行二列</td>
		                </tr>
		                <tr>
		                    <td>表格1二行一列</td>
		                    <td>表格2二行二列</td>
		                </tr>
		            </table>
		        </td>
				<td>
					<table border = "1">
					    <tr>
					        <th>表格2表头1</th>
					        <th>表格2表头2</th>
					    </tr>
					    <tr>
					        <td>表格2一行一列</td>
					        <td>表格2一行二列</td>
					    </tr>
					    <tr>
					        <td>表格2二行一列</td>
					        <td>表格2二行二列</td>
					    </tr>
					</table>
				</td>
		    </tr>       
		</table>
	</body>
</html>

运行结果:

在这里插入图片描述


希望有所帮助!
关注我,持续更新。

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

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

相关文章

《可解释机器学习公开课》来了!

Datawhale开源 联合发布&#xff1a;同济子豪兄、Datawhale文章目录1.什么是机器学习的可解释性分析。2.学可解释机器学习有什么用&#xff1f;3.可解释机器学习开源学习计划&#xff0c;同济子豪兄和 Datawhale 联合发布。什么是可解释AI现代的机器学习和人工智能&#xff0c;…

redis 的雪崩、穿透和击穿

面试题 了解什么是 redis 的雪崩、穿透和击穿&#xff1f;redis 崩溃之后会怎么样&#xff1f;系统该如何应对这种情况&#xff1f;如何处理 redis 的穿透&#xff1f; 面试官心理分析 其实这是问到缓存必问的&#xff0c;因为缓存雪崩和穿透&#xff0c;是缓存最大的两个问…

【C++】list的模拟实现来咯

文章目录一、整体框架二、迭代器1、list迭代器的引入2、迭代器的区分3、list迭代器的实现4、模板三、增删查改1、insert和erase2、push_back和push_front3、pop_back和pop_front四、list的接口1、构造2、析构3、赋值重载五、list和vector的对比一、整体框架 list的本质就是带头…

中润光学通过科创板注册:预计年营收4亿 拟募资4亿

雷递网 雷建平 12月9日嘉兴中润光学科技股份有限公司&#xff08;简称&#xff1a;“中润光学”&#xff09;日前通过注册&#xff0c;准备在科创板上市。中润光学计划募资4.05亿&#xff0c;其中&#xff0c;2.7亿元用于高端光学镜头智能制造项目&#xff0c;5629万元用于高端…

【HDU No. 2243】单词情结 考研路茫茫——单词情结

【HDU No. 2243】单词情结 考研路茫茫——单词情结 杭电OJ 题目地址 【题意】 单词和词根仅由小写字母组成。给定N个词根&#xff0c;求长度不超过L 且至少包含一个词根的单词可能有多少个&#xff1f; 若有两个词根aa和ab&#xff0c;则长度不超过3且至少包含一个词根的单词…

IO流,,

标题1. 文件基础知识1.1 文件基础知识-文件流1.2 创建文件的3种方式(不是目录)3. 获取文件的相关信息4. 删除文件及创建多级(一极)目录2. IO流原理及流的分类2.1 InputStream 字节输入流2.1.1 FileInputStream2.1.2 FileOutStream2.1.3 拷贝文件2.2 FileReader2.3 FileWriter2.…

MyCat教程【mysql主从复制实现】

单个mysql数据库在处理业务的时候肯定是有限的&#xff0c;这时我们扩展数据库的第一种方式就是对数据库做读写分离&#xff08;主从复制&#xff09;,本文我们就先来介绍下怎么来实现mysql的主从复制操作。 1. 读写分离 原理&#xff1a;需要搭建主从模式&#xff0c;让主数…

Python实现房产数据分析与可视化 数据分析 实战

Python库的选择 话说&#xff0c;工欲善其事&#xff0c;必先利其器&#xff0c;虽然我们已经选择Python来完成剩余的工作&#xff0c;但是我们需要考虑具体选择使用Pytho的哪些利器来帮助我们更快更好地完成剩余的工作。 我们可以看一下&#xff0c;在这个任务中&#xff0c…

elasticsearch global 、 filters 和 cardinality 聚合

文章目录1. 背景2、解释1、global2、filters3、cardinality3、需求4、前置条件4.1 创建mapping4.2 准备数据5、实现3的需求5.1 dsl5.2 java 代码5.3 运行结果6、实现代码7、参考文档1. 背景 此处将单记录一下 global 、 filters和cardinality的聚合操作。 2、解释 1、global…

C++学习笔记(十八)——stack和queue

stack stack的介绍 stack接口的介绍 queue queue的介绍 queue接口的介绍 stack stack的介绍 stack是一种先进后出的容器. stack是一种容器适配器,专门用在具有后进先出(last-in first-out)操作的上下文环境中,其删除只能从容器的一端进行元素的插入与提取操作.stack是作…

Java——封装——Encapsulation

封装什么是封装访问权限修饰符导入import一个包package&#xff1f;Static到底是什么面向对象的三大特征&#xff1a;封装、继承、多态。今天我们来浅谈一下封装。什么是封装 我们不用那么专业那么难懂的语言讲解&#xff0c;我们就走一波野路子&#xff1a;封装就是指用priva…

理想汽车季报图解:营收93亿运营亏损21亿 沈亚楠卸任总裁职务

雷递网 雷建平 12月9日理想汽车&#xff08;纳斯达克&#xff1a;LI&#xff1b;香港交易所&#xff1a;2015&#xff09;今日公布财报。财报显示&#xff0c;理想汽车2022年第三季度营收93.4亿元&#xff08;13.1亿美元&#xff09;&#xff0c;较上年同期的77.8亿元增长20.2%…

【考研数据】一.2020年BJTU计算机学院考研录取数据分析

欢迎订阅本专栏:《北交计算机复试经验》 订阅地址:https://blog.csdn.net/m0_38068876/category_12110003.html 【考研数据】一.2020年BJTU计算机学院考研录取数据分析【考研数据】二.2021年BJTU计算机学院考研录取数据分析【考研数据】三.2022年BJTU计算机学院考研录取数据分…

vue.js:父子组件的实训案例watch实现

作业需求 需求1&#xff1a;定义两个输入框&#xff0c;通过输入框输输入的值改变页面显示的值需求2&#xff1a;改变第一个输入框的值的同时使得第二个输入框的值变为100倍并显示需求3&#xff1a;改变第二个输入框的值的同时使得第一个输入框的值变为1/100并显示用watch实现…

Redis 特性。

Remote Dict Serve 分类 实时同步数据 要求缓存中的数据必须与db中的数据保持一致&#xff0c;如何保证&#xff0c;只要DB发生了变化&#xff0c;缓存中的数据立即消息 阶段性缓存为了缓存数据 添加了生存时长属性 Redis 的特性。 性能极高 读的速度 11w/s 写的速度 8w次/s…

10.spring源码之registerListeners()

1. 准备 ApplicationEvent: 事件对象&#xff0c;Spring事件驱动模型中的对象源&#xff0c;继承JDK EventObject&#xff0c;通过在发布事件时通过EventObject.source字段携带事件相关的数据。 ApplicationListener: 应用监听器&#xff0c;负责监听事件对象是否有发生变化&a…

学习Java8 Stream流,让我们更加便捷的操纵集合

1. 概述 本篇文章会简略的介绍一下 Lambda 表达式&#xff0c;然后开启我们的正题 Java8 Stream 流&#xff0c;希望观众老爷们多多支持&#xff0c;并在评论区批评指正! Java8 的 Stream 流使用的是函数式编程模式。它可以被用来对集合或数组进行链状流式的操作&#xff0c;…

推荐系统基本问题及系统优化路径

省时查报告-专业、及时、全面的行研报告库省时查方案-专业、及时、全面的营销策划方案库【免费下载】2022年10月份热门报告盘点大规模推荐类深度学习系统的设计实践.pdf荣耀推荐算法架构演进实践.pdf推荐系统在腾讯游戏中的应用实践.pdf清华大学256页PPT元宇宙研究报告.pdf&…

产品设计杂感

概述 前面多篇文章提过我近一年以来几乎是一个人在负责一款数据产品&#xff0c;一款公司内部使用的报表开发工具。市面上的类似产品如Tableau&#xff0c;QuickBI等。工作角色&#xff08;职责&#xff09;包括&#xff1a;后端开发&#xff0c;前端开发&#xff0c;功能测试…

STM32 bootloader简单实现的验证

目录 背景知识 STM32的启动模式 Flash memory的大小 实验验证 分区分配 bootloader代码 systeminit 背景知识 STM32的启动模式 STM32有三种启动模式, 这里验证的bootloader是通过Flash memory启动方式, 使用STM32内置的Flash,其首地址是0x08000000&#xff0c;一般我们…