Bootstrap4 表格

表格系统的重要性

表格是展示结构化数据最常用的方式。Bootstrap 4 提供了丰富的表格样式和功能，帮助您创建美观、易读且响应式的数据表格。

基本表格

Bootstrap 4 提供了基本的表格样式，只需使用 .table 类即可应用。

基本表格示例

#	姓名	邮箱	职位
1	张三	zhangsan@example.com	前端开发工程师
2	李四	lisi@example.com	后端开发工程师
3	王五	wangwu@example.com	UI设计师

                                    
                                        <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>zhangsan@example.com</td>

                                              <td>前端开发工程师</td>

                                            </tr>

                                            <!-- 更多行... -->

                                          </tbody>

                                        </table>

表格样式变体

Bootstrap 4 提供了多种表格样式变体，可以组合使用以满足不同设计需求。

条纹表格

使用 .table-striped 类为表格添加斑马纹样式：

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

<table class="table table-striped">...</table>

带边框表格

使用 .table-bordered 类为表格添加边框：

#	项目	进度	状态
1	网站重构	75%	进行中
2	移动端适配	100%	已完成
3	性能优化	30%	待开始

<table class="table table-bordered">...</table>

悬停效果表格

使用 .table-hover 类为表格行添加悬停效果：

#	课程	讲师	时长
1	HTML5 基础	张老师	8小时
2	CSS3 进阶	李老师	12小时
3	JavaScript 高级	王老师	20小时

<table class="table table-hover">...</table>

紧凑表格

使用 .table-sm 类创建更紧凑的表格，减少单元格内边距：

#	名称	类型	日期
1	项目报告.pdf	PDF文档	2023-06-01
2	设计稿.psd	图像文件	2023-06-02
3	数据统计.xlsx	电子表格	2023-06-03

<table class="table table-sm">...</table>

表格颜色变体

Bootstrap 4 提供了多种表格颜色变体，可用于表头、行或单元格。

表头颜色变体

#	深色表头	示例列	状态
1	数据1	示例数据	正常
2	数据2	示例数据	正常

#	浅色表头	示例列	状态
1	数据1	示例数据	正常
2	数据2	示例数据	正常

                                    
                                        <!-- 深色表头 -->

                                        <thead class="thead-dark">...</thead>

                                        <!-- 浅色表头 -->

                                        <thead class="thead-light">...</thead>

行和单元格颜色变体

#	名称	状态	说明
1	活跃行	进行中	使用 .table-active 类
2	主要行	重要	使用 .table-primary 类
3	成功行	已完成	使用 .table-success 类
4	危险行	错误	使用 .table-danger 类
5	警告行	警告	使用 .table-warning 类
6	信息行	信息	使用 .table-info 类

                                    
                                        <tr class="table-active">...</tr>

                                        <tr class="table-primary">...</tr>

                                        <tr class="table-success">...</tr>

                                        <tr class="table-danger">...</tr>

                                        <tr class="table-warning">...</tr>

                                        <tr class="table-info">...</tr>

响应式表格

Bootstrap 4 提供了响应式表格功能，当表格宽度超过父容器时会出现水平滚动条。

响应式表格示例

使用 .table-responsive 类创建响应式表格：

#	产品名称	描述	类别	价格	库存	评分	发布日期	状态
1	高端笔记本电脑	高性能笔记本电脑，适合专业工作	电子产品	¥8,999	15	4.8	2023-05-15	有货
2	无线蓝牙耳机	高品质音效，舒适佩戴	音频设备	¥699	32	4.5	2023-04-20	有货

                                    
                                        <div class="table-responsive">

                                          <table class="table">

                                            <!-- 表格内容 -->

                                          </table>

                                        </div>

断点特定的响应式表格

Bootstrap 4 还提供了断点特定的响应式表格类：

.table-responsive-sm - 在小屏幕及以上出现滚动条
.table-responsive-md - 在中等屏幕及以上出现滚动条
.table-responsive-lg - 在大屏幕及以上出现滚动条
.table-responsive-xl - 在超大屏幕及以上出现滚动条

                                    
                                        <div class="table-responsive-md">

                                          <table class="table">

                                            <!-- 表格内容 -->

                                          </table>

                                        </div>

高级表格功能

Bootstrap 4 表格还支持一些高级功能，可以进一步增强表格的可用性。

带说明文字的表格

使用 <caption> 元素为表格添加说明文字：

员工信息列表
#	姓名	部门	入职日期
1	张三	技术部	2020-03-15
2	李四	市场部	2019-07-22
3	王五	财务部	2021-01-10

                                    
                                        <table class="table">

                                          <caption>员工信息列表</caption>

                                          <!-- 表格内容 -->

                                        </table>

无边框表格

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

#	项目	预算	实际支出
1	网站开发	¥50,000	¥48,500
2	市场推广	¥30,000	¥32,000
3	设备采购	¥20,000	¥19,800

<table class="table table-borderless">...</table>

最佳实践

表格使用建议

始终使用 <thead> 和 <tbody> 来组织表格结构
为表头单元格使用 scope="col" 属性
为行标题单元格使用 scope="row" 属性
对于宽表格，使用响应式表格类确保在小屏幕上可访问
使用斑马纹样式提高长表格的可读性
合理使用颜色变体传达语义信息（如成功、警告、危险）
考虑使用悬停效果增强用户体验
对于密集数据，使用紧凑表格节省空间

掌握表格系统！

恭喜！您已经学习了Bootstrap 4表格系统的核心概念和功能。表格是展示结构化数据的重要工具，掌握这些技巧将帮助您创建美观、功能丰富的数据展示界面。

继续学习下一章：Bootstrap 4 图片与媒体

上一章:Bootstrap4 颜色下一章:Bootstrap4 图像形状

Bootstrap4教程