# 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>
```
