《HTML 简易速速上手小册》第3章：HTML 的列表与表格（2024 最新版）

在这里插入图片描述

文章目录

  • 3.1 创建无序和有序列表（📝🌟👍 信息的时尚搭配师）
    • 3.1.1 基础示例：创建一个简单的购物清单
    • 3.1.2 案例扩展一：创建一个旅行计划清单
    • 3.1.3 案例扩展二：创建一个混合列表
  • 3.2 基础表格的构建（📈🎉🌐 数据的小秘书）
    • 3.2.1 基础示例：创建一个简单的课程表
    • 3.2.2 案例扩展一：创建一个生日派对邀请名单
    • 3.2.3 案例扩展二：制作一个简单的产品价格表
  • 3.3 表格的高级应用和样式调整（🎨📊💫 网页的数据艺术家）
    • 3.3.1 基础示例：添加颜色和边框样式
    • 3.3.2 案例扩展一：合并单元格
    • 3.3.3 案例扩展二：在表格中嵌入图片和链接

3.1 创建无序和有序列表（📝🌟👍 信息的时尚搭配师）

在这一节里，我们将变身为信息的时尚搭配师，使用无序和有序列表来给我们的网页内容增添一些秩序和风格。让我们一步步探索如何利用这些小巧的工具来整理我们的信息。

3.1.1 基础示例：创建一个简单的购物清单

想象一下，你正在准备一个周末聚会，需要制作一个购物清单。使用无序列表是个不错的选择，因为买东西的顺序并不重要。

<!DOCTYPE html>
<html>
<head><title>周末聚会购物清单</title>
</head>
<body><h2>购物清单</h2><ul><li>薯片</li><li>可乐</li><li>披萨</li></ul>
</body>
</html>

这里，<ul> 标签创建了一个无序列表，而每个 <li> （列表项）则是你的购物清单上的一个项目。

3.1.2 案例扩展一：创建一个旅行计划清单

现在，假设你正在规划一次旅行，想要列出你需要按顺序做的事情。有序列表在这里就派上用场了。

<!DOCTYPE html>
<html>
<head><title>我的旅行计划</title>
</head>
<body><h2>旅行前需要做的事情</h2><ol><li>预定机票</li><li>预订酒店</li><li>打包行李</li></ol>
</body>
</html>

在这个例子中，<ol> 代表有序列表，每个 <li> 则是旅行准备过程中的一个步骤。

3.1.3 案例扩展二：创建一个混合列表

有时候，你可能需要在一个列表中同时使用无序和有序列表，比如说，你正在写一篇关于如何烹饪完美意面的博客。

<!DOCTYPE html>
<html>
<head><title>如何烹饪完美意面</title>
</head>
<body><h2>烹饪意面的步骤</h2><ol><li>煮开水</li><li>加入意面<ul><li>确保水是滚烫的</li><li>加入适量盐</li></ul></li><li>煮到意面变软</li><li>排水，加入你喜欢的酱料</li></ol>
</body>
</html>

在这个例子中，我们使用了一个有序列表 <ol> 来描述烹饪的主要步骤，而在其中的某些步骤，比如“加入意面”，我们又使用了无序列表 <ul> 来描述相关的细节。这种混合使用列表的方式可以让你的信息既清晰又详细。

通过这些案例，你现在应该已经成为一个无序和有序列表的使用高手了！记住，列表不仅仅是让事情变得有条理，它们还可以给你的网页增加可读性和吸引力。现在就去试试，用列表给你的网页内容增添一些组织和风格吧！

在这里插入图片描述

3.2 基础表格的构建（📈🎉🌐 数据的小秘书）

表格，这个数据的晚礼服大师，可以把乏味的数字和文字转换成引人注目的信息。在本节中，我们将一起学习如何使用 HTML 来创建基础但优雅的表格。让我们一步步揭开表格的神秘面纱！

3.2.1 基础示例：创建一个简单的课程表

假设你是一个热爱学习的学生，想要为你的一周课程创建一个表格。这个基础表格可以帮你一眼看清每天的课程安排。

<!DOCTYPE html>
<html>
<head><title>我的课程表</title>
</head>
<body><h2>周课程表</h2><table border="1"><tr><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td>8:00-10:00</td><td>数学</td><td>物理</td><td>化学</td><td>英语</td><td>体育</td></tr><!-- 更多行数据 --></table>
</body>
</html>

在这个例子中，<table> 是创建表格的核心元素。<tr> 代表表格的一行，<th> 用于表头（标题），而 <td> 用于普通单元格（数据）。这样，一眼望去，就可以清楚地知道每天的课程安排。

3.2.2 案例扩展一：创建一个生日派对邀请名单

接下来，让我们试着为即将到来的生日派对创建一个邀请名单表格。这个表格可以帮助你追踪谁已经确认参加。

<!DOCTYPE html>
<html>
<head><title>生日派对邀请名单</title>
</head>
<body><h2>生日派对邀请名单</h2><table border="1"><tr><th>姓名</th><th>是否确认</th><th>备注</th></tr><tr><td>小明</td><td>是</td><td>带礼物来</td></tr><tr><td>小红</td><td>否</td><td>可能有事</td></tr><!-- 更多行数据 --></table>
</body>
</html>

这个表格不仅列出了被邀请的人员名单，还包括了他们是否确认参加以及相关的备注。

3.2.3 案例扩展二：制作一个简单的产品价格表

最后，假设你正在运营一家小店，需要创建一个产品价格表来展示给你的客户。

<!DOCTYPE html>
<html>
<head><title>产品价格表</title>
</head>
<body><h2>我们的产品</h2><table border="1"><tr><th>产品名称</th><th>价格</th><th>库存量</th></tr><tr><td>苹果</td><td>¥5/斤</td><td>20斤</td></tr><tr><td>香蕉</td><td>¥3/斤</td><td>30斤</td></tr><!-- 更多行数据 --></table>
</body>
</html>

通过这个表格，你的客户可以轻松了解到每种产品的价格和库存量，从而做出购买决策。

通过这些案例，你已经掌握了基础表格的构建技巧。记住，表格不仅是展示数据的工具，它们还可以成为你网页上的视觉亮点。现在，就让我们用表格将那些平淡的信息变得生动起来吧！

在这里插入图片描述

3.3 表格的高级应用和样式调整（🎨📊💫 网页的数据艺术家）

表格不只是数据的展示架，它们还可以变身为精致的艺术品！在本节中，我们将学习如何利用一些高级技巧和样式调整，让你的表格从普通走向非凡。

3.3.1 基础示例：添加颜色和边框样式

首先，我们来给一个基础表格添加一些颜色和边框样式，使其更加吸引人。

<!DOCTYPE html>
<html>
<head><title>彩色课程表</title><style>table { border-collapse: collapse; width: 100%; }th, td { border: 1px solid black; padding: 8px; text-align: left; }th { background-color: #f2f2f2; }tr:nth-child(even) { background-color: #f9f9f9; }</style>
</head>
<body><h2>我的彩色课程表</h2><table><tr><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td>8:00-10:00</td><td>数学</td><td>物理</td><td>化学</td><td>英语</td><td>体育</td></tr><!-- 更多行数据 --></table>
</body>
</html>

在这个例子中，我们通过 <style> 标签添加了一些 CSS 样式，使得表格拥有了统一的边框、间距和颜色主题，更具可读性和美观性。

3.3.2 案例扩展一：合并单元格

接下来，我们来看一个更高级的技巧：合并单元格。这在创建诸如时间表或事件日程时特别有用。

<!DOCTYPE html>
<html>
<head><title>活动时间表</title><style>/* 前面的样式代码 *//* 合并单元格的样式 */td { text-align: center; }</style>
</head>
<body><h2>周末活动时间表</h2><table><tr><th>时间</th><th>活动</th></tr><tr><td>上午</td><td>远足</td></tr><tr><td rowspan="2">下午</td><td>烧烤</td></tr><tr><td>游泳</td></tr></table>
</body>
</html>

在这个例子中，rowspan="2" 使得“下午”这个单元格跨越了两行，方便地表示了两个连续的活动都在下午进行。

3.3.3 案例扩展二：在表格中嵌入图片和链接

最后，我们来试试在表格中嵌入图片和链接，这能让表格的信息表达更加丰富和直观。

<!DOCTYPE html>
<html>
<head><title>我的旅行相册</title><style>/* 前面的样式代码 */img { width: 100px; height: auto; }</style>
</head>
<body><h2>旅行相册</h2><table><tr><th>地点</th><th>照片</th><th>描述</th></tr><tr><td>巴黎</td><td><img src="paris.jpg" alt="巴黎"></td><td><a href="https://example.com/paris">关于这个地方的更多信息</a></td></tr><!-- 更多行数据 --></table>
</body>
</html>

在这个表格中，我们不仅展示了旅行的地点，还通过 <img> 标签添加了相应的照片，以及通过 <a> 标签添加了指向更多信息的链接。

通过这些案例，你应该已经掌握了如何将基础表格转变为具有更高级功能和更吸引人样式的技巧。现在，就让我们用这些技巧给你的网页增添一些数据的魅力吧！

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

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

相关文章

【数据分享】1929-2023年全球站点的逐年平均气温数据（Shp\Excel\免费获取）

【数据分享】1929-2023年全球站点的逐年平均气温数据（Shp\Excel\免费获取）

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;其中又以气温指标最为常用&#xff01;说到气温数据&#xff0c;最详细的气温数据是具体到气象监测站点的气温数据&#xff01;本次我们为大家带来的就是具体到气象监…
阅读更多...
win11 系统 WSL2 备份与还原

win11 系统 WSL2 备份与还原

win11 系统想要使用 linu 开发环境&#xff0c;除了虚拟机&#xff0c;就是 wsl 好使了。 但是 wsl 如过用了一段时间里面环境工程配置迁移麻烦如果重装系统后能直接备份还原就方便了。 确定你的版本 使用 WinR 打开输入框 输入 cmd 命令 打开命令提示符界面 wsl -l -v查看…
阅读更多...
【备战蓝桥杯】——循环结构

【备战蓝桥杯】——循环结构

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-bFHV3Dz5xMe6d3NB {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…
阅读更多...
QT tcp与udp网络通信以及定时器的使用 (7)

QT tcp与udp网络通信以及定时器的使用 (7)

QT tcp与udp网络通信以及定时器的使用 文章目录 QT tcp与udp网络通信以及定时器的使用1、QT网络与通信简单介绍2、QT TCP通信1、 服务器的流程2、 客户端的流程3、服务器的编写4、客户端的编写 3、QT UDP通信1、客户端流程2、客户端编写3、UDP广播4、UDP组播 4、定时器的用法1、…
阅读更多...
【ArcGIS微课1000例】0098：查询河流流经过的格网

【ArcGIS微课1000例】0098：查询河流流经过的格网

本实验讲述，ArcGIS中查询河流流经过的格网，如黄河流经过的格网、县城、乡镇、省份等。 文章目录 一、加载数据二、空间查询三、结果导出四、注意事项一、加载数据 加载实验配套数据0098.rar中的河流（黄河）和格网数据，如下图所示： 接下来，将查询河流流经过的格网有哪些并…
阅读更多...
SpringBoot将第三方的jar中的bean对象自动注入到ioc容器中

SpringBoot将第三方的jar中的bean对象自动注入到ioc容器中

新建一个模块&#xff0c;做自动配置 config&#xff1a;需要准备两个类&#xff0c;一个自动配置类&#xff0c;一个配置类 CommonAutoConfig&#xff1a;此类用于做自动配置类它会去读取resoutces下的META-INF.spring下的org.springframework.boot.autoconfigure.AutoConfig…
阅读更多...
LabVIEW探测器CAN总线系统

LabVIEW探测器CAN总线系统

介绍了一个基于FPGA和LabVIEW的CAN总线通信系统&#xff0c;该系统专为与各单机进行系统联调测试而设计。通过设计FPGA的CAN总线功能模块和USB功能模块&#xff0c;以及利用LabVIEW开发的上位机程序&#xff0c;系统成功实现了CAN总线信息的收发、存储、解析及显示功能。测试结…
阅读更多...
嘿嘿，vue之输出土味情话

嘿嘿，vue之输出土味情话

有点好玩&#xff0c;记录一下。通过按钮调用网站接口&#xff0c;然后解构数据输出土味情话。 lovetalk.vue: <!--vue简单框架--> <template> <!-- 这是一个div容器&#xff0c;用于显示土味情话 --> <div class"talk"> <!-- 当点…
阅读更多...
回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测

回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测

回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测 目录 回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-LSSVM【24年…
阅读更多...
K个一组翻转链表---链表OJ

K个一组翻转链表---链表OJ

https://leetcode.cn/problems/reverse-nodes-in-k-group/?envType=study-plan-v2&envId=top-100-liked K个一组进行翻转，大体上是和前面两两翻转是类似的，区别就在于，这里需要自己判断是否需要翻转，如何翻转，怎么记录。这里我们用递归来实现。 是否需要翻转…
阅读更多...
数据结构·单链表经典例题

数据结构·单链表经典例题

1. 移除链表元素 OJ链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 本题是说给出一个链表的头节点head和一个整数val&#xff0c;如果发现节点中存的数据有val就删掉它&#xff0c;最后返回修改后的链表头节点地址 如果题目中没有明确…
阅读更多...
第十八讲_HarmonyOS应用开发实战（实现电商首页）

第十八讲_HarmonyOS应用开发实战（实现电商首页）

HarmonyOS应用开发实战&#xff08;实现电商首页&#xff09; 1. 项目涉及知识点罗列2. 项目目录结构介绍3. 最终的效果图4. 部分源码展示 1. 项目涉及知识点罗列 掌握HUAWEI DevEco Studio开发工具掌握创建HarmonyOS应用工程掌握ArkUI自定义组件掌握Entry、Component、Builde…
阅读更多...
【Redis】关于它为什么快？使用场景？以及使用方式？为何引入多线程？

【Redis】关于它为什么快？使用场景？以及使用方式？为何引入多线程？

目录 1.既然redis那么快&#xff0c;为什么不用它做主数据库&#xff0c;只用它做缓存&#xff1f; 2.Redis 一般在什么场合下使用&#xff1f; 3.redis为什么这么快&#xff1f; 4.Redis为什么要引入了多线程&#xff1f; 1.既然redis那么快&#xff0c;为什么不用它做主数据…
阅读更多...
Nginx 配置解析：从基础到高级应用指南

Nginx 配置解析：从基础到高级应用指南

Nginx 配置解析&#xff1a;从基础到高级应用指南 Nginx 配置解析&#xff1a;从基础到高级应用指南1. 安装和基本配置安装 Nginx基本配置 2. 虚拟主机配置3. 反向代理配置4. 负载均衡配置5. SSL 配置6. 高级配置选项结语 Nginx 配置解析&#xff1a;从基础到高级应用指南 Ngi…
阅读更多...
C#使用OpenCvSharp4库读取电脑摄像头数据并实时显示

C#使用OpenCvSharp4库读取电脑摄像头数据并实时显示

一、OpenCvSharp4库 OpenCvSharp4库是一个基于.Net封装的OpenCV库&#xff0c;Github源代码地址为&#xff1a;https://github.com/shimat/opencvsharp&#xff0c;里面有关于Windows下安装OpenCvSharp4库的描述&#xff0c;如下图所示&#xff1a; 二、C#使用OpenCvSharp4库…
阅读更多...
emment语法生成html标签

emment语法生成html标签

阅读更多...
Python tkinter (8) ——Spinbox控件

Python tkinter (8) ——Spinbox控件

Python的标准Tk GUI工具包的接口 tkinter系列文章 python tkinter窗口简单实现 Python tkinter (1) —— Label标签 Python tkinter (2) —— Button标签 Python tkinter (3) —— Entry标签 Python tkinter (4) —— Text控件 Python tkinter (5) 选项按钮与复选框 Pyt…
阅读更多...
中间件安全

中间件安全

中间件安全 vulhub漏洞复现&#xff1a;https://vulhub.org/操作教程&#xff1a;https://www.freebuf.com/sectool/226207.html 一、Apache Apache(音译为阿帕奇)是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上&#xff0c;由于其跨平台和…
阅读更多...
RT-DETR改进有效系列目录 | 包含卷积、主干、RepC3、注意力机制、Neck上百种创新机制

RT-DETR改进有效系列目录 | 包含卷积、主干、RepC3、注意力机制、Neck上百种创新机制

💡 RT-DETR改进有效系列目录 💡 前言 Hello，各位读者们好 Hello，各位读者，距离第一天发RT-DETR的博客已经过去了接近两个月，这段时间里我深入的研究了一下RT-DETR在ultralytics仓库的使用，旨在为大家解决为什么用v8的仓库训练的时候模型不收敛，精度差的离谱的问题，…
阅读更多...
智能小程序页面配置、运行机制及路由

智能小程序页面配置、运行机制及路由

页面介绍 Page 代表应用的一个页面&#xff0c;负责页面展示和交互。每个页面对应一个子目录&#xff0c;一般有多少个页面&#xff0c;就有多少个子目录。它也是一个构造函数&#xff0c;用来指定页面的初始数据、生命周期回调、事件处理函数等。 每个小程序页面一般包含以下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023