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.
We already know that Reboot
border-style of tables to
collapse and slightly
<caption> rendering and
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.
Bootstrap also offers a dark theme, the only thing you need to do is to
.table-dark class together with the
We can change the color of the head row by assigning the
.thead-dark class to the
<thead> element in which the head cells are placed.
And a dark head theme example:
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
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
The style works for dark themed tables as well.
I personally preffer bordered tables. We can add the border assigning the
.table-bordered class directly to the
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.
In long tables, it can look better to reduce the cell
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
- .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
element, but they're intended either for highlighting the background of entire
<tr> elements) or of particular cells (the
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.
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
.text-muted, the styles work
with links as well, however, we have to assign the class to them as well.
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
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
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.
- 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
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:
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
<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.
No one has commented yet - be the first!