# Bootstrap4 表格
## Bootstrap4 基础表格
Bootstrap4 通过.table类来设置基础表格的样式，实例如下:
```
<div class="container">
<h2>基础表格</h2>
<p>.table 类来设置基础表格的样式:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
```
## 条纹表格
通过添加.table-striped类，您将在****内的行上看到条纹，如下面的实例所示：
```
<div class="container">
<h2>条纹表格</h2>
<p>通过添加 .table-striped 类，来设置条纹表格:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
```
## 带边框表格
.table-bordered类可以为表格添加边框
```
<div class="container">
<h2>带边框表格</h2>
<p>.table-bordered 类可以为表格添加边框:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
```
## 鼠标悬停状态表格
.table-hover类可以为表格的每一行添加鼠标悬停效果（灰色背景）：
```
<div class="container">
<h2>鼠标悬停状态表格</h2>
<p>.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：</p>
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
```
