Bootstrap5 表格（超详细）

什么是 Bootstrap5 表格？为什么它值得你花时间学习

在网页开发中，表格是展示数据最直观的方式之一。无论是用户信息、订单列表，还是统计报表，我们都离不开表格。而 Bootstrap5 提供了一套简洁、响应式且语义清晰的表格组件，让原本复杂的布局变得简单高效。

你可以把 Bootstrap5 表格想象成一个“预制的积木盒子”——你不需要从零开始设计每一行、每一列的样式，只需按规则摆放内容，就能快速搭建出专业级的表格界面。更重要的是，它天然支持移动端适配，无论用户用手机还是平板访问页面，表格都能自动调整布局，避免内容被挤成一团。

如果你正在学习前端开发，或者已经有一定经验但想提升开发效率，那么掌握 Bootstrap5 表格绝对是一项高性价比的投资。它不仅节省时间，还能让你的项目看起来更专业。

基础表格结构：从 `<table>` 开始

Bootstrap5 的表格基于原生 HTML 的 <table> 元素构建，但通过添加特定类名来实现样式控制。我们先来看一个最基础的表格结构：

<table class="table">
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">年龄</th>
      <th scope="col">城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>

说明：

class="table" 是 Bootstrap5 表格的核心类，它赋予表格基本的边框、间距和字体样式。

<thead> 用于定义表头部分，通常包含列标题。

<th scope="col"> 中的 scope="col" 表示该单元格是“列标题”，对屏幕阅读器友好，提升无障碍体验。

<tbody> 包含实际数据行，每行用 <tr> 包裹，数据单元格用 <td> 表示。

注意：<th> 和 <td> 的区别在于前者用于标题，后者用于普通内容。

这个结构就像搭积木的第一步——先搭出框架，再填充内容。

响应式表格：让数据在小屏幕上也能清晰展示

移动端用户越来越多，如果表格在手机上显示时横向滚动困难，体验就会很差。Bootstrap5 的响应式表格通过 .table-responsive 类完美解决这个问题。

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">编号</th>
        <th scope="col">商品名称</th>
        <th scope="col">价格</th>
        <th scope="col">库存</th>
        <th scope="col">分类</th>
        <th scope="col">上架时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>无线耳机</td>
        <td>299 元</td>
        <td>120</td>
        <td>数码</td>
        <td>2024-03-15</td>
      </tr>
      <tr>
        <td>002</td>
        <td>智能手环</td>
        <td>199 元</td>
        <td>85</td>
        <td>穿戴设备</td>
        <td>2024-04-02</td>
      </tr>
    </tbody>
  </table>
</div>

说明：

外层包裹 <div class="table-responsive">，这是响应式的关键。

当屏幕宽度小于 576px（移动端）时，表格会自动变为横向滚动模式，用户可以通过左右滑动查看完整数据。

table-striped 类为表格添加了斑马纹效果，提高可读性，尤其适合长列表。

响应式设计就像给表格穿上了一件“弹性外套”，无论屏幕多小，都能保持清晰可读。

表格样式增强：颜色、边框与交互反馈

Bootstrap5 提供了多种内置样式类，让你的表格不再单调。常见的有：

table-bordered：添加边框
table-hover：鼠标悬停时行变色
table-dark：深色背景表格
table-sm：紧凑型表格，适合信息密集场景

<table class="table table-bordered table-hover table-sm">
  <thead class="table-primary">
    <tr>
      <th scope="col">用户名</th>
      <th scope="col">邮箱</th>
      <th scope="col">注册时间</th>
      <th scope="col">状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>user001</td>
      <td>user001@example.com</td>
      <td>2024-01-10</td>
      <td>正常</td>
    </tr>
    <tr>
      <td>admin</td>
      <td>admin@example.com</td>
      <td>2023-11-05</td>
      <td>禁用</td>
    </tr>
  </tbody>
</table>

说明：

table-bordered 为所有单元格添加细边框，让结构更清晰。

table-hover 在鼠标悬停时，整行背景变为浅蓝色，提升交互感。

table-sm 使表格行高更紧凑，适合展示大量数据。

table-primary 是表头的背景色类，可选 success、danger、warning 等，用于视觉分类。

这些类就像给表格“化妆”——通过颜色和动态效果，让数据更易识别、更吸引人。

高级功能：合并行与列、自定义宽度

在某些场景下，你需要合并单元格。例如，一个“地区汇总”行需要覆盖多个省份。Bootstrap5 支持 rowspan 和 colspan 属性。

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">地区</th>
      <th scope="col">人口（万人）</th>
      <th scope="col">GDP（亿元）</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">华东地区</td>
      <td>12000</td>
      <td>180000</td>
    </tr>
    <tr>
      <td>8000</td>
      <td>110000</td>
    </tr>
    <tr>
      <td>华南地区</td>
      <td>9000</td>
      <td>135000</td>
    </tr>
  </tbody>
</table>

说明：

rowspan="2" 表示该单元格跨越两行，常用于合并标题行。

colspan 可用于横向合并，例如一个“总计”行覆盖多列。

注意：合并单元格会增加 HTML 的复杂度，建议在数据结构明确时使用。

这就像把几块拼图“粘”在一起，让信息组织更合理。

实战案例：构建一个用户管理表格

我们来做一个完整的用户管理页面表格，融合前面学到的所有知识点。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>用户管理 - Bootstrap5 表格</title>
  <!-- 引入 Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-4">
  <h2 class="mb-4">用户管理列表</h2>

  <div class="table-responsive">
    <table class="table table-bordered table-striped table-hover table-sm">
      <thead class="table-info">
        <tr>
          <th scope="col">#</th>
          <th scope="col">用户名</th>
          <th scope="col">邮箱</th>
          <th scope="col">角色</th>
          <th scope="col">状态</th>
          <th scope="col">注册时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>zhangsan</td>
          <td>zhangsan@example.com</td>
          <td>管理员</td>
          <td><span class="badge bg-success">正常</span></td>
          <td>2024-01-10</td>
          <td>
            <button class="btn btn-sm btn-primary">编辑</button>
            <button class="btn btn-sm btn-danger">删除</button>
          </td>
        </tr>
        <tr>
          <td>2</td>
          <td>lisi</td>
          <td>lisi@example.com</td>
          <td>普通用户</td>
          <td><span class="badge bg-warning">待审核</span></td>
          <td>2024-03-05</td>
          <td>
            <button class="btn btn-sm btn-primary">编辑</button>
            <button class="btn btn-sm btn-danger">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 引入 Bootstrap5 JS（可选） -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

说明：

使用了 table-responsive 确保移动端友好。

table-bordered 和 table-striped 提升可读性。

table-hover 增强交互体验。

table-sm 使表格紧凑，适合信息密集场景。

状态列使用 <span class="badge bg-success"> 显示标签，增强视觉反馈。

操作列添加按钮，为后续 JavaScript 功能预留空间。

这个案例展示了如何将多个类组合使用，构建一个真实可用的管理后台表格。

小结：Bootstrap5 表格的核心价值

Bootstrap5 表格并不是一个简单的样式工具，而是一套完整的数据展示解决方案。它将 HTML 语义、响应式设计、交互反馈和无障碍支持融为一体，让开发者能专注于业务逻辑，而不是反复调试表格布局。

无论是初学者还是中级开发者，掌握它都能显著提升开发效率。你不再需要写一堆 CSS 来控制边距、字体和悬停效果，只需添加几个类名，就能得到一个专业、响应式、可访问的表格。

更重要的是，Bootstrap5 表格的结构清晰、文档完善，社区资源丰富。一旦你掌握了它的使用规律，就能轻松应对各种复杂的数据展示需求。

所以，如果你还没开始使用 Bootstrap5 表格，不妨现在就动手试一试。它可能就是你项目中那个“让用户体验提升一档”的关键细节。