Tables Bootstrap
4 min read Quiz at the end
Use table-striped, table-hover, table-responsive, and semantic row colors in Bootstrap tables.
Tables
<table class="table">
<thead>
<tr><th>Name</th><th>Email</th><th>Action</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>alice@example.com</td><td><button class="btn btn-sm btn-danger">Delete</button></td></tr>
</tbody>
</table>
<!-- Variants -->
<table class="table table-striped table-hover table-bordered">
<table class="table table-dark">
<table class="table table-sm">
<!-- Responsive (scroll on small screens) -->
<div class="table-responsive">
<table class="table">...</table>
</div>
<!-- Row colors -->
<tr class="table-success">
<tr class="table-danger">
<tr class="table-warning">
Topic Quiz · 2 questions
Test your understanding before moving on
1. What class makes a table striped?
💡 table-striped adds alternating background colors to table rows.
2. How do you make a table scrollable on small screens?
💡 Wrap the table in div.table-responsive for horizontal scrolling.