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>Our website is made possible by displaying ads to our visitors.
Please help us continue to provide you with free. So please disabling your ad blocker.