《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，一经查实，立即删除！

相关文章

uniapp报错：export { render, staticRenderFns, recyclableRender, components }

uniapp报错：export { render, staticRenderFns, recyclableRender, components }

uniapp vue2项目启动报错 export { render, staticRenderFns, recyclableRender, components }解决办法: 降低prettier的版本 "prettier": "^3.2.4","prettier": "2.8.8",参考 SyntaxError: /xxxx.vue: Unexpected token, expected…
阅读更多...
【数据分享】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查看…
阅读更多...
com.sun.jna.platform.mac.SystemB$Timeval

com.sun.jna.platform.mac.SystemB$Timeval

错误信息 Exception in thread "main" java.lang.NoClassDefFoundError: com/sun/jna/platform/mac/SystemB$Timevalat java.lang.ClassLoader.defineClass1(Native Method)at java.lang.ClassLoader.defineClass(ClassLoader.java:757)at java.security.SecureClas…
阅读更多...
C++笔记（六）

C++笔记（六）

加号运算符重载&#xff1a; 成员函数重载 person operator(person& p) { person temp; temp.m_a this->m_a p.m_a; temp.m_b this->m_b p.m_b; return temp; } 全局函数重载 Person operator(Person& p1, Person& p2) { Person temp; temp.m_A p1.m_A…
阅读更多...
GeoHash编码在日志数据处理中的应用与优化

GeoHash编码在日志数据处理中的应用与优化

目录 需求说明 GeoHash编码 GeoHash编码介绍 GeoHash编码的基本原理 GeoHash的UDF函数
阅读更多...
秀！巧用Python实现对单个文件或多个文件中的指定字符串进行批量（修改）替换

秀！巧用Python实现对单个文件或多个文件中的指定字符串进行批量（修改）替换

目录 1. 对单份文件 1.1 将替换后的内容保存到新文件中 1.2 直接替换当前文件中的字符 2. 对多份文件&#xff08;支持递归子目录&#xff09; 1. 对单份文件 示例&#xff1a;将文件中字符串“address”替换成“device.address” 1.1 将替换后的内容保存到新文件中 实现…
阅读更多...
【备战蓝桥杯】——循环结构

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

&#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中的河流（黄河）和格网数据，如下图所示： 接下来，将查询河流流经过的格网有哪些并…
阅读更多...
thinter聊天小工具

thinter聊天小工具

# 服务端 import queue import re import socket import time import tkinter as tk from threading import Threadclass ChatService():def __init__(self):# 聊天框左上角名称self.title f"马里奇聊天室"self.tk tk.Tk(classNameself.title)# 隐藏窗口# self.tk.…
阅读更多...
社区检测（Community Detection）

社区检测（Community Detection）

如果你想进行社区检测&#xff08;Community Detection&#xff09;&#xff0c;你可以使用 NetworkX 库提供的一些算法。社区检测的目标是将图中的节点划分为若干个社区或群组&#xff0c;使得社区内的节点紧密相连而社区间的连接尽量稀疏。以下是一个使用 Louvain 方法进行社…
阅读更多...
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总线信息的收发、存储、解析及显示功能。测试结…
阅读更多...
图论第二天|695. 岛屿的最大面积 1020. 飞地的数量 130. 被围绕的区域 417. 太平洋大西洋水流问题 827.最大人工岛

图论第二天|695. 岛屿的最大面积 1020. 飞地的数量 130. 被围绕的区域 417. 太平洋大西洋水流问题 827.最大人工岛

目录 Leetcode695. 岛屿的最大面积Leetcode1020. 飞地的数量Leetcode130. 被围绕的区域Leetcode417. 太平洋大西洋水流问题Leetcode827.最大人工岛 Leetcode695. 岛屿的最大面积 文章链接&#xff1a;代码随想录 题目链接&#xff1a;695. 岛屿的最大面积 思路&#xff1a;dfs …
阅读更多...
嘿嘿，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年…
阅读更多...
大模型基础

大模型基础

大模型是什么 大模型是一种由大规模语言模型&#xff0c;由大量神经元组成&#xff0c;可以对输入的文本或者其他的类似视频图片语音等进行预测和生成&#xff0c;以便提供更多的信息给用户。这种模型通常基于深度学习技术和大规模语言模型训练&#xff0c;能够模拟人类的对话…
阅读更多...
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;最后返回修改后的链表头节点地址 如果题目中没有明确…
阅读更多...
最新文章

Copyright @ 2022~2023