The way you organize content on your website is important.
There’s a range of design strategies you can implement to make your content more readable. You can use images and/or whitespace to break up large chunks of text. You can use typography, changing the font-size or spacing between words or otherwise arranging text on the page. You can also use tables.
Tables are effective for organizing and presenting content in a way that’s easy for readers to scan and to absorb large amounts of data quickly.
Across the HubSpot blogs, you’ll sometimes see tables that summarize the key takeaways of blog posts. Check out the table at the end of this Wix vs. WordPress post, for example.
While this table was built in CMS Hub, HubSpot's CMS, you can create similar tables from scratch with HTML and CSS. However, without using a mobile-first framework, it's hard to get these tables to look good on both desktop and mobile devices.
That's why, in this post, we’ll walk through how to create and style a simple table element in the CSS framework Bootstrap CSS, so you can add responsive tables to pages and blog posts on your site. Let’s get started.
Bootstrap Table CSS
Like many things in Bootstrap, creating a table is easy. Simply add the class .table to any <table> element in the body section of your index.html file. You can then customize the table using modifier classes or custom styles.
Before we talk about customization, let’s start with the most basic table markup. Let’s say you want to create a table listing some periodic elements. You want it to have four columns and three rows so that it looks something like this:
To create this Bootstrap table, you’d use the following HTML:
<table class="table">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Atomic Weight</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hydrogen</td>
<td>H</td>
<td>1.008</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Helium</td>
<td>He</td>
<td>4.003</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
</tr>
</tbody>
</table>
Notice that this snippet can be broken down into two major parts: the <thead> and <tbody> sections (ie. the table head and table body sections). The four columns are defined in the <thead> section while the three rows are in the <tbody> section. Each of these sections are then wrapped in the parent <table> element.
You can customize the table by adding modifier classes or custom styles to the parent or child elements. We’ll look at how in the examples below.
Bootstrap Table CSS Examples
Below are some examples that demonstrate how you can use and extend the table element with Bootstrap. Each example will show the different modifier classes needed. Click any of the links below to jump to the corresponding example.
- responsive Bootstrap table
- dark Bootstrap table
- Bootstrap table with colored head
- Bootstrap table with striped rows
- Bootstrap table with hoverable rows
- bootstrap table with colored rows
- bordered Bootstrap table
1. Responsive Bootstrap Table
Bootstrap's mobile-first approach is one of the most compelling reasons to use this framework to build your site, rather than building it from scratch. It makes the process for creating responsive elements, including tables, much simpler.
To create tables that are responsive across all viewports (meaning, they can be scaled horizontally with ease), you just need to wrap the .table class with the .table-responsive class. That means, rather than add the “table-responsive” after the .table class, you need to place the whole table element in a <div> element that’s modified by the .table-responsive class. See the effect below.
To create the responsive table above, use the following code. (You might notice I’ve added some dummy rows and columns to show the effect of the .table-responsive class more clearly.)
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Atomic Weight</th>
<th scope="col">-</th>
<th scope="col">-</th>
<th scope="col">-</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hydrogen</td>
<td>H</td>
<td>1.008</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Helium</td>
<td>He</td>
<td>4.003</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
<td>N/A</td>
<td>N/A</td>
<td>N/A</td>
</tr>
</tbody>
</table>
</div>
You can also make tables responsive to different specific viewports, rather than all viewports, by picking a maximum breakpoint at which your table can scroll horizontally.
For example, if you’d like your table to scroll horizontally up to 576px, then you’d use the .table-responsive-sm modifier class. 768px, 992px, and 1120px are the respective max-width breakpoints for .table-responsive{-md|-lg|-xl}.
2. Dark Bootstrap Table
The default color of the Bootstrap table class might not match your branding or color scheme. In that case, you can use the .table-dark modifier class to invert the colors so that the background color is dark while the text is light. It will look something like this:
To create this table, simply add “table-dark" after the .table class. You can see this addition in the first line of code, which is the only difference between this markup and the basic table markup.
<table class="table table-dark">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Atomic Weight</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hydrogen</td>
<td>H</td>
<td>1.008</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Helium</td>
<td>He</td>
<td>4.003</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
</tr>
</tbody>
</table>
3. Bootstrap Table with Colored Head
If you’d like to only change the color of the head of the table and leave the body as is, then you can use the modifier classes .thead-dark or .thead-light. .thead-dark will make it dark gray (as shown in the example below) while .thead-light will make it light gray.
Whereas in the previous example you applied the modifier class to the <table> element, you’ll apply one of these classes to the <thead>s. You can see this change in the second line of the code below:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">No.</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Atomic Weight</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hydrogen</td>
<td>H</td>
<td>1.008</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Helium</td>
<td>He</td>
<td>4.003</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
</tr>
</tbody>
</table>
4. Bootstrap Table with Striped Rows
Let’s say you want to change the style of the table body section, not the head section. Using the .table-striped modifier class, you can add color to every other row within the <tbody> section. This will give it a “zebra-striping” effect, shown below.
To create this table, simply add “table-striped" after the .table class. This is virtually the same process for creating a dark table. Here’s the code:
<table class="table table-striped">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Atomic Weight</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hydrogen</td>
<td>H</td>
<td>1.008</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Helium</td>
<td>He</td>
<td>4.003</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
</tr>
</tbody>
</table>
5. Bootstrap Table with Hoverable Rows
Now let’s say you’d like the style of the rows to change only when a visitor hovers over them. Using the .table-hover modifier class, you can enable a hover state on table rows within a <tbody> section. You can see the effect in the demo below.
To create this table, simply add “table-hover" after the .table class. This is virtually the same process for creating a dark or striped table. Here’s the code:
<table class="table table-hover">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Atomic Weight</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hydrogen</td>
<td>H</td>
<td>1.008</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Helium</td>
<td>He</td>
<td>4.003</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
</tr>
</tbody>
</table>
6. Bootstrap Table with Colored Rows
With Bootstrap, you can also change the color of rows or cells using contextual classes. To do, you can apply the following classes to <tr> elements (rows) or <td> elements (individual cells):
- Table-primary
- Table-secondary
- Table-success
- Table-danger
- Table-warning
- Table-info
- Table-light
- Table-dark
I can apply any of the above classes to different rows to make my table look something like:
Here’s the code to create this multi-colored table.
<table class="table">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Atomic Weight</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<th scope="row">1</th>
<td>Hydrogen</td>
<td>H</td>
<td>1.008</td>
</tr>
<tr class="table-danger">
<th scope="row">2</th>
<td>Helium</td>
<td>He</td>
<td>4.003</td>
</tr>
<tr class="table-success">
<th scope="row">3</th>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
</tr>
</tbody>
</table>
7. Bordered Bootstrap Table
If you’d like to have borders on all sides of the table rather than just the horizontal dividers, then you can use the .table-bordered modifier class.
To create this table, simply add “table-bordered" after the .table class. This is virtually the same process for creating a dark table, striped table, or table with hoverable rows. Here’s the code:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Atomic Weight</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hydrogen</td>
<td>H</td>
<td>1.008</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Helium</td>
<td>He</td>
<td>4.003</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Lithium</td>
<td>Li</td>
<td>6.941</td>
</tr>
</tbody>
</table>
If you’d like to remove all borders, then you can use the .table-borderless modifier class.
Adding Bootstrap Tables to Your Site
Tables can help organize large amounts of data on your site in a way that’s easy to read and digest for your visitors. Any of the table examples described above can be added and customized to your unique Bootstrap site. You’ll just need some familiarity with HTML and CSS to get started.
