A Bootstrap 4 basic table with lightly padded cells and horizontal dividers. Bootstrap table uses all HTML table tags with the header
inside <thead>
and the body
of the table inside <tbody>
tags.
<table class="table">
<thead>
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
</tbody>
</table>
The .table-dark
class adds a black background and white color fonts to the table
<table class="table table-dark">
<thead>
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
</tbody>
</table>
You can add a background color to the <thead> element by using either .thead-light
or .thead-dark
.
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
</tbody>
</table>
<hr />
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
</tbody>
</table>
Use .table-striped
to add zebra-striping to any table row within the <tbody>
.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
</tbody>
</table>
<hr />
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
</tbody>
</table>
The .table-bordered
class adds borders on all sides of the table and cells.
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Suresh</td>
<td colspan="2">sureshreddy@freetimelearning.com</td>
</tr>
</tbody>
</table>
The .table-hover
class adds a hover effect (grey background color) on table rows.
<table class="table table-hover">
<thead>
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Suresh</td>
<td colspan="2">sureshreddy@freetimelearning.com</td>
</tr>
</tbody>
</table>
Contextual classes can be used to color the whole table (<table>
), the table rows (<tr>
) or table cells (<td>
).
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>1</td>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr class="table-primary">
<td>2</td>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr class="table-success">
<td>3</td>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr class="table-light">
<td>4</td>
<td>Suresh</td>
<td>sureshreddy@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr class="table-warning">
<td>5</td>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr class="table-danger">
<td>6</td>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr class="table-default">
<td>7</td>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr class="table-info">
<td>8</td>
<td>Suresh</td>
<td>sureshreddy@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr class="table-dark">
<td>9</td>
<td>vsr</td>
<td>vsr@freetimelearning.com</td>
<td>9010023210</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-bordered">
<thead>
<tr>
<th scope="col">S.No</th>
<th scope="col">Name</th>
<th scope="col">Email Id</th>
<th scope="col">Mobile</th>
</tr>
</thead>
<tbody>
<tr class="bg-active">
<td>1</td>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr class="bg-primary">
<td>2</td>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr class="bg-success">
<td>3</td>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr class="bg-light">
<td>4</td>
<td>Suresh</td>
<td>sureshreddy@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr class="bg-warning">
<td>5</td>
<td>Free Time Learn</td>
<td>freetimelearn@gmail.com</td>
<td>9010023210</td>
</tr>
<tr class="bg-danger">
<td>6</td>
<td>Free Time Learning</td>
<td>info@freetimelearning.com</td>
<td>9966463846</td>
</tr>
<tr class="bg-default">
<td>7</td>
<td>Ramana</td>
<td>ramana@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr class="bg-info">
<td>8</td>
<td>Suresh</td>
<td>sureshreddy@freetimelearning.com</td>
<td>9963666068</td>
</tr>
<tr class="bg-dark">
<td>9</td>
<td>vsr</td>
<td>vsr@freetimelearning.com</td>
<td>9010023210</td>
</tr>
</tbody>
</table>