2.4 列表与表格元素

2.4 列表与表格元素

列表元素详解

1. 无序列表 (Unordered List)

<ul>
  <li>首页</li>
  <li>产品
    <ul>
      <li>网页设计</li>
      <li>移动应用</li>
    </ul>
  </li>
  <li>关于我们</li>
</ul>

最佳实践：

• 适用于导航菜单、项目符号列表
• 嵌套时建议不超过3层
• 使用CSS的list-style-type自定义标记样式

2. 有序列表 (Ordered List)

<ol type="I" start="5" reversed>
  <li>准备材料</li>
  <li value="10">混合搅拌</li>
  <li>烘烤30分钟</li>
</ol>

属性控制：

• type：编号类型（1, A, a, I, i）
• start：起始编号
• reversed：倒序编号
• li的value属性可中断编号序列

3. 定义列表 (Definition List)

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言，网页结构基础</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表，控制网页表现</dd>
  
  <dt>JavaScript</dt>
  <dd>脚本语言，实现网页交互</dd>
</dl>

适用场景：

• 术语解释
• 元数据展示
• 对话记录（Q&A）

表格元素详解

1. 基础表格结构

<table>
  <caption>2023年销售数据</caption>
  <thead>
    <tr>
      <th scope="col">季度</th>
      <th scope="col">销售额</th>
      <th scope="col">增长率</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1</th>
      <td>¥120,000</td>
      <td>+5%</td>
    </tr>
    <tr>
      <th scope="row">Q2</th>
      <td>¥150,000</td>
      <td>+12%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">总计</th>
      <td>¥520,000</td>
      <td>+8%</td>
    </tr>
  </tfoot>
</table>

结构说明：

• <caption>：表格标题
• <thead>/<tbody>/<tfoot>：语义化分组
• scope属性：col|row指定表头作用域

2. 高级表格特性

列分组控制：

<table>
  <colgroup>
    <col span="2" style="background-color: #f5f5f5">
    <col style="border-left: 2px solid #333">
  </colgroup>
  <!-- 表格内容 -->
</table>

单元格合并：

<tr>
  <td rowspan="2">跨行单元格</td>
  <td>正常单元格</td>
</tr>
<tr>
  <td colspan="2">跨列单元格</td>
</tr>

3. 响应式表格方案

水平滚动方案：

<div class="table-responsive">
  <table>...</table>
</div>

<style>
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
</style>

数据优先级显示：

@media (max-width: 600px) {
  td:nth-child(3), th:nth-child(3) {
    display: none;
  }
}

现代列表与表格实践

1. 列表组件开发

面包屑导航：

<nav aria-label="面包屑导航">
  <ol class="breadcrumb">
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
    <li aria-current="page">网页设计</li>
  </ol>
</nav>

步骤指示器：

<ul class="steps">
  <li class="completed">注册账号</li>
  <li class="current">完善资料</li>
  <li>验证邮箱</li>
</ul>

2. 数据表格增强

排序功能实现：

<table>
  <thead>
    <tr>
      <th onclick="sortTable(0)">姓名 ▲</th>
      <th onclick="sortTable(1)">分数 ▼</th>
    </tr>
  </thead>
  <!-- 表格内容 -->
</table>

<script>
function sortTable(columnIndex) {
  // 实现排序逻辑
}
</script>

分页控制：

<div class="table-pagination">
  <button disabled>上一页</button>
  <span>第1页</span>
  <button>下一页</button>
</div>

可访问性最佳实践

1. 列表可访问性

<ul aria-labelledby="features-heading">
  <li role="listitem">响应式设计</li>
  <!-- 其他列表项 -->
</ul>
<h2 id="features-heading">产品特性</h2>

2. 表格可访问性

<table aria-describedby="table-desc">
  <!-- 表格内容 -->
</table>
<div id="table-desc" class="visually-hidden">
  本表格展示2023年各季度销售数据
</div>

性能优化技巧

1. 大数据量表格优化

// 虚拟滚动实现
function renderVisibleRows() {
  const startIdx = Math.floor(scrollTop / rowHeight);
  const endIdx = Math.min(startIdx + visibleRows, data.length);
  
  // 仅渲染可视区域行
}

2. 列表性能提升

<ul id="dynamic-list"></ul>

<script>
// 使用DocumentFragment批量插入
const fragment = document.createDocumentFragment();
data.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  fragment.appendChild(li);
});
document.getElementById('dynamic-list').appendChild(fragment);
</script>

完整案例：产品比较表

<div class="comparison-table">
  <table>
    <caption>产品功能比较</caption>
    <thead>
      <tr>
        <th scope="col">功能</th>
        <th scope="col">基础版</th>
        <th scope="col">专业版</th>
        <th scope="col">企业版</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">存储空间</th>
        <td>10GB</td>
        <td>50GB</td>
        <td>无限</td>
      </tr>
      <tr>
        <th scope="row">用户数量</th>
        <td>1人</td>
        <td>5人</td>
        <td>不限</td>
      </tr>
    </tbody>
  </table>
  
  <div class="mobile-view">
    <ul>
      <li>
        <h3>存储空间</h3>
        <ul class="plans">
          <li>基础版: 10GB</li>
          <li>专业版: 50GB</li>
          <li>企业版: 无限</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<style>
/* 桌面端显示表格 */
@media (min-width: 768px) {
  .mobile-view { display: none; }
  table { display: table; }
}

/* 移动端显示列表 */
@media (max-width: 767px) {
  table { display: none; }
  .mobile-view { display: block; }
}
</style>

通过合理运用列表与表格元素，开发者可以有效地组织和展示结构化数据，同时确保内容的语义清晰和可访问性良好。现代CSS技术更使得这些传统HTML元素能够适应各种复杂的展示需求和设备环境。