Styling HTML Tables with Bootstrap: A Comprehensive Guide
Learn how to create visually appealing and responsive tables using Bootstrap's styling classes. This tutorial covers basic table styles, adding zebra stripes, customizing borders, and creating responsive tables, enhancing the presentation of tabular data in your web projects.
Styling Tables with Bootstrap
Bootstrap provides a range of classes to style HTML tables, making them visually appealing and responsive. This guide shows various table styles and customizations.
Basic Bootstrap Table
The simplest Bootstrap table uses the `.table` class, adding light padding and horizontal dividers.
Striped Rows
Add zebra stripes using the `.table-striped` class.
Bordered Table
Add borders to all sides of the table and cells using the `.table-bordered` class.
Hover Effect
Enable a hover effect on rows using the `.table-hover` class.
Condensed Table
Make the table more compact with `.table-condensed`, reducing cell padding.
Contextual Classes
Add color to rows or cells using contextual classes. These provide visual cues:
| Class | Description |
|---|---|
.table-active |
Applies hover color. |
.table-success |
Indicates success. |
.table-info |
Indicates information. |
.table-warning |
Indicates a warning. |
.table-danger |
Indicates danger. |
Responsive Tables
Use the `.table-responsive` class to make tables scrollable on smaller screens (under 768px wide).
Bootstrap 4 Table Styles
Dark Tables
Use `.table-dark` for a dark background table. Combine with `.table-striped` or `.table-hover` for additional styles.
Contextual Classes (Bootstrap 4)
Bootstrap 4 offers more contextual classes for tables, rows, and cells: `.table-primary`, `.table-success`, `.table-info`, `.table-warning`, `.table-danger`, `.table-active`, `.table-secondary`, `.table-light`, and `.table-dark`.
Test Bootstrap 4 Contextual Classes Now
Table Header Colors
Control header background color with `.thead-dark` (dark) and `.thead-light` (light).
Small Tables
Use `.table-sm` to create a smaller table with reduced padding.