4.2　Bootstrap表格

Bootstrap框架为表格（table）增强了多种表现样式，使得表格在页面中呈现出简洁、美观和多样的特性。本节详细介绍表格的应用。

4.2.1　默认样式表格

使用Bootstrap框架中默认样式的表格非常简单，仅需要在table标签内添加一个.table类即可。

【代码4-18】一个默认样式表格的设计（详见源代码ch04目录中ch04.table.html文件）

上面的代码展示了一个Bootstrap默认样式表格，页面效果如图4.18所示。

4.2.2　斑马纹样式表格

使用Bootstrap框架中斑马纹样式的表格也非常简单，仅需要在table标签内再添加一个.table-striped类即可。

【代码4-19】一个斑马纹样式表格的设计（详见源代码ch04目录中ch04.stripedTable.html文件）

上面的代码展示了一个Bootstrap斑马纹样式表格，页面效果如图4.19所示。

4.2.3　圆角边框样式表格

使用Bootstrap框架中圆角边框样式的表格同样非常简单，仅需要在table标签内再添加一个.table-bordered类即可。

【代码4-20】一个圆角边框样式表格的设计（详见源代码ch04目录中ch04.borderedTable.html文件）

上面的代码展示了一个Bootstrap带圆角边框样式的表格，页面效果如图4.20所示。

4.2.4　鼠标悬停样式表格

行列数较多的表格浏览起来通常比较困难，Bootstrap框架提供了一种鼠标悬停样式的表格来提高用户体验，即当鼠标停留在表格某一行时该行会高亮显示。应用Bootstrap框架实现该功能仅需要在table标签内再添加一个.table-hover类即可。下面看一段代码示例。

【代码4-21】一个鼠标悬停样式表格的设计（详见源代码ch04目录中ch04.hoverTable.html文件）

上面的代码展示了一个Bootstrap带鼠标悬停样式的表格，页面效果如图4.21所示。

4.2.5　带行属性样式表格

Bootstrap框架还可以满足为每行单独设定属性样式的表格，应用该功能仅需要在需要增加行属性的<tr>标签内添加情景（contextual）类即可。这些情景类包括.table-success、.table-danger、.table-warning、.table-info、table-light、table-dark等，每一种分别使用不同的背景颜色来定义。下面看一段代码示例。

【代码4-22】一个带行属性样式表格的设计（详见源代码ch04目录中ch04.contextualTable.html文件）

上面的代码展示了一个Bootstrap带行属性样式的表格，页面效果如图4.22所示。