Bootstrap 提供了一套简洁的类，使得创建美观的表格变得非常简单。以下是如何使用 Bootstrap 来创建和自定义表格的示例代码。
基础表格
首先，创建一个基础表格，只需要给 <table> 标签添加 .table 类。
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
斑马线条纹表格
添加 .table-striped 类来给表格添加斑马线条纹效果。
<table class="table table-striped">
<!-- 表格内容 -->
</table>
带边框的表格
添加 .table-bordered 类来给表格添加边框。
<table class="table table-bordered">
<!-- 表格内容 -->
</table>
鼠标悬停效果
添加 .table-hover 类来给表格添加鼠标悬停效果。
<table class="table table-hover">
<!-- 表格内容 -->
</table>
紧凑表格
添加 .table-condensed 类来让表格更加紧凑。
<table class="table table-condensed">
<!-- 表格内容 -->
</table>
联合使用所有表格类
你可以联合使用上述类来创建一个具有所有这些样式的表格。
<table class="table table-striped table-bordered table-hover table-condensed">
<!-- 表格内容 -->
</table>
行和单元格的状态类
Bootstrap 还提供了一些类，可以应用到 <tr>、<th> 和 <td> 元素上，以表示不同的状态。
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="active"> <!-- 悬停颜色 -->
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr class="success"> <!-- 成功状态 -->
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr class="info"> <!-- 信息状态 -->
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr class="warning"> <!-- 警告状态 -->
<td>4</td>
<td>Jane</td>
<td>Doe</td>
<td>@jane</td>
</tr>
<tr class="danger"> <!-- 危险状态 -->
<td>5</td>
<td>John</td>
<td>Doe</td>
<td>@john</td>
</tr>
</tbody>
</table>
