Nearby lessons
7 of 39📊 BS5 Tables
📌 What Are Bootstrap 5 Tables?
Bootstrap styles tables with .table (base class). Add .table-striped for alternating rows, .table-bordered for borders, .table-hover for row hover, .table-dark for dark theme, .table-sm for compact. Wrap in .table-responsive for horizontal scrolling on small screens.
📊 Basic Table (.table)
.table – base class for Bootstrap table styling (spacing, borders). Use with <table>, <thead>, <tbody>, <th>, <td>. Add scope="col" or scope="row" on <th> for accessibility.
📋 Striped Table (.table-striped)
.table-striped – alternating row colors (zebra striping). Add to the same element as .table.
🖱️ Hover Table (.table-hover)
.table-hover – highlights rows on hover. Add to the same element as .table.
📐 Bordered Table (.table-bordered)
.table-bordered – borders on all cells. Add to the same element as .table.
🌙 Dark Table (.table-dark)
.table-dark – dark theme (dark background, light text). Add to the same element as .table. Use .table-dark on <thead> for a dark header only.
📱 Responsive Table (.table-responsive)
.table-responsive – wrapper that enables horizontal scrolling on small screens. Wrap the <table> in a <div class="table-responsive">. Use .table-responsive-sm, .table-responsive-md, etc. for breakpoint-specific scrolling.
📏 Small Table (.table-sm)
.table-sm – compact table (less padding). Add to the same element as .table.
✅ Table Best Practices
- Wrap tables in .table-responsive for mobile scrolling.
- Use scope on
<th>for accessibility. - Combine classes: .table .table-striped .table-hover.