---

Bootstrap4是前端界非常实用的框架之一，其中的表格（table）组件是网页布局中非常重要的元素。Bootstrap4的表格风格比较简洁大气，也非常易于添加样式和扩展，使用起来非常方便。

1. 基础的表格类型

在Bootstrap中，我们可以使用<table>标签来定义一个表格。表格内可以使用<tr>标签来定义行，每一行又由一个或多个<td>或<th>标签来定义每个单元格。<th>用于表格的表头（头部行），<td>用于定义常规行。另外，在Bootstrap4中，表格还支持一些额外的属性，例如<thead>、<tbody>、<tfoot>和<caption>等，用于更精细化地控制表格的样式和布局。

Bootstrap4还提供了基于响应式的表格样式，可以根据屏幕大小来自适应变化。例如，我们可以使用<div class="table-responsive">来将表格包裹起来，这样在移动端或小屏幕上也可以正常显示。

2. Bootstrap表格的样式

在Bootstrap的表格中，可以通过添加CSS样式类来实现特定的效果。以下是一些常用的样式类：

• .table：定义一个基本表格，默认不带任何样式；
• .table-striped：定义带有斑马线效果的表格；
• .table-bordered：定义带有边框的表格；
• .table-hover：定义带有鼠标悬停效果的表格；
• .table-sm：定义小尺寸的表格；
• .table-responsive：定义响应式的表格；

3. 自定义表格样式

Bootstrap4提供了一些列类（column classes）来自定义表格样式。以下是一些常用的列类：

• .thead-light：定义表头轻量级样式；
• .thead-dark：定义表头深色样式；
• .table-primary、.table-secondary、.table-success、.table-danger、.table-warning、.table-info、.table-light、.table-dark：定义不同的表格颜色样式；
• .table-active：定义选中行样式；
• .table-hover：定义鼠标悬停效果样式；
• .table-striped：定义斑马线效果样式；
• .table-borderless：定义无边框样式。

通过自定义表格样式，可以灵活地控制表格的样式，并且可以满足各种视觉和功能需求。

4. Bootstrap表格插件

Bootstrap4还提供了一些插件（extensions）来拓展表格功能。以下是一些常用的插件：

• DataTables：一个强大的表格插件，可以实现排序、搜索、过滤、分页、编辑等功能；
• EditableTables：一个可以直接在表格中编辑和保存数据的插件；
• Bootstrap Tables：一个实现各种表格操作的插件，如拖拽排序、复选框选择、行列添加删除等。

5. 总结

Bootstrap4的表格组件是网页布局中非常常用和方便的元素，其灵活性和拓展性充分满足了各种不同需求的网站和应用程序。通过掌握基本的表格类型和样式，以及使用自定义样式和插件，可以快速地创建出符合视觉和功能要求的表格，并提高网站用户交互体验。