Styling tables

See more about:

Where are we?

You’ve learned how to create basic tables, with rows and columns. You know how to add headers and footers. But they don’t look great. Let’s fix that with CSS.

This page’s goals

By the end of this page, you should:

  • Be able to add spacing around tables and cells.
  • Be able to add borders and background colors.
  • Be able to style a table’s header and footer separately from its body.
  • Be able to add striping to a table using jQuery.

Add spacing

Here’s the university course list from earlier:

University courses

Figure 1. University courses

Here’s the code:

<table>
  <thead>
    <tr>
      <td>Course code</td>
      <td>Title</td>
      <td>When offered</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DOG 101</td>
      <td>Introduction to the modern dog</td>
      <td>MW 9:00am - 11:00am</td>
    </tr>
    <tr>
      <td>DOG 110</td>
      <td>Dogs in the ancient world</td>
      <td>M 6:30pm - 9:30pm</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Times subject to change.</td>
    </tr>
  </tfoot>
</table>

Figure 2. Code for university courses

The table is made up of boxes:

Table boxes

Figure 3. Table boxes

As you can see, the table is one giant box, with smaller boxes within it. Each box is a cell in the table.

Suppose I want to add more space around the table and the cells:

With spacing

Figure 4. With spacing

I’d change the code to:

...
<style type="text/css">
  #table1 {
    margin: 20px;
    border-spacing: 10px;
  }
  #table1 td {
    padding: 10px;
  }
</style>
...
<table id="table1">
...
</table>
...

Figure 5. Table spacing with CSS

Line 4 adds space around the edges of the entire table. Line 5 adds space around the outside of the cells. Line 8 adds spacing inside the cells, between the edges of the cells and their contents.

Borders and background colors

Suppose I wanted to make the table look like this:

Adding colors

Figure 6. Adding colors

Here’s some code:

...
<style type="text/css">
#table1 {
  color: #585858;
  background-color: #FFFFEE;
  border: 2px solid #683900;
  margin: 10px;
  border-spacing: 2px;
}
#table1 td {
  border: 1px dotted #AB5500;
  padding: 2px;
}
</style>

Figure 6. Code to add colors

There’s a lot you can do with colors and spacing. You can experiment with Somacon’s HTML and CSS Table Border Style Wizard.

When you use <thead>, <tbody>, and <tfooter> tags, you can easily give the header and footer of a table a different look from the footer.

Suppose I wanted to make this:

Header and footer styling

Figure 7. Header and footer styling

Here’s the entire page:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Table example</title>
    <style type="text/css">
      #table1 {
        color: #585858;
        border-spacing: 5px;
      }
      #table1 tbody td {
        background-color: #FFFFCC;
        padding: 4px;
      }
      #table1 thead td, #table1 tfoot td {
        color: #FFFFCC;
        background-color: #683900;
        padding: 4px;
      }
    </style>
  </head>
  <body>
    <table id="table1">
      <thead>
        <tr>
          <td>Course code</td>
          <td>Title</td>
          <td>When offered</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>DOG 101</td>
          <td>Introduction to the modern dog</td>
          <td>MW 9:00am - 11:00am</td>
        </tr>
        <tr>
          <td>DOG 110</td>
          <td>Dogs in the ancient world</td>
          <td>M 6:30pm - 9:30pm</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Times subject to change.</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Figure 8. Code for header and footer styling

The rule in lines 7 to 10 sets text color and border spacing for the entire table. Lines 11 to 14 styles the body of the table. Lines 15 to 19 style the header and footer, giving them the same style.

Look at the selector on line 15:

#table1 thead td, #table1 tfoot td

The comma (,) in the middle says that the rule should be applied to two things. The first thing is the set of <td> tags in the <thead> of the element with the id of table1 (remember: # says “look at the id attribute”). The second thing in the selector – after the comma – is the set of <td> tags in the <tfoot> of the element with the id of table1.

Exercise: Styling the color table

Style your color table so that it looks like this:

Styled color table

Upload your solution to your server. Enter the URL below.

(Log in to enter your solution to this exercise.)

Table striping

On the previous page, we had a table of numbers that looked like this:

Another table

Figure 9. Table o’ numbers

Suppose I wanted to make it look like this:

Striping

Figure 10. Striping

Easy to do with some jQuery magic. Here’s the code for the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Normal distribution</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">
      body {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 12px;
        color: #585858;
      }
      .probability_table {
        border-spacing: 4px;
        text-align: right;
      }
      .probability_table td {
        padding: 4px;
      }
      .probability_table thead {
        color: white;
        background-color: #585858;
      }
      .odd_row {
        background-color: #DDDDDD;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $(".probability_table tbody tr:odd").addClass("odd_row");
      });
    </script>
  </head>
  <body>
    <table class="probability_table">
      <thead>
        <tr>
          <td>a</td>
          <td>0.00</td>
          <td>0.01</td>
          <td>0.02</td>
          <td>0.03</td>
          <td>0.04</td>
          <td>0.05</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>0.0</td>
          <td>0.0000</td>
          <td>0.0040</td>
          <td>0.0080</td>
          <td>0.0120</td>
          <td>0.0160</td>
          <td>0.0199</td>
        </tr>
        <tr>
          <td>0.1</td>
          <td>0.0398</td>
          <td>0.0438</td>
          <td>0.0478</td>
          <td>0.0517</td>
          <td>0.0557</td>
          <td>0.0596</td>
        </tr>
        <tr>
          <td>0.2</td>
          <td>0.0793</td>
          <td>0.0832</td>
          <td>0.0871</td>
          <td>0.0910</td>
          <td>0.0948</td>
          <td>0.0987</td>
        </tr>
        <tr>
          <td>0.3</td>
          <td>0.1179</td>
          <td>0.1217</td>
          <td>0.1255</td>
          <td>0.1293</td>
          <td>0.1331</td>
          <td>0.1368</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Figure 11. Striping page

Let’s go over the code. Lines 35 to 85 are the HTML for the table. I gave the table a class of probability_table.

Renata
Renata

Can I ask a question?

Kieran
Kieran

Indeed!

Renata
Renata

In other examples, you gave tables ids. But you’ve given this one a class. Why?

Kieran
Kieran

Good question. Let me explain.

Renata noticed that in other cases, I’ve given tables ids, like this:

<table id="table1">

Why use class here? Because when I imagine a site that has number tables, there could be more than one number table on each page. Remember that I can only use a particular id once on a page. But I can use the same class many times. By using class, I can have one set of CSS rules that will apply to all of the number tables on a page.

This is how Webers think about their work. “Since there can be more than one number table on a page, how should I code it to reduce development costs, and make changes to the site easy and cheap?” Your employers and clients will thank you for thinking this way.

Let’s go back to the code. You can see that I’ve added <thead> (line 36) and <tbody> (line 47) tags, so I can style those parts separately. This table doesn’t need a separate footer.

Here’s how the header is colored:

.probability_table thead {
  color: white;
  background-color: #585858;
}

Figure 12. Header colors

The text color is white, and the background is gray.

Any color code that has the same values for red, green, and blue will show as gray. The lower the value you use, the darker the gray. So rgb(50, 50, 50) is a dark gray, and rgb(200, 200, 200) is a lighter gray.

The striping is done with jQuery. Let’s focus on that:

...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
...
  .probability_table td {
    padding: 4px;
  }
...
  .odd_row {
    background-color: #DDDDDD;
  }
</style>
<script type="text/javascript">
  $(document).ready(function() {
    $(".probability_table tbody tr:odd").addClass("odd_row");
  });
</script>
...

Figure 13. Striping with jQuery

Line 2 adds the jQuery code, fetching it from Google. You need to do this before you can do any jQuery magic.

Lines 14 to 16 do the striping. Remember that $(document).ready() runs when the page has been loaded. It contains one line:

$(".probability_table tbody tr:odd").addClass("odd_row");

The selector says “Find every element with a class of probability_table. Within them, find every <tbody> element. Then select all of the odd numbered <tr>s.”

Then, for all of the elements that the selector returns (which will be all the odd numbered rows in elements with a class of probability_table), add the class odd_row. This class is defined in lines 9 to 11. It sets the background color to gray.

Renata
Renata

Another question.

Kieran
Kieran

What’s that?

Renata
Renata

You have <thead> and <tbody> in the HTML. So you can style the table head and body separately.

Kieran
Kieran

Right.

Renata
Renata

But look at the rule at lines 5 to 7. It has a <td> in it, but no <thead> and <tbody>. What’s the deal?

Kieran
Kieran

Ooo, another good question.

The rule in lines 5 to 7 applies to all <td>s in the table, no matter where they are. If I were to change line 6 to, say, 10 pixels, all the cells in the table would change, no matter whether they were in the head or the body of the table. This helps me keep things consistent.

CC
CC

Hmm, let’s see if I have things straight.

Kieran
Kieran

OK.

CC
CC

Can we look at the output again?

Kieran
Kieran

OK. Here it is.

Striping

Figure 10 (again). Striping

CC
CC

The cell with the “a” in it, the one in the top left. It looks like it has a gray background, white text, and 4 pixels of padding. Is that right?

Kieran
Kieran

Yes.

CC
CC

But no single rule specifies that. So are the rules combined?

Kieran
Kieran

Yes! The font-family and font-size come from one rule. The text-align comes from another. The padding comes from yet another. And a different rule gives the colors.

This is normal in CSS work. The Weber figures out what aspects of a look go with what elements. The typeface is to be the same on the entire page, so it gets attached to the <body> tag. The text-alignment is to be the same for the entire table, so it gets attached to the <table> tag.

CC
CC

I can see how that would make the page easier to change. Like, change one number on line 6, and the padding changes in the entire table. For the header and the body. And the footer, if there was one.

Kieran
Kieran

Right!

CC
CC

But that’s a lot to think about.

Kieran
Kieran

It seems like that when you’re learning, but not when you actually do it. CSS fits naturally with the way we think about tables, with things (like cells) inside things (like rows) inside things (like a table body). It ends up being intuitive, once you’ve done it a few times.

Exercise: Striping the color table

Make your color table look like this:

Striping

Hint: odd or even?

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Summary

On this page, you learned how to:

  • Add spacing around tables and cells.
  • Add borders and background colors.
  • Style a table’s header and footer separately from its body.
  • Add striping to a table using jQuery.

W00f!

What now?

How about a table for your eMe?


How to...

Lessons

User login

Log in problems? Try here


Dogs