Bootstrap 5 表格教程 - 数据展示与表格样式

Bootstrap 5 表格系统

Bootstrap 5 提供了丰富的表格样式和组件，可以快速创建美观、功能完善的数据表格。

表格系统的主要特点：

多样化样式 - 条纹、边框、紧凑等多种样式
响应式设计 - 适配各种屏幕尺寸
交互功能 - 悬停效果、可点击行等
语义化颜色 - 使用主题颜色表示不同状态
灵活定制 - 丰富的工具类和组件

表格结构示例

#	姓名	部门	状态
1	张三	技术部	活跃
2	李四	市场部	休假
3	王五	财务部	离职

基本表格

默认表格

使用 .table 类创建基本表格。

#	产品	价格	库存
1	笔记本电脑	¥5,999	25
2	智能手机	¥3,299	42
3	平板电脑	¥2,199	18

<table class="table">
  <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">1</th>
      <td>笔记本电脑</td>
      <td>¥5,999</td>
      <td>25</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>智能手机</td>
      <td>¥3,299</td>
      <td>42</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>平板电脑</td>
      <td>¥2,199</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

表格变体

条纹表格

使用 .table-striped 类添加斑马纹样式。

#	姓名	年龄	城市
1	张三	28	北京
2	李四	32	上海
3	王五	25	广州
4	赵六	30	深圳

带边框表格

使用 .table-bordered 类添加边框。

#	项目	进度	负责人
1	网站 redesign	75%	张三
2	移动应用开发	45%	李四
3	数据库迁移	90%	王五

悬停效果

使用 .table-hover 类添加行悬停效果。

#	任务	优先级	状态
1	需求分析	高	已完成
2	UI设计	中	进行中
3	前端开发	高	未开始

紧凑表格

使用 .table-sm 类创建更紧凑的表格。

#	产品ID	名称	销量
1	P001	无线鼠标	156
2	P002	机械键盘	89
3	P003	USB-C Hub	203

<!-- 条纹表格 -->
<table class="table table-striped">...</table>

<!-- 带边框表格 -->
<table class="table table-bordered">...</table>

<!-- 悬停效果表格 -->
<table class="table table-hover">...</table>

<!-- 紧凑表格 -->
<table class="table table-sm">...</table>

<!-- 组合使用 -->
<table class="table table-striped table-bordered table-hover">...</table>

表格颜色

使用主题颜色类为表格行、单元格或表头添加颜色。

类名	描述	示例
.table-success	成功或积极操作	✓
.table-danger	危险或负面操作	✗
.table-warning	警告或需要注意	⚠
.table-info	信息性内容	ℹ
.table-primary	.table-secondary	.table-light

<!-- 表头颜色 -->
<thead>
  <tr class="table-primary">
    <th scope="col">类名</th>
    <th scope="col">描述</th>
    <th scope="col">示例</th>
  </tr>
</thead>

<!-- 行颜色 -->
<tr class="table-success">
  <td>.table-success</td>
  <td>成功或积极操作</td>
  <td>✓</td>
</tr>

<!-- 单元格颜色 -->
<tr>
  <td class="table-primary">.table-primary</td>
  <td class="table-secondary">.table-secondary</td>
  <td class="table-light">.table-light</td>
</tr>

深色表格

使用 .table-dark 类创建深色主题表格。

#	电影	类型	评分
1	盗梦空间	科幻/动作	9.3
2	肖申克的救赎	剧情	9.7
3	阿甘正传	剧情/爱情	9.5

高级表格

带标题的表格

使用 <caption> 元素为表格添加标题。

2023年销售数据
季度	产品A	产品B	产品C
Q1	¥120,000	¥85,000	¥95,000
Q2	¥135,000	¥92,000	¥110,000
Q3	¥150,000	¥105,000	¥125,000

无边框表格

使用 .table-borderless 类创建无边框表格。

服务	基础版	专业版	企业版
存储空间	10GB	50GB	无限
用户数量	1	5	无限
技术支持	邮件	优先	24/7

响应式表格

使用 .table-responsive 类创建响应式表格，在小屏幕上水平滚动。

#	姓名	职位	部门	邮箱	电话	入职日期	状态
1	张三	前端工程师	技术部	zhangsan@example.com	138-0013-8000	2022-03-15	在职
2	李四	产品经理	产品部	lisi@example.com	139-0013-9000	2021-08-22	在职
3	王五	UI设计师	设计部	wangwu@example.com	137-0013-7000	2023-01-10	试用期

<div class="table-responsive">
  <table class="table">
    <!-- 表格内容 -->
  </table>
</div>

<!-- 指定断点的响应式表格 -->
<div class="table-responsive-sm">...</div> <!-- ≥576px -->
<div class="table-responsive-md">...</div> <!-- ≥768px -->
<div class="table-responsive-lg">...</div> <!-- ≥992px -->
<div class="table-responsive-xl">...</div> <!-- ≥1200px -->
<div class="table-responsive-xxl">...</div> <!-- ≥1400px -->

表格与组件结合

表格可以与其他Bootstrap组件结合使用，创建功能丰富的界面。

产品	价格	评分	库存状态
无线蓝牙耳机型号: WB-2023	¥299	4.5	有货
智能手表型号: SW-2023	¥899	4.0	少量库存
便携音箱型号: PS-2023	¥199	5.0	缺货

交互式表格

结合JavaScript创建交互式表格，增强用户体验。

任务	负责人	截止日期	状态
完成项目提案	张三	2023-10-15	已完成
设计用户界面	李四	2023-10-20	进行中
编写技术文档	王五	2023-10-25	未开始

表格使用最佳实践

数据组织

确保表格结构清晰，使用合适的表头
对相关数据进行分组，提高可读性
使用斑马纹或颜色区分不同行
为重要数据添加视觉强调

响应式设计

为宽表格添加响应式容器
在小屏幕上考虑简化表格结构
使用合适的断点控制表格行为
测试在不同设备上的显示效果

用户体验

为可操作行添加悬停效果
使用颜色传达状态信息
确保表格内容易于扫描
提供排序或筛选功能（如需要）

无障碍设计

使用 <th scope="..."> 定义表头范围
为复杂表格添加描述性标题
确保颜色对比度符合可访问性标准
为屏幕阅读器提供适当的结构

掌握表格后，下一步学习表单组件

表格是数据展示的重要工具，接下来可以学习如何使用表单组件收集和验证用户输入。

学习表单组件查看所有组件

Bootstrap5教程

Bootstrap5 表格

Bootstrap 5 表格