Tables

Help Center HTML Tables

Now is when we deviate from the dry theory of HTML and into some of the more practical uses of HTML. All of the theory we’ve learned is still applicable, but it is not nearly as nuanced with tables.

Tables are familiar ways of presenting what we call “tabular data”. Tabular data is anything that might be presented using a spreadsheet. Whereas the HTML we’ve learned until now has been very linear (you start from the top and work down and don’t ever really pay attention to left and right), tables allow us to expand into the horizontal dimension.

Web designers used to use tables to provide a layout for their pages. Once you learn tables, you’ll probably want to do so as well. Tables are not meant to do that, and they do not do that well. A table-based layout quickly becomes difficult to use, nearly impossible to change, and is a nightmare for accessibility devices. Instead of tables for layouts, we use CSS, which allows us to separate our content from how it’s displayed (among many other reasons).

Motivation and Syntax

Tables allow us to present a lot of information quickly and without the need for a lot of explanation on the meaning of every bit of information. Say you wanted to give some information on the US presidents’ house-pets. You have similar information for each pet and would like to organize it into the following table:

US Presidents’ House-Pets (Abridged)
Pet Name Pet Species Owner
Socks Cat Bill Clinton
Mss Beazley Dog George W. Bush
India Cat
Checkers Dog Richard Nixon
King Timahoe Dog

There are 6 HTML tags that are used with tables. All of the tags used with tables are block-level tags. We said earlier on the Block-Level Tags page that all block-level tags expand out to the entire width of the containing element, and that is the case with all block-level tags unless modified by a style sheet.

It turns out that table tags have a default style sheet attached to them that allows them to be stacked side-by-side. There is actually more going on here (in fact, table tags are their own special breed of tags separate but related to block-level tags), but for all the theory we’ve laid down, you can treat table tags as behaving like block-level tags.

The first (most important?) tag for use with tables is unsurprisingly the <table> tag. When you are first learning tables, it is probably a good idea to add a border to your table using HTML. This really is the job of CSS, but we’ll let it slide this time. You can set the <table>’s border by giving an integer value to the tag’s border attribute, à la:

<table border="1"></table>

The <table> tag traditionally has three direct descendants

  1. <caption>, which is like a title for the table as a whole,
  2. <thead>, which defines a group of row or column headers (e.g. “Pet Name”, “Species”, and “Owner” from our earlier example), and
  3. <tbody>, which defines a group of cells that correspond to the <thead>.

Assembling our example table, we have:

<table border="1">
	<caption>US Presidents' House-Pets (Abridged)</caption>
	<thead></thead>
	<tbody></tbody>
</table>

This just sets up a table with a border, gives the reader information on what information the table is giving and then gives the information.

Tags as Commands and the Grid Model

It is very useful with tables to think of the HTML table tags as being more like commands to a computer. Our highlighter analogy still holds, but it doesn’t help us figure out some of the tricky bits of tables.

Fundamentally, a table is a collection of cells, each of which belongs to a certain set of rows and columns. It would seem like there should be <row> and <column> tags, but there are not.

What we do have is tags that some might think of as meaning “row” and “column”, but since we might have some “boxes” (also called “cells”) that occupy “space” in more than one row or column in the table, thinking of these tags as being like “row” and “column” isn’t very intuitive.

To solve this problem, we present the “grid model,” where we don’t even think of our tags as being like “highlighters” and instead think of them as being like commands to the computer, telling it how we want our table laid out.

To get the grid model started, we have to imagine a square grid of hollow circles and a “current row” arrow. The grid actually extends out to infinity in both directions, but we’ll only draw a 4x4 section of it. The arrow is initially above the first row of hollow circles.

arrow        
  false false false false
  false false false false
  false false false false
  false false false false

The hollow circles represent where your content might eventually go. The point here is that your content might occupy more than one circle. For example, the text “Richard Nixon” and “George Bush” in our example table are in cells that span two circles on adjacent rows.

What might be conceptually difficult here is that the hollow circles have no notion of size. The hollow circles just represent how your content all fits together.

In terms of commands, <table> means set up the grid of hollow dots and start the arrow above the first row. The related command, </table> means finish this grid — display it.

tr

The next command is <tr>. This command means move the arrow down one row and start that row. The related command is </tr> which means finish the current row.

After issuing a <tr> command, the grid model looks like:

arrow false false false false
  false false false false
  false false false false
  false false false false

So if we were to issue the following commands:

<table border="1">
	<tr>
	</tr>
</table>

…we’re saying:

  1. Set up the grid
  2. Move the arrow down to the first row of hollow circles and get ready to put content into that row.
  3. Finish the current row (i.e. the row the arrow is pointing to)
  4. Display the table

(Earlier we said you might want to set the <table>’s border attribute to something like 1 so you can more-easily see what’s going on.)

If you were to issue these commands in your document, you wouldn’t see anything. This confirms the notion that the hollow circles have no size. And since we haven’t indicated any content to go inside them, there is really nothing to display.

td and th

The command <td> means start putting content into the next hollow circle on the current row.

The command </td> means stop putting content into the hollow circle and fill it in so it is no longer hollow. Once a circle is “no longer hollow”, it is “occupied”, so to speak.

So if we were to issue the following commands:

<table border="1">
	<tr>
		<td>Socks</td>
	</tr>
</table>

…we’re saying:

  1. Set up the grid
  2. Move the arrow down to the first row of hollow circles and get ready to put content into that row.
  3. Put the content
    Socks
    into the first available hollow circle on the pointed-to row and then fill in that hollow circle.
  4. Finish the row
  5. Display the table

After issuing these commands, the grid model looks like:

arrow true false false false
  false false false false
  false false false false
  false false false false

If you were to issue these commands inside your document, you would see:

Socks

The td actually stands for “table data”. The th command is exactly like the the td command, except it indicates a heading and not data. We mentioned the <thead> and <tbody> tags earlier. Typically, most of your <th>s will be inside your <thead>, and most of your <td>s will be inside your <tbody>.

With that in mind, let’s construct the first row of our example table. The first row is all the table’s column headers, so the commands will be issued inside the <thead> tag. We’ll also put in the table’s <caption> information now.

<table border="1">
	<caption>US Presidents' House-Pets (Abridged)</caption>
	<thead>
		<tr>
			<th>Pet Name</th>
			<th>Pet Species</th>
			<th>Owner</th>
		</tr>
	</thead>
</table>

The grid model now looks like:

arrow true true true false
  false false false false
  false false false false
  false false false false

And this would be displayed like:

US Presidents’ House-Pets (Abridged)
Pet Name Pet Species Owner

Notice how the <th>s are bold? That’s our indication that we’re using <th> instead of <td>. The bold is something we could change with CSS if we wanted.

colspan and rowspan

This whole notion of treating HTML tags like commands would be much ado about nothing if it weren’t for the fact that cells can span multiple columns and rows. The grid model is really designed to help in working through complicated tables where data spans multiple rows and columns.

The td (and th) command means put the content up until “</td>” in the next available hollow circle on the current row, but if we want the content to reside in the next two cells, you need to indicate that the cell’s contents span two columns (i.e. two horizontally-adjacent circles in the grid model). The same thing might apply if we wanted the content to span multiple rows (that is, two vertically-adjacent circles in the grid model).

This is where the rowspan and colspan attributes of the td and th tags come in handy.

If you give a command like <td rowspan="3">, the <td> command is modified to mean start putting content into the next hollow circles on the current row and the next 2 rows.

If you give a command like <td colspan="13">, the <td> command is modified to mean start putting content into the next 13 hollow circles on the current row.

So the following commands:

<table border="1">
	<tr>
		<td rowspan="2">Spam</td>
		<td>Eggs</td>
	</tr>

…produce the following grid model:

arrow true true false false
  true false false false
  false false false false
  false false false false

We’ve added some colors here to make things more clear. The circles with the green outline are both occupied by the content Spam while the dot outlined in blue is occupied by the content Eggs.

If we now issue the <tr> command and move the arrow down a row:

  true true false false
arrow true false false false
  false false false false
  false false false false

… the first available hollow circle on the current row is now the second circle from the left. The left-most circle is filled in because it is “occupied” by Spam from the previous row.

So now when we now issue the command <td>Bacon</td>, the content is put in the next available hollow circle on the row with the arrow — the circle directly below the circle with the blue outline.

In full, this table is:

<table border="1">
	<tr>
		<td rowspan="2">Spam</td>
		<td>Eggs</td>
		</tr>
	<tr>
		<td>Bacon</td>
	</tr>
</table>

And the grid model looks like:

  true true false false
arrow true true false false
  false false false false
  false false false false

This is rendered by the browser as:

Spam Eggs
Bacon

Exploiting the Grid Model

Try reproducing the example table at the top of this page. The first step is to draw the table with pen and paper. Then tackle the table from the top-left to the bottom-right.

Here is the solution:

<table border="1">
	<caption>US Presidents' House-Pets (Abridged)</caption>
	<thead>
	<tr>
		<th>Pet Name</th>
		<th>Pet Species</th>
		<th>Owner</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Socks</td>
		<td>Cat</td>
		<td>Bill Clinton</td>
	</tr>
	<tr>
		<td>Mss Beazley</td>
		<td>Dog</td>
		<td rowspan="2">George W. Bush</td>
	</tr>
	<tr>
		<td>India</td>
		<td>Cat</td>
	</tr>
	<tr>
		<td>Checkers</td>
		<td>Dog</td>
		<td rowspan="2">Richard Nixon</td>
	</tr>
	<tr>
		<td>King Timahoe</td>
		<td>Dog</td>
	</tr>
	</tbody>
</table>

Our next topic is Forms.

Share this page Share