1.Black/Dark Table:
The .table-dark class applies a dark color scheme to a table, giving it a black or dark-themed appearance.
Example:
<div class="container">
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mary</td>
<td>Smith</td>
<td>@marysmith</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James</td>
<td>Johnson</td>
<td>@jamesjohnson</td>
</tr>
</tbody>
</table>
</div>Output:
2.Dark Striped Table:
The .table-dark.table-striped class combines a dark theme with zebra-striping for tables, providing alternating row colors on a dark background.
Example:
<div class="container">
<table class="table table-dark table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mary</td>
<td>Smith</td>
<td>@marysmith</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James</td>
<td>Johnson</td>
<td>@jamesjohnson</td>
</tr>
</tbody>
</table>
</div>Output:
3.Hoverable Dark Table:
To create a hoverable dark-themed table, you can combine the .table-dark class with the .table-hover class in Bootstrap. This combination will produce a table with a dark background where rows highlight on hover, improving interactivity and readability.
Example:
<div class="container">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mary</td>
<td>Smith</td>
<td>@marysmith</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James</td>
<td>Johnson</td>
<td>@jamesjohnson</td>
</tr>
</tbody>
</table>
</div>Output:
4.Borderless Table:
A borderless table, also known as a table without borders, can be achieved by using the .table-borderless class in Bootstrap. This class removes the borders from all cells of the table, providing a clean and minimalist appearance. Here’s how you can implement it:
Example:
<div class="container">
<table class="table table-borderless">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mary</td>
<td>Smith</td>
<td>@marysmith</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James</td>
<td>Johnson</td>
<td>@jamesjohnson</td>
</tr>
</tbody>
</table>
</div>Output:
