Basic tables

See more about:

This page’s goals

By the end of this page, you should:

  • Be able to create a basic table.
  • Add a header and footer.

Basic tables

Here’s a table listing some university classes:

Table example

Figure 1. Table example

It’s hard to see the rows and columns, so let me add some lines.

Table example with borders

Figure 2. Table example with borders

You can see that the table has two rows and three columns. That’s what makes a table a table: rows and columns.

Here’s the code for the table (like Figure 1, with no borders).

<table>
  <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>
</table>

Figure 3. Code for a simple table.

The whole thing is surrounded with <table> tags: lines 1 and 12.

Each row is inside a <tr> tag pair. The first row is from lines 2 to 6, the second from lines 7 to 11.

Inside each <tr>, there is a <td> pair for each table cell. The “d” in <td> stands for “data.” There’s one <td> for each column.

Here’s some more code:

<table>
  <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>
  <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>
</table>

Figure 4. Another table

It looks like this in a browser:

Another table

Figure 5. Another table – rendered

Extra math points if you know what this is, or can figure it out. Hint: it’s part of a probability distribution.

Exercise: Color table

Create a table that looks like this:

Color table

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

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

Here’s the table of university classes again:

Table example

Figure 1 (again). Table example

It might help to add a header, so users know what the columns are. A footer can come in handy, too. How about this:

Table example with header and footer

Figure 6. Header and footer

Here’s the code:

<table>
  <thead>
    <tr>
      <th>Course code</th>
      <th>Title</th>
      <th>When offered</th>
    </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 7. Code for header and footer

The table is divided into three parts: the header, the body, and the footer. The header is from lines 2 to 8. The body is from lines 9 to 20. The footer is from lines 21 to 25.

The header uses the tag <th> instead of <td>. The h stands for “header,” as you might imagine. By default, browsers render <th> as centered and bold.

For the footer, I could have left out the colspan:

<tfoot>
  <tr>
    <td>Times subject to change.</td>
  </tr>
</tfoot>

Figure 8. Bad footer

It would have looked like this:

Bad footer rendered

Figure 9. Bad footer – rendered

The browser expanded all of the cells in the first column to fit the content in the footer. That gives too much space in the first two rows of the first column.

Instead, I did this:

<tfoot>
  <tr>
    <td colspan="3">Times subject to change.</td>
  </tr>
</tfoot>

Figure 10. Good footer

colspan="3" tells the browser that the first <td> covers three columns in the table. There’s enough room for “Times subject to change.” W00f!

Exercise: Color table with header and footer

Add a header and footer to your color table:

Color table with header and footer

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 create a basic table, and add a header and footer.

What now?

Let’s style the tables. We’ll give them a CSS makeover.


How to...

Lessons

User login

Log in problems? Try here


Dogs