Tech Docs Station

Appearance

列表与表格 ​

本章将介绍HTML中的列表和表格，它们是展示结构化数据的重要方式。

列表 ​

HTML提供了三种类型的列表：无序列表、有序列表和定义列表。

无序列表 ​

无序列表使用 <ul> 标签，列表项使用 <li> 标签，默认显示为实心圆点。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>无序列表示例</title>
</head>
<body>
    <h2>水果列表</h2>
    
    <!-- 基本无序列表 -->
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
        <li>葡萄</li>
    </ul>
    
    <!-- 列表项可以包含其他元素 -->
    <h2>课程列表</h2>
    <ul>
        <li>
            <strong>HTML基础</strong>
            <p>学习HTML的基本标签和文档结构</p>
        </li>
        <li>
            <strong>CSS样式</strong>
            <p>学习CSS选择器和样式规则</p>
        </li>
        <li>
            <strong>JavaScript编程</strong>
            <p>学习JavaScript语法和DOM操作</p>
        </li>
    </ul>
</body>
</html>

列表样式类型 ​

使用CSS的 list-style-type 属性可以改变列表项的标记样式：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表样式示例</title>
    <style>
        .disc { list-style-type: disc; }      /* 实心圆点（默认） */
        .circle { list-style-type: circle; }  /* 空心圆点 */
        .square { list-style-type: square; }  /* 实心方块 */
        .none { list-style-type: none; }      /* 无标记 */
    </style>
</head>
<body>
    <h3>实心圆点（默认）</h3>
    <ul class="disc">
        <li>项目一</li>
        <li>项目二</li>
    </ul>
    
    <h3>空心圆点</h3>
    <ul class="circle">
        <li>项目一</li>
        <li>项目二</li>
    </ul>
    
    <h3>实心方块</h3>
    <ul class="square">
        <li>项目一</li>
        <li>项目二</li>
    </ul>
    
    <h3>无标记</h3>
    <ul class="none">
        <li>项目一</li>
        <li>项目二</li>
    </ul>
</body>
</html>

有序列表 ​

有序列表使用 <ol> 标签，列表项同样使用 <li> 标签，默认显示为数字。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>有序列表示例</title>
</head>
<body>
    <h2>学习步骤</h2>
    
    <!-- 基本有序列表 -->
    <ol>
        <li>学习HTML基础</li>
        <li>学习CSS样式</li>
        <li>学习JavaScript</li>
        <li>学习前端框架</li>
    </ol>
    
    <!-- 列表项可以包含其他元素 -->
    <h2>安装步骤</h2>
    <ol>
        <li>
            <strong>下载软件</strong>
            <p>从官方网站下载最新版本</p>
        </li>
        <li>
            <strong>运行安装程序</strong>
            <p>双击下载的安装文件</p>
        </li>
        <li>
            <strong>完成安装</strong>
            <p>按照提示完成安装过程</p>
        </li>
    </ol>
</body>
</html>

有序列表属性 ​

type 属性 ​

type 属性指定列表项的标记类型：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>有序列表type属性</title>
</head>
<body>
    <!-- 数字编号（默认） -->
    <h3>数字编号（type="1"）</h3>
    <ol type="1">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
    
    <!-- 大写字母 -->
    <h3>大写字母（type="A"）</h3>
    <ol type="A">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
    
    <!-- 小写字母 -->
    <h3>小写字母（type="a"）</h3>
    <ol type="a">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
    
    <!-- 大写罗马数字 -->
    <h3>大写罗马数字（type="I"）</h3>
    <ol type="I">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
    
    <!-- 小写罗马数字 -->
    <h3>小写罗马数字（type="i"）</h3>
    <ol type="i">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
</body>
</html>
start 属性 ​

start 属性指定列表的起始编号：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>start属性示例</title>
</head>
<body>
    <!-- 从5开始编号 -->
    <h3>从5开始编号</h3>
    <ol start="5">
        <li>第五项</li>
        <li>第六项</li>
        <li>第七项</li>
    </ol>
    
    <!-- 从C开始编号 -->
    <h3>从C开始编号</h3>
    <ol type="A" start="3">
        <li>第三项（C）</li>
        <li>第四项（D）</li>
        <li>第五项（E）</li>
    </ol>
</body>
</html>
reversed 属性 ​

reversed 属性使列表倒序排列：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>reversed属性示例</title>
</head>
<body>
    <!-- 倒序列表 -->
    <h3>倒序列表</h3>
    <ol reversed>
        <li>第三项</li>
        <li>第二项</li>
        <li>第一项</li>
    </ol>
</body>
</html>
value 属性 ​

value 属性为单个列表项指定编号：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>value属性示例</title>
</head>
<body>
    <!-- 为单个列表项指定编号 -->
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li value="10">第十项（跳过了3-9）</li>
        <li>第十一项</li>
    </ol>
</body>
</html>

定义列表 ​

定义列表用于展示术语和定义的对应关系，使用 <dl>、<dt> 和 <dd> 标签。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定义列表示例</title>
</head>
<body>
    <h2>HTML术语表</h2>
    
    <!-- 基本定义列表 -->
    <dl>
        <!-- dt：定义术语 -->
        <dt>HTML</dt>
        <!-- dd：定义描述 -->
        <dd>超文本标记语言，用于创建网页的标准标记语言</dd>
        
        <dt>CSS</dt>
        <dd>层叠样式表，用于描述HTML文档的呈现方式</dd>
        
        <dt>JavaScript</dt>
        <dd>一种脚本语言，用于实现网页的交互功能</dd>
    </dl>
    
    <!-- 一个术语可以有多个描述 -->
    <h2>编程语言</h2>
    <dl>
        <dt>Python</dt>
        <dd>一种通用编程语言</dd>
        <dd>以简洁易读著称</dd>
        <dd>广泛应用于数据科学和人工智能</dd>
    </dl>
    
    <!-- 多个术语可以共享一个描述 -->
    <h2>前端技术</h2>
    <dl>
        <dt>HTML</dt>
        <dt>CSS</dt>
        <dt>JavaScript</dt>
        <dd>这三种技术是前端开发的基础</dd>
    </dl>
</body>
</html>

嵌套列表 ​

列表可以相互嵌套，形成多级列表：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>嵌套列表示例</title>
</head>
<body>
    <!-- 无序列表嵌套 -->
    <h2>课程大纲</h2>
    <ul>
        <li>前端开发
            <ul>
                <li>HTML基础</li>
                <li>CSS样式</li>
                <li>JavaScript编程</li>
            </ul>
        </li>
        <li>后端开发
            <ul>
                <li>Java</li>
                <li>Python</li>
                <li>Node.js</li>
            </ul>
        </li>
        <li>数据库
            <ul>
                <li>MySQL</li>
                <li>MongoDB</li>
            </ul>
        </li>
    </ul>
    
    <!-- 有序列表嵌套 -->
    <h2>操作步骤</h2>
    <ol>
        <li>准备工作
            <ol>
                <li>安装开发工具</li>
                <li>配置开发环境</li>
            </ol>
        </li>
        <li>编写代码
            <ol>
                <li>创建HTML文件</li>
                <li>编写页面结构</li>
                <li>添加样式</li>
            </ol>
        </li>
        <li>测试发布
            <ol>
                <li>本地测试</li>
                <li>部署上线</li>
            </ol>
        </li>
    </ol>
    
    <!-- 混合嵌套 -->
    <h2>学习资源</h2>
    <ul>
        <li>在线教程
            <ol>
                <li>MDN Web Docs</li>
                <li>W3Schools</li>
                <li>菜鸟教程</li>
            </ol>
        </li>
        <li>书籍推荐
            <ol>
                <li>《HTML5与CSS3基础教程》</li>
                <li>《JavaScript高级程序设计》</li>
            </ol>
        </li>
    </ul>
</body>
</html>

表格 ​

表格用于展示二维数据，由行和列组成。

基本结构 ​

表格使用 <table> 标签创建，包含以下基本元素：

  • <tr>：表格行（Table Row）
  • <th>：表头单元格（Table Header）
  • <td>：表格数据单元格（Table Data）
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>基本表格示例</title>
    <style>
        /* 添加边框样式，方便查看 */
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
        }
    </style>
</head>
<body>
    <h2>学生成绩表</h2>
    
    <!-- 基本表格结构 -->
    <table>
        <!-- 表头行 -->
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <!-- 数据行 -->
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>85</td>
            <td>88</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>78</td>
            <td>92</td>
            <td>80</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>85</td>
            <td>88</td>
            <td>90</td>
        </tr>
    </table>
</body>
</html>

表格结构标签 ​

为了更好的语义化，可以使用 <thead>、<tbody> 和 <tfoot> 标签：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格结构标签示例</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
        }
        thead {
            background-color: #f0f0f0;
        }
        tfoot {
            background-color: #e0e0e0;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h2>销售报表</h2>
    
    <table>
        <!-- 表头区域 -->
        <thead>
            <tr>
                <th>产品名称</th>
                <th>第一季度</th>
                <th>第二季度</th>
                <th>第三季度</th>
                <th>第四季度</th>
                <th>年度总计</th>
            </tr>
        </thead>
        
        <!-- 表体区域 -->
        <tbody>
            <tr>
                <td>产品A</td>
                <td>100</td>
                <td>120</td>
                <td>110</td>
                <td>130</td>
                <td>460</td>
            </tr>
            <tr>
                <td>产品B</td>
                <td>80</td>
                <td>90</td>
                <td>95</td>
                <td>85</td>
                <td>350</td>
            </tr>
            <tr>
                <td>产品C</td>
                <td>60</td>
                <td>70</td>
                <td>75</td>
                <td>80</td>
                <td>285</td>
            </tr>
        </tbody>
        
        <!-- 表尾区域 -->
        <tfoot>
            <tr>
                <td>合计</td>
                <td>240</td>
                <td>280</td>
                <td>280</td>
                <td>295</td>
                <td>1095</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

表格标题 ​

<caption> 标签用于为表格添加标题：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格标题示例</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
        }
        caption {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <table>
        <!-- 表格标题 -->
        <caption>2024年员工信息表</caption>
        
        <thead>
            <tr>
                <th>工号</th>
                <th>姓名</th>
                <th>部门</th>
                <th>职位</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>E001</td>
                <td>张三</td>
                <td>技术部</td>
                <td>工程师</td>
            </tr>
            <tr>
                <td>E002</td>
                <td>李四</td>
                <td>市场部</td>
                <td>经理</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

单元格合并 ​

跨列合并（colspan） ​

colspan 属性使单元格横跨多列：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>跨列合并示例</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>课程安排表</h2>
    
    <table>
        <tr>
            <!-- colspan="2" 表示横跨2列 -->
            <th colspan="2">上午</th>
            <th colspan="2">下午</th>
        </tr>
        <tr>
            <th>第一节</th>
            <th>第二节</th>
            <th>第三节</th>
            <th>第四节</th>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>体育</td>
        </tr>
        <tr>
            <!-- 横跨所有4列 -->
            <td colspan="4" style="background-color: #f0f0f0;">午休时间</td>
        </tr>
    </table>
</body>
</html>

跨行合并（rowspan） ​

rowspan 属性使单元格横跨多行：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>跨行合并示例</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>值班表</h2>
    
    <table>
        <tr>
            <th>日期</th>
            <th>时段</th>
            <th>值班人员</th>
        </tr>
        <tr>
            <!-- rowspan="2" 表示横跨2行 -->
            <td rowspan="2">周一</td>
            <td>上午</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>李四</td>
        </tr>
        <tr>
            <td rowspan="2">周二</td>
            <td>上午</td>
            <td>王五</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>赵六</td>
        </tr>
    </table>
</body>
</html>

混合合并 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>混合合并示例</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>复杂表格示例</h2>
    
    <table>
        <tr>
            <th colspan="3">季度销售报表</th>
        </tr>
        <tr>
            <th rowspan="2">产品</th>
            <th colspan="2">销售额</th>
        </tr>
        <tr>
            <th>线上</th>
            <th>线下</th>
        </tr>
        <tr>
            <td>产品A</td>
            <td>100万</td>
            <td>80万</td>
        </tr>
        <tr>
            <td>产品B</td>
            <td>90万</td>
            <td>70万</td>
        </tr>
        <tr>
            <td>合计</td>
            <td colspan="2">340万</td>
        </tr>
    </table>
</body>
</html>

表格属性 ​

边框和间距 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格属性示例</title>
</head>
<body>
    <!-- 使用HTML属性设置边框（不推荐，建议用CSS） -->
    <table border="1" cellpadding="10" cellspacing="0">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
    </table>
    
    <br>
    
    <!-- 使用CSS设置样式（推荐） -->
    <table style="border: 1px solid black; border-collapse: collapse;">
        <tr>
            <th style="border: 1px solid black; padding: 10px;">姓名</th>
            <th style="border: 1px solid black; padding: 10px;">年龄</th>
        </tr>
        <tr>
            <td style="border: 1px solid black; padding: 10px;">张三</td>
            <td style="border: 1px solid black; padding: 10px;">25</td>
        </tr>
    </table>
</body>
</html>

对齐方式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表格对齐示例</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 10px;
        }
        table {
            width: 100%;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <!-- 水平对齐 -->
            <th style="text-align: left;">左对齐</th>
            <th style="text-align: center;">居中</th>
            <th style="text-align: right;">右对齐</th>
        </tr>
        <tr>
            <!-- 垂直对齐 -->
            <td style="vertical-align: top; height: 100px;">顶部对齐</td>
            <td style="vertical-align: middle;">居中对齐</td>
            <td style="vertical-align: bottom;">底部对齐</td>
        </tr>
    </table>
</body>
</html>

表格分组列 ​

<colgroup> 和 <col> 标签用于对表格列进行分组和设置样式：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列分组示例</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 10px;
        }
    </style>
</head>
<body>
    <table>
        <!-- 列分组 -->
        <colgroup>
            <!-- 第一列样式 -->
            <col style="background-color: #f0f0f0;">
            <!-- 第二列和第三列相同样式 -->
            <col span="2" style="background-color: #e0e0e0;">
            <!-- 第四列样式 -->
            <col style="background-color: #d0d0d0;">
        </colgroup>
        
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>85</td>
            <td>88</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>78</td>
            <td>92</td>
            <td>80</td>
        </tr>
    </table>
</body>
</html>

综合示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表与表格综合示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
        caption {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
        }
        ul, ol {
            line-height: 1.8;
        }
    </style>
</head>
<body>
    <h1>前端开发学习指南</h1>
    
    <!-- 课程大纲（嵌套列表） -->
    <h2>课程大纲</h2>
    <ol>
        <li>HTML基础
            <ul>
                <li>HTML文档结构</li>
                <li>常用标签</li>
                <li>表单和表格</li>
            </ul>
        </li>
        <li>CSS样式
            <ul>
                <li>选择器</li>
                <li>盒模型</li>
                <li>布局技术</li>
            </ul>
        </li>
        <li>JavaScript
            <ul>
                <li>基础语法</li>
                <li>DOM操作</li>
                <li>事件处理</li>
            </ul>
        </li>
    </ol>
    
    <!-- 学习资源（定义列表） -->
    <h2>学习资源</h2>
    <dl>
        <dt>MDN Web Docs</dt>
        <dd>Mozilla维护的Web技术文档，权威且全面</dd>
        
        <dt>W3Schools</dt>
        <dd>简单易懂的在线教程网站</dd>
        
        <dt>菜鸟教程</dt>
        <dd>中文技术教程网站，适合初学者</dd>
    </dl>
    
    <!-- 学习计划表（表格） -->
    <h2>学习计划表</h2>
    <table>
        <caption>12周学习计划</caption>
        <thead>
            <tr>
                <th>周次</th>
                <th>学习内容</th>
                <th>学习目标</th>
                <th>预计时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">第1-2周</td>
                <td>HTML基础</td>
                <td>掌握HTML文档结构和常用标签</td>
                <td>10小时</td>
            </tr>
            <tr>
                <td>HTML表单和表格</td>
                <td>学会创建表单和表格</td>
                <td>8小时</td>
            </tr>
            <tr>
                <td rowspan="2">第3-4周</td>
                <td>CSS基础</td>
                <td>掌握CSS选择器和基本样式</td>
                <td>12小时</td>
            </tr>
            <tr>
                <td>CSS布局</td>
                <td>学会Flexbox和Grid布局</td>
                <td>10小时</td>
            </tr>
            <tr>
                <td>第5-8周</td>
                <td>JavaScript基础</td>
                <td>掌握JavaScript语法和DOM操作</td>
                <td>20小时</td>
            </tr>
            <tr>
                <td>第9-12周</td>
                <td>实战项目</td>
                <td>完成一个完整的网页项目</td>
                <td>20小时</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">总计学习时间</td>
                <td>80小时</td>
            </tr>
        </tfoot>
    </table>
    
    <!-- 技能对照表 -->
    <h2>技能等级对照表</h2>
    <table>
        <colgroup>
            <col style="background-color: #f9f9f9;">
            <col span="2" style="background-color: #fff;">
        </colgroup>
        <thead>
            <tr>
                <th>技能</th>
                <th>初级</th>
                <th>中级</th>
                <th>高级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>HTML</td>
                <td>了解基本标签</td>
                <td>熟练使用语义化标签</td>
                <td>精通HTML5新特性</td>
            </tr>
            <tr>
                <td>CSS</td>
                <td>会写基本样式</td>
                <td>掌握布局技术</td>
                <td>精通动画和响应式</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>了解基本语法</td>
                <td>能操作DOM</td>
                <td>精通框架和工程化</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

本章小结 ​

本章我们学习了：

  1. 无序列表：使用 <ul> 和 <li> 创建无序列表
  2. 有序列表：使用 <ol> 和 <li> 创建有序列表，支持 type、start、reversed 属性
  3. 定义列表：使用 <dl>、<dt>、<dd> 创建术语定义列表
  4. 嵌套列表：列表可以相互嵌套形成多级结构
  5. 表格结构：<table>、<tr>、<th>、<td> 创建表格
  6. 表格分组：<thead>、<tbody>、<tfoot>、<caption>
  7. 单元格合并：colspan 跨列，rowspan 跨行

下一章 ​

下一章我们将学习 表单，了解如何创建用户交互表单。