The story so far

You know how to make a subdomain, and upload files there. You know how to use a few HTML tags, for headings, paragraphs, and lists.

You also need to know how to make tables. They're important in CRUD web apps.

Basic tables

Tables are made up of rows and columns. Here's a table listing some university classes:


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


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.

    <td>DOG 101</td>
    <td>Introduction to the modern dog</td>
    <td>MW 9:00am - 11:00am</td>
    <td>DOG 110</td>
    <td>Dogs in the ancient world</td>
    <td>M 6:30pm - 9:30pm</td>

The whole thing is surrounded with a <table> tag. Each row is inside a <tr> tag pair. 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:


It looks like this in a browser:

Another table

Header and footer

Here's the table of university classes again:


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

Header and footer

Here's the code. The table is divided into three parts: the header, the body, and the footer.

  1. <table>
  2.   <thead> Header starts
  3.     <tr>
  4.       <th>Course code</th>
  5.       <th>Title</th>
  6.       <th>When offered</th>
  7.     </tr>
  8.   </thead> Header ends
  9.   <tbody> Body starts
  10.     <tr>
  11.       <td>DOG 101</td>
  12.       <td>Introduction to the modern dog</td>
  13.       <td>MW 9:00am - 11:00am</td>
  14.     </tr>
  15.     <tr>
  16.       <td>DOG 110</td>
  17.       <td>Dogs in the ancient world</td>
  18.       <td>M 6:30pm - 9:30pm</td>
  19.     </tr>
  20.   </tbody> Body ends
  21.   <tfoot> Footer starts
  22.     <tr>
  23.       <td colspan="3">Times subject to change.</td>
  24.     </tr>
  25.   </tfoot> Footer ends
  26. </table>

The header uses the tag <th> instead of <td>.

    <th>Course code</th>
    <th>When offered</th>

By default, browsers render <th> as centered and bold. You can change that with CSS.

Here's the footer:

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

The colspan tells the footer's <td> to take up three columns, so it stretches across the entire row as needed:

Header and footer

Without the colspan

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

… the table would look like this:

Not so good footer

The browser makes the first column too wide, so it can fit the text "Times subject to change."

Putting the colspan in the footer…

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

… makes the table look more natural:

Header and footer


The tables you've seen so far are ugly. Don't worry about it. Later, you learn how to make them look better.

Exercise: Calm worms
Use the <table> tag to make a page like this:


Use any other tags you need.

Make a directory in your littlehtml subdomain for this exercise. Upload your file to the directory. Submit the URL.

(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)


  • The <table> tag…, er, makes tables. They have rows, and columns.
  • You can add headers, and footers.