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

本文介绍: 表格，这个数据的晚礼服大师，可以把乏味的数字和文字转换成引人注目的信息。记住，表格不仅是展示数据的工具，它们还可以成为你网页上的视觉亮点。在这一节里，我们将变身为信息的时尚搭配师，使用无序和有序列表来给我们的网页内容增添一些秩序和风格。在本节中，我们将学习如何利用一些高级技巧和样式调整，让你的表格从普通走向非凡。有时候，你可能需要在一个列表中同时使用无序和有序列表，比如说，你正在写一篇关于如何烹饪完美意面的博客。通过这个表格，你的客户可以轻松了解到每种产品的价格和库存量，从而做出购买决策。

在这里插入图片描述

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

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

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

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

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

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

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

<!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> 来描述相关的细节。这种混合使用列表的方式可以让你的信息既清晰又详细。

<!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> 用于普通单元格（数据）。这样，一眼望去，就可以清楚地知道每天的课程安排。

<!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>

<!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>

<!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 样式，使得表格拥有了统一的边框、间距和颜色主题，更具可读性和美观性。

<!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" 使得“下午”这个单元格跨越了两行，方便地表示了两个连续的活动都在下午进行。

<!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>