Tables
Bootstrap provides elegant styling for tables, making them more visually appealing and functional. This section covers how to use Bootstrap to style tables effectively.
Tables are a common way to present data in a structured format. Bootstrap enhances table styling, offering classes that provide responsive and visually attractive tables with minimal effort.
Basic Table Styling with Bootstrap
Bootstrap enhances the standard HTML tables with styles that are both functional and aesthetic. Let’s explore the basic styling options available.
Applying Basic Bootstrap Styles to Tables
The `.table` Class
– The most fundamental class for Bootstrap tables is `.table`. This class adds basic styling to your tables for improved readability and spacing.
Example:
– Outcome: This adds basic Bootstrap styling like subtle borders, rounded corners, and default padding to the table cells.
Importance of Table Structure
– Proper structure using `<thead>` and `<tbody>` tags ensures that Bootstrap styles are applied correctly and that the table is accessible.
– Using `<th>` elements within `<thead>` is recommended for defining column headers, enhancing both the semantic meaning and the styling.
Enhanced Customizing Table Styles
– While the `.table` class provides a good starting point, Bootstrap’s table styling can be extended with additional classes for more specific needs, which will be covered in the next sections.
Striped Rows
Bootstrap provides additional styling options to enhance the visual appeal and readability of tables. One such feature is the striped rows, which adds alternating background colors to table rows.
Applying Striped Rows in Bootstrap
The .table-striped Class
- To create striped rows in a Bootstrap table, use the .table-striped class in addition to the basic .table class.
- This class adds zebra-striping to any table row within the <tbody>, which helps to differentiate between rows for easier reading.
Bordered Table
Bootstrap’s styling options include the ability to add borders to tables, which helps to define the structure more clearly and enhances readability.
Applying Bordered Styling in Bootstrap
The .table-bordered Class
- The .table-bordered class adds borders to all sides of the table and its cells.
- This class can be used in conjunction with the basic .table class for a more defined look.
Hoverable Rows
Bootstrap’s .table-hover class adds a hover effect to table rows, improving the user experience by highlighting the row the mouse is over. This feature is particularly useful in tables with a lot of data, making it easier for users to follow along a specific row.
Applying Hoverable Rows in Bootstrap
The .table-hover Class
- Add the .table-hover class along with the .table class to enable a hover state on the table rows within the <tbody>.
- This class changes the background color of a row when the user hovers over it.
Condensed Table
Bootstrap offers a .table-sm class to make tables more compact. This class reduces the padding inside table cells, making the table more condensed and suitable for displaying large datasets or for use in areas with limited space.
Applying Condensed Table Styling in Bootstrap
The .table-sm Class
- The .table-sm class, when combined with the .table class, decreases the padding in table cells, resulting in a more compact table.
- This class can be particularly beneficial for tables that need to display a lot of data without taking up too much space.
Responsive Tables
To make a table responsive in Bootstrap, wrap it within a .table-responsive container. This container adds horizontal scrolling to the table on smaller screens, preventing the table from overflowing its parent container.
Explanation: The `.table-responsive` class makes the table horizontally scrollable on smaller devices, ensuring that the content is accessible without compromising the layout.
Colorful Tables
Bootstrap provides contextual classes that allow you to apply different colors to elements. You can use these classes to colorize your table rows or cells
Contextual Classes
.table-primary: Blue background.
.table-secondary: Gray background.
.table-success: Green background.
.table-danger: Red background.
.table-warning: Yellow background.
.table-info: Light blue background.
.table-light: Light gray background.
.table-dark: Dark gray background.
For example, to apply a blue background to a table row, you can add the class table-primary to the <tr> element:
Here is another example
Explanation: Using classes like `.table-success`, you can add background colors to your tables for added emphasis or to reflect data status.
