Bootstrap Tables
Duration : 00:04:00
Variants and Accented Tables:
Bootstrap's table variants allow you to style tables with different contextual colors, such as primary, secondary, success, etc. Accented tables utilize these variants to add emphasis and clarity to specific rows or cells.Example:
<table class="table">
<tbody>
<tr class="table-primary">
<td>Primary Row</td>
</tr>
<tr class="table-danger">
<td>Danger Row</td>
</tr>
</tbody>
</table> Striped and Hoverable Rows:
Striped rows enhance table readability by alternating background colors, while hoverable rows highlight rows when users hover over them.Example:
<table class="table table-striped">
<tbody>
<tr>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
</tr>
</tbody>
</table>
Active Tables and Table Borders:
Active tables highlight rows or cells on click, providing user interactivity. To add table borders, use classes like 'table-bordered'.Example:
<table class="table table-active">
<tbody>
<tr>
<td>Active Row</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<!-- Table content here -->
</table> Small Tables and Vertical Alignment:
Bootstrap offers classes to create compact small tables. Additionally, use vertical alignment classes for content alignment within cells.Example:
<table class="table table-sm">
<!-- Small table content here -->
</table>
<table class="table">
<tbody>
<tr class="align-top">
<td>Top-aligned content</td>
</tr>
</tbody>
</table> Nesting and Anatomy:
Nesting tables involve placing a table inside a cell to create complex layouts.Example:
<table class="table">
<tbody>
<tr>
<td>
<!-- Nested table here -->
</td>
</tr>
</tbody>
</table> Table Head, Table Foot, and Captions:
Utilize '<thead>', '<tfoot>', and '<caption>' elements to structure tables more effectively.Example:
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<caption>Table Caption</caption>
</table> Responsive Tables:
Make tables responsive by wrapping them in a '<div>' with the class 'table-responsive'.Example:
<div class="table-responsive">
<table class="table">
<!-- Table content here -->
</table>
</div> Breakpoint Specific Responsive Tables:
Bootstrap's responsive tables automatically adapt to different screen sizes. You can specify breakpoints for more control.Example:
<div class="table-responsive-sm">
<!-- Table content here -->
</div>
<div class="table-responsive-md">
<!-- Table content here -->
</div>
Still have some questions? Let's discuss.
CONTACT US