Hour 8. Styling Tables
What You’ll Learn in This Hour:
How Bootstrap styles tables
The Bootstrap table classes
How Bootstrap panels interact with tables
How Bootstrap makes tables responsive
Tables are an important part of web pages because they provide a way to display tabular data effectively. But tables can be difficult to handle responsively. Bootstrap provides lots of styles and classes to create data tables that look nice and are responsive.
Basic Tables
Bootstrap applies three styles to HTML tables automatically:
background-color: transparent;—The background color is transparent.
border-spacing: 0;—The border spacing is set to zero (0).
border-collapse: collapse;—The borders are collapsed.
Bootstrap styles other table tags, including <caption>, <th>, and <td>.
To get the most out of Bootstrap tables, you should get in the habit of using the optional <thead>, <tbody>, and <tfoot> tags when appropriate, and always use the .table class on your tables. This will define the width of your table to 100% of the screen and is required to use some of the advanced classes discussed later in this hour.
Code Listing 8.1 shows a standard Bootstrap table in HTML.
LISTING 8.1 A Basic Bootstrap Table
<table class="table">
<caption>Contact Information</caption>
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>URL</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jennifer Kyrnin</td>
<td>Chief Dandylion Officer</td>
<td>http://htmljenn.com/</td>
<td>[email protected]</td>
</tr>
<tr>
<td>McKinley</td>
<td>Dandelion Observation Officer</td>
<td>http://responsivewebdesignin24hours.com/mckinley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Rambler</td>
<td>Chief Taste Tester</td>
<td>http://responsivewebdesignin24hours.com/rambler</td>
<td>[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><p>McKinley and Rambler are a dog and a
horse, respectively.</p></td>
</tr>
</tfoot>
</table>
If you forget the .table class, your table can appear very crowded and difficult to read. Figure 8.1 shows the same table, both with and without the .table class.
Bootstrap Table Classes
Bootstrap provides more styling of tables than just the default table styles. There are several classes you can add to your tables to add more features that more sophisticated tables use:
.table-striped—Adds zebra-striped rows within the <tbody> tag of your table.
.table-bordered—Adds borders around all sides (not just the bottom) of the table and between the rows and columns.
.table-hover—Enables a hover state on rows within the <tbody>.
.table-condensed—Cuts the padding in half to make the table more compact.
You add these classes to the <table> tag, as in Listing 8.2.
LISTING 8.2 Table Classes in Bootstrap
<table class="table table-bordered table-striped table-hover
table-condensed">
You can use any combination of the classes to adjust your table how you like. Figure 8.2 shows a table using all the fields.
Caution: Striped Rows Don’t Work in Internet Explorer 8
The row stripes are added to the rows with the :nth-child selector in CSS. However, Internet Explorer does not support the :nth-child selector. If you really need this effect in Internet Explorer 8, you can check out the JavaScript utility Selectivizr (http://selectivizr.com/).
Try it Yourself: Adjust the Zebra Stripes on Your Table
1. Open your web page in your HTML editor.
2. Make sure your table has both the .table and .table-striped classes on it.
3. Add a style sheet to the <head> of the document.
4. Add the style rule .table-striped>tbody>tr:nth-of-type(odd).
5. Change the background color with the style property background-color: #d6adfa;.
6. Make sure the font color works with the background color. If the contrast doesn’t work, change it with the color property.
LISTING 8.3 Change the Zebra Stripe Colors
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Bootstrap Table Classes</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5
elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page
via file:// -->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #d6adfa;
}
</style>
</head>
<body>
<div class="container">
<p>
<table class="table table-striped">
<caption>Contact Information</caption>
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>URL</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jennifer Kyrnin</td>
<td>Chief Dandylion Officer</td>
<td>http://htmljenn.com/</td>
<td>[email protected]</td>
</tr>
<tr>
<td>McKinley</td>
<td>Dandelion Observation Officer</td>
<td>http://responsivewebdesignin24hours.com/mckinley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Rambler</td>
<td>Chief Taste Tester</td>
<td>http://responsivewebdesignin24hours.com/rambler</td>
<td>[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><p>McKinley and Rambler are a dog and a
horse, respectively.</p></td>
</tr>
</tfoot>
</table>
</p>
</div>
</body>
</html>
You can also use contextual classes on your tables to add meaning to the cells or rows. You can add the following classes:
.active—Applies the hover color
.danger—Applies a red color to indicate a dangerous or negative action
.info—Applies a blue color to indicate information or neutral action
.success—Applies a green color to indicate a successful or positive action
.warning—Applies a yellow color to indicate a warning or possible negative action
Add the class to a row of the table like this:
<tr class="warning">
Or to a specific cell on either the <th> or <td> tags:
<td class="success">
Remember that these classes change only the background color of the table elements. They do not provide any meaning. To make these accessible, you should make sure that the content conveys the meaning along with the color. For example:
<td class="warning">Warning: lorem ipsum sit dolor...</td>
You also can use the .sr-only class to define text that displays only on screen readers. For example:
<td class="warning"><span class="sr-only">Warning: </span>
lorem ipsum sit dolor...</td>
This class hides information used by screen readers.
Panels with Tables
In Hour 6, “Labels, Badges, Panels, Wells, and the Jumbotron,” you learned how to add panels to your Bootstrap page. Panels combine with tables to make a more seamless feature on the page.
Any non-bordered table that is included in a panel will integrate into the panel, as in Figure 8.4. Listing 8.4 shows how simple the HTML is for this. If there is a .panel-body, an extra border will be added above the table.
LISTING 8.4 A Table in a Panel
<div class="panel panel-default">
<div class="panel-heading">
Learn More About Our Company
</div>
<div class="panel-body">
Dandelions are more than our business, they are our passion!
</div>
<table class="table">
<caption>Contacts</caption>
<thead>
<tr>
<th>Name</th>
<th>Title</th>
<th>URL</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jennifer Kyrnin</td>
<td>Chief Dandylion Officer</td>
<td>http://htmljenn.com/</td>
<td>[email protected]</td>
</tr>
<tr>
<td>McKinley</td>
<td>Dandelion Observation Officer</td>
<td>http://responsivewebdesignin24hours.com/mckinley</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Rambler</td>
<td>Chief Taste Tester</td>
<td>http://responsivewebdesignin24hours.com/rambler</td>
<td>[email protected]</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><p>McKinley and Rambler are a dog and a
horse, respectively.</p></td>
</tr>
</tfoot>
</table>
</div>
If there is no .panel-body, then the heading will flow straight into the table.
Responsive Tables
Tables are very difficult to make responsive. They often are too wide for small screens, and many small screens don’t scroll well horizontally.
Bootstrap provides a fix for that with the .table-responsive class. To make a table responsive, you should surround it with another element with the .table-responsive class, as in Listing 8.5.
LISTING 8.5 Make a Bootstrap Table Responsive
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Figure 8.5 shows how a table scrolls on an iPhone.
Caution: Bootstrap Responsive Tables Use overflow-y: hidden
The CSS property overflow-y: hidden tells the browser to clip any content that goes beyond the top or bottom edges of the table space. This can clip off dropdown menus or other widgets. So be sure to test any dynamic content you have inside responsive tables.
Bootstrap provides a basic way to make tables responsive. But several other methods are available that you can use that don’t require an additional HTML tag. I cover these in more detail in my book Sams Teach Yourself Responsive Web Design in 24 Hours.
Summary
This hour covered how Bootstrap styles tables. It covered the basic features of Bootstrap tables. It also covered the special classes that let you dress up your tables. Table 8.1 describes all the CSS classes covered in this hour.
This hour also covered how panels adjust to contain tables, as well as a basic way to make your tables responsive.
Workshop
The workshop contains quiz questions to help you process what you’ve learned in this hour. Try to answer all the questions before you read the answers.
Q&A
Q. You mention that there are other ways to make tables responsive, but I can’t imagine any. What are they?
A. There are several ways you can make tables more responsive. You can hide the less critical rows or columns. You can rearrange the content so that the rows display separately, and you can resize the table cells.
Q. I never use the <tbody>, <tfoot>, and <thead> tags. Are they absolutely required for Bootstrap tables?
A. The <tbody> tag is required if you want to use any of the classes because they are applied only to the rows in the body. The <thead> and <tfoot> tags are not required.
Quiz
1. What happens if you don’t use the .table class on your table?
a. The table still displays with Bootstrap styles.
b. The table displays without any styles.
c. The table displays with borders and colors.
d. The table displays condensed and borderless.
2. What does .table-striped do?
a. Adds borders around all the cells
b. Adds colors to all the cells
c. Adds colors to every other row to create a zebra-striped table
d. Does nothing
3. What does the .table-bordered class do?
a. Adds borders around all the cells
b. Adds borders between columns
c. Adds borders between rows
d. Does nothing
4. What does the .table-hover class do?
a. Outlines cells when they are moused over
b. Adds a background color to rows when they are moused over
c. Changes the text color on cells when they are moused over
d. Does nothing
5. What does the .table-condensed class do?
a. Removes the cell padding on the table
b. Cuts the cell padding in half on the table
c. Makes the font size smaller in the table
d. Reduces the width of the table by 50%
6. True or False: You cannot use .table-condensed with .table-striped.
7. What are table contextual classes in Bootstrap?
a. Classes that add extra information to the table cells.
b. Classes that change the color of the text.
c. Classes that change the background color of table cells.
d. There is no such thing in Bootstrap.
8. Which of these is a contextual class for tables?
a. .hover
b. .bg-info
c. .text-success
d. .warning
9. How does Bootstrap display tables in panels?
a. The table integrates seamlessly into the panel, and a border is added to the top if there is a .panel-body.
b. The table is given a new background color to make it fit in the panel.
c. The table is minimized to fit in the panel.
d. Bootstrap doesn’t do anything special to tables in panels.
10. How do you make a Bootstrap table responsive?
a. Add the .table-responsive class to the table.
b. Add the .responsive class to a container <div> around the table.
c. Add the .table-responsive class to a container <div> around the table.
d. You do nothing; they are responsive by default.
Quiz Answers
1. d. The table displays condensed and borderless.
2. c. Adds colors to every other row to create a zebra-striped table.
3. a. Adds borders around all the cells.
4. b. Adds background colors to rows when they are moused over.
5. b. Cuts the cell padding in half on the table.
6. False. You can use all the table classes together on one table.
7. c. Contextual classes change the background color on table rows.
8. d. .warning is a table contextual class.
9. a. The table is integrated seamlessly into the panel, with an extra top border for panels with a .panel-body.
10. c. Add the .table-responsive class to a container <div> around the table.
Exercises
1. Add a data table to your Bootstrap web page. Add some extra classes to the table to make it look more impressive.
2. Try adding a panel heading with no panel body with a table inside. This is a great way to create a nice-looking heading for your tables.