Mono provides a variety of Bootstrap tables components with a little customization that suits its design standards. For more information, please see the official Bootstrap documentation.
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
<th class="text-center">
<a href="#">
<i class="mdi mdi-open-in-new"></i>
</a>
<a href="#">
<i class="mdi mdi-close text-danger"></i>
</a>
</th>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
<th class="text-center">
<a href="#">
<i class="mdi mdi-open-in-new"></i>
</a>
<a href="#">
<i class="mdi mdi-close text-danger"></i>
</a>
</th>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
<th class="text-center">
<a href="#">
<i class="mdi mdi-open-in-new"></i>
</a>
<a href="#">
<i class="mdi mdi-close text-danger"></i>
</a>
</th>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
<th class="text-center">
<a href="#">
<i class="mdi mdi-open-in-new"></i>
</a>
<a href="#">
<i class="mdi mdi-close text-danger"></i>
</a>
</th>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
<th class="text-center">
<a href="#">
<i class="mdi mdi-open-in-new"></i>
</a>
<a href="#">
<i class="mdi mdi-close text-danger"></i>
</a>
</th>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
<th class="text-center">
<a href="#">
<i class="mdi mdi-open-in-new"></i>
</a>
<a href="#">
<i class="mdi mdi-close text-danger"></i>
</a>
</th>
</tr>
</tbody>
</table>
| # | First | Last | Handle | Action |
|---|---|---|---|---|
| 1 | Lucia | Christ | @Lucia | |
| 2 | Catrin | Seidl | @catrin | |
| 3 | Lilli | Kirsh | @lilli | |
| 4 | Else | Voigt | @voigt | |
| 5 | Ursel | Harms | @ursel | |
| 6 | Anke | Sauter | @Anke |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
<th scope="col">Active</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
<td>
<label class="switch switch-primary switch-pill form-control-label ">
<input type="checkbox" class="switch-input form-check-input" value="on" checked>
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
<td>
<label class="switch switch-primary switch-pill form-control-label ">
<input type="checkbox" class="switch-input form-check-input" value="on">
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
<td>
<label class="switch switch-primary switch-pill form-control-label ">
<input type="checkbox" class="switch-input form-check-input" value="on" checked>
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
<td>
<label class="switch switch-primary switch-pill form-control-label ">
<input type="checkbox" class="switch-input form-check-input" value="on">
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
<td>
<label class="switch switch-primary switch-pill form-control-label ">
<input type="checkbox" class="switch-input form-check-input" value="on" checked>
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
<td>
<label class="switch switch-primary switch-pill form-control-label ">
<input type="checkbox" class="switch-input form-check-input" value="on">
<span class="switch-label"></span>
<span class="switch-handle"></span>
</label>
</td>
</tr>
</tbody>
</table>
| # | First | Last | Handle | Active |
|---|---|---|---|---|
| 1 | Lucia | Christ | @Lucia | |
| 2 | Catrin | Seidl | @catrin | |
| 3 | Lilli | Kirsh | @lilli | |
| 4 | Else | Voigt | @voigt | |
| 5 | Ursel | Harms | @ursel | |
| 6 | Anke | Sauter | @Anke |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr class="table-primary">
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr class="table-info">
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr class="table-success">
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr class="table-danger">
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr class="table-warning">
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Lucia</td>
<td>Christ</td>
<td>@Lucia</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Catrin</td>
<td>Seidl</td>
<td>@catrin</td>
</tr>
<tr>
<td scope="row">3</td>
<td>Lilli</td>
<td>Kirsh</td>
<td>@lilli</td>
</tr>
<tr>
<td scope="row">4</td>
<td>Else</td>
<td>Voigt</td>
<td>@voigt</td>
</tr>
<tr>
<td scope="row">5</td>
<td>Ursel</td>
<td>Harms</td>
<td>@ursel</td>
</tr>
<tr>
<td scope="row">6</td>
<td>Anke</td>
<td>Sauter</td>
<td>@Anke</td>
</tr>
</tbody>
</table>
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
