Lesson 5 - Bootstrap - Tables

In the previous lesson, Bootstrap - Images, we discussed images. The last of the basic HTML elements we still haven't styled in Bootstrap yet, are tables. That's going to be the topic of today's CSS tutorial.

.table class

We already know that Reboot sets border-style of tables to collapse and slightly changes the <caption> rendering and text-align. For further styling, we have to assign the .table class explicitly since tables are used widely by different widgets which don't have to be aware of Bootstrap. The .table class adds especially vertical lines separating the table rows.

Dark theme

Bootstrap also offers a dark theme, the only thing you need to do is to assign the .table-dark class together with the .table class.

Head themes

We can change the color of the head row by assigning the .thead-light or .thead-dark class to the <thead> element in which the head cells are placed.

And a dark head theme example:

Stripes

It's very readable when we make the table striped by alternating between dark and light background of the rows. We can do this by assigning the .table-striped class directly to the <table> element. In Bootstrap, there usually applies a convention saying that a class starts with the name of the element it modifies. That's why we're going to assign every other classes starting with .table- to the <table> element.

The style works for dark themed tables as well.

Border

I personally preffer bordered tables. We can add the border assigning the .table-bordered class directly to the <table> element again.

Active row

In large tables with many values, it can be sometimes difficult to read the values on a particular row, even with the striping. We can improve readability by adding the .table-hover class, highlighting the row when the cursor is hovered over. Again, the style works for dark themed tables as well, let's make the example on such a table this time.

Narrow rows

In long tables, it can look better to reduce the cell padding by half. The Twitter guys prepared the .table-sm class for us to do so. It also works for dark-themed tables as well.

The cell background

For the colors we're already familiar with, we can use classes of the same names and with the table- prefix. Those are the following classes:

• .table-primary - The primary color, blue by default
• .table-secondary - The secondary color, gray by default
• .table-success - Green for success messages, discounts, confirmation buttons, ...
• .table-danger - Red for errors, etc.
• .table-warning - Yellow for highlighting important messages, tips, ...
• .table-info - Neutral blue for neutral highlighting
• .table-light - Light gray
• .table-dark - Almost black
• .table-white - Pure white

Notice that the colors are a bit lighter than the standard ones so that text was nicely readable.

We don't exceptionally assign these classes to the <table> element, but they're intended either for highlighting the background of entire rows (the <tr> elements) or of particular cells (the <td> and <th> elements).

These light styles are not suitable for dark themed tables. In case we use the dark theme, we can make use of the standard color utility classes, see below.

Color utility classes

Another utility classes we're going to introduce are universal classes for coloring.

Text color

If we need to change the text color, we're provided with the following classes:

• .text-primary - The primary color, blue by default
• .text-secondary - The secondary color, gray by default
• .text-success - Green for success messages, discounts, confirmation buttons, ...
• .text-danger - Red for errors, etc.
• .text-warning - Yellow for highlighting important messages, tips, ...
• .text-info - Neutral blue for neutral highlighting
• .text-light - Light gray
• .text-dark - Almost black
• .text-white - Pure white

Except .text-white and .text-muted, the styles work with links as well, however, we have to assign the class to them as well.

Background color

For background colors, there are classes with the "bg-" prefix in Bootstrap:

• .bg-primary - The primary color, blue by default
• .bg-secondary - The secondary color, gray by default
• .bg-success - Green for success messages, discounts, confirmation buttons, ...
• .bg-danger - Red for errors, etc.
• .bg-warning - Yellow for highlighting important messages, tips, ...
• .bg-info - Neutral blue for neutral highlighting
• .bg-light - Light gray
• .bg-dark - Almost black
• .bg-white - Pure white

A gradient support is also provided, but turned off by default so we're not going to bother with it. Together with the coloring classes, Bootstrap also recommends to provide alternative text hidden by the .sr-only class. This text will take effect on e.g. voice readers and the meaning of the highlighting will be preserved in the audio version of the website as well.

To return to tables again, if you ever needed to color certain row of a dark themed table, you can use a class for background coloring with the bg- prefix.

Responsive tables

To achieve truly responsive tables is, unfortunately, problematic. Since tables rows can't be broken, we should use tables only at places where we need to show the user data which have to be rendered precisely on unbreakable rows. Using a table e.g. for a photo gallery would be a bad solution, since photos in a row could be wrapped with no harm and that's why we should rather use a grid for this purpose (see further in the course).

There are only 2 ways to reduce the table size on mobile devices.

• JavaScript - We'll break the table in a way that on each row there would be just a single title and a single value. The individual rows would become columns. In that case, we'd have to separate them visually to distinguish where a new "row" starts. This solution is very clumsy.
• Scrollbar - The other solution is to simply add a scrollbar to the table. The table will be cropped on mobile devices and we'll be able to scroll through the contents in the cropped area. This solution is fully functional and very simple, the only disadvantage is that it doesn't look very well. Bootstrap has decided to use this solution.

We create a responsive table by assigning the .table-responsive class to the <table> element. Since scrollbars don't look very attractive, we can choose from which breakpoint they will show up. We can use the following classes to do so:

• .table-responsive-sm
• .table-responsive-md
• .table-responsive-sm

There is no need to assign .table-responsive as well.

If you reduce the size of your browser screen, the scrollbar will be added to the following sample table.

By this lesson, we've finished the main part of Bootstrap for styling common HTML elements. Next, we're going to discuss components which are often created using the <div> or <span> elements and which allow us to use very useful features that HTML doesn't provide by default at all. In the next lesson, Bootstrap - Buttons, we'll talk about notifications and tags.