《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>
这里， （列表项）则是你的购物清单上的一个项目。
3.1.2 案例扩展一：创建一个旅行计划清单
现在，假设你正在规划一次旅行，想要列出你需要按顺序做的事情。有序列表在这里就派上用场了。
DOCTYPE html>
<html>
<head>
<title>我的旅行计划title>
head>
<body>
<h2>旅行前需要做的事情h2>
<ol>
<li>预定机票li>
<li>预订酒店li>
<li>打包行李li>
ol>
body>
html>
在这个例子中， 则是旅行准备过程中的一个步骤。
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>
在这个例子中，我们使用了一个有序列表
通过这些案例，你现在应该已经成为一个无序和有序列表的使用高手了！记住，列表不仅仅是让事情变得有条理，它们还可以给你的网页增加可读性和吸引力。现在就去试试，用列表给你的网页内容增添一些组织和风格吧！
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:00td>
<td>数学td>
<td>物理td>
<td>化学td>
<td>英语td>
<td>体育td>
tr>
table>
body>
html>
在这个例子中， 接下来，让我们试着为即将到来的生日派对创建一个邀请名单表格。这个表格可以帮助你追踪谁已经确认参加。 这个表格不仅列出了被邀请的人员名单，还包括了他们是否确认参加以及相关的备注。 最后，假设你正在运营一家小店，需要创建一个产品价格表来展示给你的客户。 通过这个表格，你的客户可以轻松了解到每种产品的价格和库存量，从而做出购买决策。 通过这些案例，你已经掌握了基础表格的构建技巧。记住，表格不仅是展示数据的工具，它们还可以成为你网页上的视觉亮点。现在，就让我们用表格将那些平淡的信息变得生动起来吧！ 表格不只是数据的展示架，它们还可以变身为精致的艺术品！在本节中，我们将学习如何利用一些高级技巧和样式调整，让你的表格从普通走向非凡。 首先，我们来给一个基础表格添加一些颜色和边框样式，使其更加吸引人。 在这个例子中，我们通过 是创建表格的核心元素。
代表表格的一行， 用于表头（标题），而 用于普通单元格（数据）。这样，一眼望去，就可以清楚地知道每天的课程安排。
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:00td>
<td>数学td>
<td>物理td>
<td>化学td>
<td>英语td>
<td>体育td>
tr>
table>
body>
html>