Bootstrap4 通過 .table 類來設定基礎表格的樣式，執行個體如下:
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<td>John</td>
<td>Doe</td>
<td>[email protected]</td>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tbody>
</table>
通過添加 .table-striped 類，您将在 <tbody> 内的行上看到條紋，如下面的執行個體所示：
<table class="table table-striped">
.table-bordered 類可以為表格添加邊框
<table class="table table-bordered">
.table-hover 類可以為表格的每一行添加滑鼠懸停效果（灰色背景）：
<table class="table table-hover">
.table-dark 類可以為表格添加黑色背景：
<table class="table table-dark">
聯合使用 .table-dark 和 .table-striped 類可以建立黑色的條紋表格：
<table class="table table-dark table-striped">
聯合使用 .table-dark 和 .table-hover 類可以設定黑色背景表格的滑鼠懸停效果：
<table class="table table-dark table-hover">
.table-borderless 類可以設定一個無邊框的表格：
<table class="table table-borderless">
通過指定意義的顔色類可以為表格的行或者單元格設定顔色：
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>[email protected]</td>
<tr class="table-success">
<td>Success</td>
<tr class="table-danger">
<td>Danger</td>
<tr class="table-info">
<td>Info</td>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>[email protected]</td>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>[email protected]</td>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
下表列出了表格顔色類的說明:
類名
描述
.table-primary
藍色: 指定這是一個重要的操作
.table-success
綠色: 指定這是一個允許執行的操作
.table-danger
紅色: 指定這是可以危險的操作
.table-info
淺藍色: 表示内容已變更
.table-warning
橘色: 表示需要注意的操作
.table-active
灰色: 用于滑鼠懸停效果
.table-secondary
灰色: 表示内容不怎麼重要
.table-light
淺灰色，可以是表格行的背景
.table-dark
深灰色，可以是表格行的背景
在 Bootstrap v4.0.0-beta.2 中.thead-dark 類用于給表頭添加黑色背景， .thead-light 類用于給表頭添加灰色背景:
在 Bootstrap v4.0.0-beta 這個版本中，.thead-inverse 類用于給表頭添加黑色背景，.thead-default 類用于給表頭添加灰色背景。
<thead class="thead-dark">
<thead class="thead-light">
.table-sm 類用于通過減少内邊距來設定較小的表格:
<table class="table table-bordered table-sm">
.table-responsive 類用于建立響應式表格：在螢幕寬度小于 992px 時會建立水準滾動條，如果可視區域寬度大于 992px 則顯示不同效果（沒有滾動條）:
<div class="table-responsive">
<th>#</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
</div>
你可以通過以下類設定在指定螢幕寬度下顯示滾動條：
螢幕寬度
.table-responsive-sm
< 576px
.table-responsive-md
< 768px
.table-responsive-lg
< 992px
.table-responsive-xl
< 1200px
<div class="table-responsive-sm">
...