列表和表格是HTML中重要的数据组织方式，它们能让信息更有条理、更易读。

本文将详细介绍无序列表、有序列表、定义列表以及表格的使用方法和最佳实践。

一、列表基础

1.1 无序列表 <ul>

无序列表用于表示项目顺序不重要的列表。

<!-- 基础无序列表 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<!-- 导航菜单 -->
<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
</nav>

<!-- 功能特性列表 -->
<ul>
  <li>响应式设计</li>
  <li>高性能</li>
  <li>易于维护</li>
  <li>跨浏览器兼容</li>
</ul>

特点：

• 默认使用实心圆点标记
• 可通过CSS的 list-style-type 改变标记样式
• 项目顺序不影响含义

1.2 有序列表 <ol>

有序列表用于表示项目有明确顺序的列表。

<!-- 基础有序列表 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

<!-- 操作步骤 -->
<h3>安装步骤</h3>
<ol>
  <li>下载安装包</li>
  <li>解压文件</li>
  <li>运行安装程序</li>
  <li>完成配置</li>
</ol>

<!-- 排名列表 -->
<h3>销量排行榜</h3>
<ol>
  <li>产品A - 1000件</li>
  <li>产品B - 850件</li>
  <li>产品C - 720件</li>
</ol>

特点：

• 默认使用数字标记（1, 2, 3...）
• 顺序有意义
• 可自定义起始编号

1.3 <ol> 属性

type - 标记类型

<!-- 数字（默认） -->
<ol type="1">
  <li>项目一</li>
  <li>项目二</li>
</ol>

<!-- 大写字母 -->
<ol type="A">
  <li>项目A</li>
  <li>项目B</li>
</ol>

<!-- 小写字母 -->
<ol type="a">
  <li>项目a</li>
  <li>项目b</li>
</ol>

<!-- 大写罗马数字 -->
<ol type="I">
  <li>项目I</li>
  <li>项目II</li>
</ol>

<!-- 小写罗马数字 -->
<ol type="i">
  <li>项目i</li>
  <li>项目ii</li>
</ol>

start - 起始编号

<!-- 从5开始 -->
<ol start="5">
  <li>第五项</li>
  <li>第六项</li>
  <li>第七项</li>
</ol>

<!-- 从10开始的字母列表 -->
<ol type="A" start="10">
  <li>项目J</li>
  <li>项目K</li>
</ol>

reversed - 倒序

<!-- 倒计时列表 -->
<h3>倒计时</h3>
<ol reversed>
  <li>第三名</li>
  <li>第二名</li>
  <li>第一名</li>
</ol>

1.4 列表项属性

value - 指定编号

<ol>
  <li>正常编号 1</li>
  <li>正常编号 2</li>
  <li value="10">跳到 10</li>
  <li>继续 11</li>
  <li>继续 12</li>
</ol>

<!-- 章节编号 -->
<ol>
  <li value="1">第一章</li>
  <li value="2">第二章</li>
  <li value="5">第五章（跳过3、4章）</li>
</ol>

1.5 嵌套列表

<!-- 多层列表 -->
<ul>
  <li>水果
    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ul>
  </li>
  <li>蔬菜
    <ul>
      <li>白菜</li>
      <li>萝卜</li>
    </ul>
  </li>
</ul>

<!-- 混合嵌套 -->
<ol>
  <li>准备工作
    <ul>
      <li>工具A</li>
      <li>工具B</li>
    </ul>
  </li>
  <li>执行步骤
    <ol type="a">
      <li>第一步</li>
      <li>第二步</li>
    </ol>
  </li>
  <li>完成验证</li>
</ol>

<!-- 目录结构 -->
<ul>
  <li>src/
    <ul>
      <li>components/
        <ul>
          <li>Header.vue</li>
          <li>Footer.vue</li>
        </ul>
      </li>
      <li>views/
        <ul>
          <li>Home.vue</li>
          <li>About.vue</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>public/</li>
  <li>package.json</li>
</ul>

二、定义列表

2.1 <dl> - 定义列表

定义列表用于展示术语及其定义，或键值对数据。

<!-- 术语定义 -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language，超文本标记语言</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets，层叠样式表</dd>
  
  <dt>JavaScript</dt>
  <dd>一种高级的、解释型的编程语言</dd>
</dl>

<!-- 一个术语多个定义 -->
<dl>
  <dt>Firefox</dt>
  <dd>Mozilla基金会开发的网页浏览器</dd>
  <dd>红熊猫的另一个名称</dd>
</dl>

<!-- 一个定义对应多个术语 -->
<dl>
  <dt>HTTP</dt>
  <dt>HTTPS</dt>
  <dd>网络传输协议</dd>
</dl>

结构：

• <dl> - 定义列表容器
• <dt> - 定义术语（term）
• <dd> - 定义描述（description）

2.2 实际应用场景

<!-- 产品规格 -->
<h3>产品规格</h3>
<dl>
  <dt>屏幕尺寸</dt>
  <dd>6.7英寸</dd>
  
  <dt>处理器</dt>
  <dd>A17 Pro芯片</dd>
  
  <dt>内存</dt>
  <dd>8GB RAM</dd>
  
  <dt>存储</dt>
  <dd>256GB / 512GB / 1TB</dd>
  
  <dt>电池</dt>
  <dd>4500mAh</dd>
</dl>

<!-- FAQ -->
<h3>常见问题</h3>
<dl>
  <dt>如何重置密码？</dt>
  <dd>
    点击登录页面的"忘记密码"链接，
    按照提示操作即可重置密码。
  </dd>
  
  <dt>支持哪些支付方式？</dt>
  <dd>
    我们支持支付宝、微信支付、银行卡等多种支付方式。
  </dd>
</dl>

<!-- 元数据 -->
<article>
  <h2>文章标题</h2>
  <dl>
    <dt>作者</dt>
    <dd>张三</dd>
    
    <dt>发布日期</dt>
    <dd><time datetime="2024-01-15">2024年1月15日</time></dd>
    
    <dt>分类</dt>
    <dd><a href="#">前端开发</a></dd>
    
    <dt>标签</dt>
    <dd>
      <a href="#">HTML</a>
      <a href="#">教程</a>
    </dd>
  </dl>
  <p>文章内容...</p>
</article>

2.3 嵌套定义列表

<dl>
  <dt>前端技术</dt>
  <dd>
    <dl>
      <dt>HTML</dt>
      <dd>结构层</dd>
      
      <dt>CSS</dt>
      <dd>表现层</dd>
      
      <dt>JavaScript</dt>
      <dd>行为层</dd>
    </dl>
  </dd>
  
  <dt>后端技术</dt>
  <dd>
    <dl>
      <dt>Node.js</dt>
      <dd>JavaScript运行时</dd>
      
      <dt>Python</dt>
      <dd>通用编程语言</dd>
    </dl>
  </dd>
</dl>

三、表格基础

3.1 基本表格结构

<!-- 最简单的表格 -->
<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

<!-- 带表头的表格 -->
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

基本元素：

• <table> - 表格容器
• <tr> - 表格行（table row）
• <th> - 表头单元格（table header）
• <td> - 数据单元格（table data）

3.2 完整表格结构

<table>
  <!-- 表格标题 -->
  <caption>2024年第一季度销售数据</caption>
  
  <!-- 表头 -->
  <thead>
    <tr>
      <th>月份</th>
      <th>销售额</th>
      <th>增长率</th>
    </tr>
  </thead>
  
  <!-- 表格主体 -->
  <tbody>
    <tr>
      <td>1月</td>
      <td>¥100,000</td>
      <td>+5%</td>
    </tr>
    <tr>
      <td>2月</td>
      <td>¥120,000</td>
      <td>+8%</td>
    </tr>
    <tr>
      <td>3月</td>
      <td>¥150,000</td>
      <td>+12%</td>
    </tr>
  </tbody>
  
  <!-- 表脚 -->
  <tfoot>
    <tr>
      <th>总计</th>
      <td>¥370,000</td>
      <td>+8.3%</td>
    </tr>
  </tfoot>
</table>

结构元素：

• <caption> - 表格标题
• <thead> - 表头区域
• <tbody> - 表格主体
• <tfoot> - 表脚区域

3.3 单元格合并

跨列合并 colspan

<table>
  <tr>
    <th colspan="3">个人信息</th>
  </tr>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
</table>

<!-- 复杂合并 -->
<table>
  <tr>
    <th>科目</th>
    <th colspan="2">成绩</th>
  </tr>
  <tr>
    <th></th>
    <th>期中</th>
    <th>期末</th>
  </tr>
  <tr>
    <td>数学</td>
    <td>85</td>
    <td>90</td>
  </tr>
</table>

跨行合并 rowspan

<table>
  <tr>
    <th>姓名</th>
    <td>张三</td>
  </tr>
  <tr>
    <th rowspan="2">联系方式</th>
    <td>邮箱：zhang@example.com</td>
  </tr>
  <tr>
    <td>电话：123-456-7890</td>
  </tr>
</table>

<!-- 课程表示例 -->
<table>
  <tr>
    <th>时间</th>
    <th>周一</th>
    <th>周二</th>
  </tr>
  <tr>
    <th>9:00-10:00</th>
    <td>数学</td>
    <td rowspan="2">物理实验</td>
  </tr>
  <tr>
    <th>10:00-11:00</th>
    <td>英语</td>
  </tr>
</table>

同时跨行跨列

<table>
  <tr>
    <th rowspan="2" colspan="2">综合信息</th>
    <th>Q1</th>
    <th>Q2</th>
  </tr>
  <tr>
    <td>100</td>
    <td>120</td>
  </tr>
  <tr>
    <th>区域</th>
    <th>产品</th>
    <td>150</td>
    <td>180</td>
  </tr>
</table>

3.4 表格列定义

<col> 和 <colgroup>

<!-- 为列添加样式 -->
<table>
  <colgroup>
    <col style="background-color: #f0f0f0;">
    <col style="background-color: #e0e0e0;">
    <col style="background-color: #f0f0f0;">
  </colgroup>
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
    <td>数据3</td>
  </tr>
</table>

<!-- 列分组 -->
<table>
  <colgroup>
    <col>
    <col span="2" style="background-color: #ffe0e0;">
    <col span="2" style="background-color: #e0f0ff;">
  </colgroup>
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>英语</th>
    <th>物理</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>85</td>
    <td>90</td>
    <td>88</td>
    <td>92</td>
  </tr>
</table>

3.5 表格可访问性

scope 属性

<table>
  <tr>
    <th scope="col">产品</th>
    <th scope="col">价格</th>
    <th scope="col">库存</th>
  </tr>
  <tr>
    <th scope="row">产品A</th>
    <td>¥99</td>
    <td>100</td>
  </tr>
  <tr>
    <th scope="row">产品B</th>
    <td>¥199</td>
    <td>50</td>
  </tr>
</table>

• scope="col" - 列表头
• scope="row" - 行表头
• scope="colgroup" - 列组表头
• scope="rowgroup" - 行组表头

headers 属性

<table>
  <tr>
    <th id="name">姓名</th>
    <th id="math">数学</th>
    <th id="english">英语</th>
  </tr>
  <tr>
    <td headers="name">张三</td>
    <td headers="math">85</td>
    <td headers="english">90</td>
  </tr>
</table>

<!-- 复杂表格 -->
<table>
  <tr>
    <th id="subject" colspan="2">科目</th>
    <th id="score">成绩</th>
  </tr>
  <tr>
    <th id="science" rowspan="2">理科</th>
    <th id="math">数学</th>
    <td headers="subject science math score">85</td>
  </tr>
  <tr>
    <th id="physics">物理</th>
    <td headers="subject science physics score">90</td>
  </tr>
</table>

四、列表应用场景

<html>
  <div class="list-demo-p3q4r">
    <!-- 导航菜单 -->
    <section class="nav-section-p3q4r">
      <h3>导航菜单</h3>
      <nav class="horizontal-nav-p3q4r">
        <ul>
          <li><a href="#" class="active-p3q4r">首页</a></li>
          <li><a href="#">产品</a></li>
          <li><a href="#">关于</a></li>
          <li><a href="#">联系</a></li>
        </ul>
      </nav>
      
      <nav class="dropdown-nav-p3q4r">
        <ul>
          <li><a href="#">首页</a></li>
          <li class="has-submenu-p3q4r">
            <a href="#">产品</a>
            <ul class="submenu-p3q4r">
              <li><a href="#">产品A</a></li>
              <li><a href="#">产品B</a></li>
              <li><a href="#">产品C</a></li>
            </ul>
          </li>
          <li><a href="#">关于</a></li>
        </ul>
      </nav>
    </section>
    
    <!-- 面包屑导航 -->
    <section class="breadcrumb-section-p3q4r">
      <h3>面包屑导航</h3>
      <nav aria-label="面包屑" class="breadcrumb-p3q4r">
        <ol>
          <li><a href="#">首页</a></li>
          <li><a href="#">分类</a></li>
          <li><a href="#">子分类</a></li>
          <li aria-current="page">当前页面</li>
        </ol>
      </nav>
    </section>
    
    <!-- 特性列表 -->
    <section class="features-section-p3q4r">
      <h3>产品特性</h3>
      <ul class="features-list-p3q4r">
        <li>
          <span class="icon-p3q4r">⚡</span>
          <div>
            <strong>高性能</strong>
            <p>采用最新技术，运行速度提升50%</p>
          </div>
        </li>
        <li>
          <span class="icon-p3q4r">🎨</span>
          <div>
            <strong>易用性</strong>
            <p>直观的用户界面，快速上手</p>
          </div>
        </li>
        <li>
          <span class="icon-p3q4r">🔒</span>
          <div>
            <strong>安全可靠</strong>
            <p>企业级安全保护，数据加密存储</p>
          </div>
        </li>
      </ul>
    </section>
    
    <!-- 步骤指南 -->
    <section class="steps-section-p3q4r">
      <h3>注册流程</h3>
      <ol class="steps-list-p3q4r">
        <li>
          <h4>填写基本信息</h4>
          <p>输入用户名、邮箱和密码</p>
        </li>
        <li>
          <h4>邮箱验证</h4>
          <p>点击邮件中的验证链接</p>
        </li>
        <li>
          <h4>完善个人资料</h4>
          <p>添加头像和个人简介</p>
        </li>
        <li>
          <h4>开始使用</h4>
          <p>探索平台功能</p>
        </li>
      </ol>
    </section>
  </div>
</html>
<style>
  .list-demo-p3q4r {
    padding: 1rem;
    background: #f8f9fa;
  }
  
  .list-demo-p3q4r > section {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .list-demo-p3q4r h3 {
    margin: 0 0 1rem 0;
    color: #333;
    font-size: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #667eea;
  }
  
  /* 导航菜单 */
  .horizontal-nav-p3q4r {
    margin-bottom: 1.5rem;
  }
  
  .horizontal-nav-p3q4r ul {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 0.5rem;
  }
  
  .horizontal-nav-p3q4r li {
    flex: 1;
  }
  
  .horizontal-nav-p3q4r a {
    display: block;
    padding: 0.75rem 1rem;
    text-align: center;
    text-decoration: none;
    color: #555;
    border-radius: 4px;
    transition: all 0.3s;
    font-weight: 500;
  }
  
  .horizontal-nav-p3q4r a:hover {
    background: #e0e0e0;
    color: #667eea;
  }
  
  .horizontal-nav-p3q4r a.active-p3q4r {
    background: #667eea;
    color: white;
  }
  
  /* 下拉菜单 */
  .dropdown-nav-p3q4r > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    background: #667eea;
    border-radius: 6px;
    padding: 0.5rem;
  }
  
  .dropdown-nav-p3q4r > ul > li {
    position: relative;
  }
  
  .dropdown-nav-p3q4r > ul > li > a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
  }
  
  .dropdown-nav-p3q4r > ul > li > a:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  
  .submenu-p3q4r {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 0.25rem;
    min-width: 150px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0.5rem 0;
  }
  
  .has-submenu-p3q4r:hover .submenu-p3q4r {
    display: block;
  }
  
  .submenu-p3q4r li {
    margin: 0;
  }
  
  .submenu-p3q4r a {
    display: block;
    padding: 0.5rem 1rem;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
  }
  
  .submenu-p3q4r a:hover {
    background: #f0f0f0;
  }
  
  /* 面包屑导航 */
  .breadcrumb-p3q4r ol {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.9rem;
  }
  
  .breadcrumb-p3q4r li:not(:last-child)::after {
    content: "→";
    margin-left: 0.5rem;
    color: #999;
  }
  
  .breadcrumb-p3q4r a {
    color: #667eea;
    text-decoration: none;
  }
  
  .breadcrumb-p3q4r a:hover {
    text-decoration: underline;
  }
  
  .breadcrumb-p3q4r li[aria-current="page"] {
    color: #666;
    font-weight: 500;
  }
  
  /* 特性列表 */
  .features-list-p3q4r {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
  }
  
  .features-list-p3q4r li {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #667eea;
    transition: transform 0.3s;
  }
  
  .features-list-p3q4r li:hover {
    transform: translateX(4px);
  }
  
  .icon-p3q4r {
    font-size: 2rem;
    flex-shrink: 0;
  }
  
  .features-list-p3q4r strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #333;
    font-size: 1.1rem;
  }
  
  .features-list-p3q4r p {
    margin: 0;
    color: #666;
    line-height: 1.5;
  }
  
  /* 步骤列表 */
  .steps-list-p3q4r {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step-counter;
  }
  
  .steps-list-p3q4r li {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 4rem;
    margin-bottom: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    counter-increment: step-counter;
  }
  
  .steps-list-p3q4r li:last-child {
    margin-bottom: 0;
  }
  
  .steps-list-p3q4r li::before {
    content: counter(step-counter);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
  }
  
  .steps-list-p3q4r h4 {
    margin: 0 0 0.5rem 0;
    color: #333;
    font-size: 1.1rem;
  }
  
  .steps-list-p3q4r p {
    margin: 0;
    color: #666;
    line-height: 1.5;
  }
  
  @media (max-width: 768px) {
    .horizontal-nav-p3q4r ul {
      flex-direction: column;
    }
    
    .dropdown-nav-p3q4r > ul {
      flex-direction: column;
    }
    
    .submenu-p3q4r {
      position: static;
      display: none;
      margin-top: 0.5rem;
    }
    
    .has-submenu-p3q4r:hover .submenu-p3q4r {
      display: block;
    }
  }
</style>

五、表格应用场景

<html>
  <div class="table-demo-s5t6u">
    <!-- 产品对比表 -->
    <section class="comparison-section-s5t6u">
      <h3>产品规格对比</h3>
      <div class="table-wrapper-s5t6u">
        <table class="comparison-table-s5t6u">
          <caption>选择最适合您的版本</caption>
          <thead>
            <tr>
              <th>特性</th>
              <th>基础版</th>
              <th class="highlight-s5t6u">专业版</th>
              <th>企业版</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">存储空间</th>
              <td>10GB</td>
              <td class="highlight-s5t6u">100GB</td>
              <td>无限</td>
            </tr>
            <tr>
              <th scope="row">用户数</th>
              <td>1</td>
              <td class="highlight-s5t6u">5</td>
              <td>无限</td>
            </tr>
            <tr>
              <th scope="row">技术支持</th>
              <td>邮件</td>
              <td class="highlight-s5t6u">邮件+电话</td>
              <td>7x24小时</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <th scope="row">价格</th>
              <td><strong>免费</strong></td>
              <td class="highlight-s5t6u"><strong>¥99/月</strong></td>
              <td><strong>¥999/月</strong></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </section>
    
    <!-- 课程表 -->
    <section class="schedule-section-s5t6u">
      <h3>课程安排表</h3>
      <div class="table-wrapper-s5t6u">
        <table class="schedule-table-s5t6u">
          <caption>本周课程安排</caption>
          <thead>
            <tr>
              <th>时间</th>
              <th>周一</th>
              <th>周二</th>
              <th>周三</th>
              <th>周四</th>
              <th>周五</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">8:00-9:00</th>
              <td>数学</td>
              <td>语文</td>
              <td>英语</td>
              <td>物理</td>
              <td>化学</td>
            </tr>
            <tr>
              <th scope="row">9:00-10:00</th>
              <td>英语</td>
              <td>数学</td>
              <td>物理</td>
              <td>化学</td>
              <td>语文</td>
            </tr>
            <tr>
              <th scope="row">10:00-11:00</th>
              <td colspan="5" class="break-s5t6u">课间休息</td>
            </tr>
            <tr>
              <th scope="row">11:00-12:00</th>
              <td>体育</td>
              <td>音乐</td>
              <td>美术</td>
              <td>历史</td>
              <td>地理</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
    
    <!-- 财务报表 -->
    <section class="finance-section-s5t6u">
      <h3>2024年Q1财务报表</h3>
      <div class="table-wrapper-s5t6u">
        <table class="finance-table-s5t6u">
          <caption>财务数据汇总</caption>
          <thead>
            <tr>
              <th>项目</th>
              <th>1月</th>
              <th>2月</th>
              <th>3月</th>
              <th>合计</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">收入</th>
              <td>¥100,000</td>
              <td>¥120,000</td>
              <td>¥150,000</td>
              <td class="total-s5t6u">¥370,000</td>
            </tr>
            <tr>
              <th scope="row">支出</th>
              <td>¥60,000</td>
              <td>¥70,000</td>
              <td>¥80,000</td>
              <td class="total-s5t6u">¥210,000</td>
            </tr>
          </tbody>
          <tfoot>
            <tr class="profit-row-s5t6u">
              <th scope="row">净利润</th>
              <td>¥40,000</td>
              <td>¥50,000</td>
              <td>¥70,000</td>
              <td class="final-total-s5t6u"><strong>¥160,000</strong></td>
            </tr>
          </tfoot>
        </table>
      </div>
    </section>
  </div>
</html>
<style>
  .table-demo-s5t6u {
    padding: 1rem;
    background: #f8f9fa;
  }
  
  .table-demo-s5t6u > section {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .table-demo-s5t6u h3 {
    margin: 0 0 1rem 0;
    color: #333;
    font-size: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #667eea;
  }
  
  .table-wrapper-s5t6u {
    overflow-x: auto;
  }
  
  /* 表格通用样式 */
  .table-demo-s5t6u table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
  }
  
  .table-demo-s5t6u caption {
    caption-side: top;
    padding: 0.75rem;
    font-weight: 600;
    color: #555;
    text-align: left;
  }
  
  .table-demo-s5t6u th,
  .table-demo-s5t6u td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid #dee2e6;
  }
  
  .table-demo-s5t6u thead th {
    background: #667eea;
    color: white;
    font-weight: 600;
    text-align: center;
  }
  
  .table-demo-s5t6u tbody th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
  }
  
  .table-demo-s5t6u tbody td {
    text-align: center;
  }
  
  .table-demo-s5t6u tbody tr:hover {
    background: #f1f3f5;
  }
  
  /* 产品对比表 */
  .comparison-table-s5t6u .highlight-s5t6u {
    background: #e7f5ff !important;
    border-left: 3px solid #667eea;
    border-right: 3px solid #667eea;
  }
  
  .comparison-table-s5t6u thead .highlight-s5t6u {
    background: #5a67d8 !important;
    position: relative;
  }
  
  .comparison-table-s5t6u thead .highlight-s5t6u::after {
    content: "🔥 推荐";
    position: absolute;
    top: -0.5rem;
    right: 0.5rem;
    background: #ffc107;
    color: #333;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
  }
  
  .comparison-table-s5t6u tfoot {
    background: #f8f9fa;
  }
  
  .comparison-table-s5t6u tfoot td {
    font-size: 1.1rem;
  }
  
  /* 课程表 */
  .schedule-table-s5t6u thead th {
    background: #28a745;
  }
  
  .schedule-table-s5t6u .break-s5t6u {
    background: #fff3cd !important;
    color: #856404;
    font-weight: 600;
    text-align: center;
  }
  
  /* 财务报表 */
  .finance-table-s5t6u thead th {
    background: #17a2b8;
  }
  
  .finance-table-s5t6u .total-s5t6u {
    background: #e7f5ff;
    font-weight: 600;
    color: #0056b3;
  }
  
  .profit-row-s5t6u {
    background: #d4edda !important;
  }
  
  .profit-row-s5t6u th {
    background: #28a745 !important;
    color: white !important;
  }
  
  .final-total-s5t6u {
    background: #28a745 !important;
    color: white !important;
    font-size: 1.2rem;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .table-demo-s5t6u th,
    .table-demo-s5t6u td {
      padding: 0.5rem;
      font-size: 0.85rem;
    }
    
    .table-wrapper-s5t6u {
      overflow-x: scroll;
    }
    
    .comparison-table-s5t6u thead .highlight-s5t6u::after {
      display: none;
    }
  }
</style>

六、最佳实践

6.1 列表使用原则

<!-- ✅ 正确：顺序重要时用 ol -->
<h3>安装步骤</h3>
<ol>
  <li>下载</li>
  <li>安装</li>
  <li>配置</li>
</ol>

<!-- ✅ 正确：顺序不重要用 ul -->
<h3>产品特性</h3>
<ul>
  <li>高性能</li>
  <li>易用</li>
  <li>安全</li>
</ul>

<!-- ✅ 正确：键值对用 dl -->
<h3>产品参数</h3>
<dl>
  <dt>尺寸</dt>
  <dd>6.7英寸</dd>
  <dt>重量</dt>
  <dd>200g</dd>
</dl>

<!-- ❌ 错误：不要用列表纯粹为了缩进 -->
<ul>
  <li>这不是列表项，只是想要缩进</li>
</ul>

6.2 表格使用原则

何时使用表格：

• 展示二维数据
• 数据对比
• 统计报表
• 课程表、时刻表等

何时不用表格：

<!-- ❌ 错误：用表格布局 -->
<table>
  <tr>
    <td>导航</td>
    <td>内容</td>
    <td>侧边栏</td>
  </tr>
</table>

<!-- ✅ 正确：用CSS布局 -->
<div class="layout">
  <nav>导航</nav>
  <main>内容</main>
  <aside>侧边栏</aside>
</div>

6.3 保持语义化

<!-- ✅ 正确：完整结构 -->
<table>
  <caption>学生成绩</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">张三</th>
      <td>85</td>
    </tr>
  </tbody>
</table>

<!-- ❌ 不推荐：缺少语义 -->
<table>
  <tr>
    <td><b>姓名</b></td>
    <td><b>成绩</b></td>
  </tr>
  <tr>
    <td>张三</td>
    <td>85</td>
  </tr>
</table>

6.4 响应式表格

<!-- 方案1：横向滚动 -->
<div style="overflow-x: auto;">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

<!-- 方案2：使用data属性在移动端显示 -->
<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="姓名">张三</td>
      <td data-label="年龄">25</td>
      <td data-label="城市">北京</td>
    </tr>
  </tbody>
</table>

<!-- CSS -->
<!--
@media (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead {
    display: none;
  }
  td:before {
    content: attr(data-label);
    font-weight: bold;
  }
}
-->

6.5 可访问性增强

<!-- 为表格添加摘要 -->
<table aria-describedby="table-summary">
  <caption id="table-summary">
    2024年第一季度销售数据统计，
    包含每月销售额和增长率
  </caption>
  <!-- 表格内容 -->
</table>

<!-- 为复杂表格添加scope和headers -->
<table>
  <thead>
    <tr>
      <th id="name" scope="col">姓名</th>
      <th id="score" scope="col">成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="name">张三</td>
      <td headers="score">85</td>
    </tr>
  </tbody>
</table>

七、总结

列表和表格使用要点：

列表：

1. 顺序重要用 <ol>，顺序无关用 <ul>
2. 键值对数据用 <dl>
3. 合理使用嵌套，但避免过深
4. 不要为了样式而滥用列表

表格：

1. 仅用于表格数据，不用于布局
2. 使用完整结构（<thead>、<tbody>、<tfoot>）
3. 添加 <caption> 说明表格内容
4. 使用 scope 和 headers 提升可访问性
5. 考虑移动端响应式处理

祝你变得更强!