Basic Table Construction

As I mentioned in the introduction, tables were originally designed to create spreadsheet-like grids of scientific, technical, or monetary data. Here are a couple of simple examples:

Fruits	Vegetables	Starches
Peach	Broccoli	Bread
Apple	Asparagus	Potato
Cantelope	Zucchini	Pasta

Tables, as you can see, form grids of cells, each cell containing some sort of content. Tables are always defined in the HTML code using ROWS of cells, never columns; I'll show you in a minute how that works. You must carefully plan your table to ensure that you have the correct number of cells in every row, so that your table will display in even columns rather than in a big mess. Generally, tables MUST be pre-planned; you are probably not going to be able to create a decent table if you just make it up as you go along.

There are four main tags associated with table construction: TABLE, TR (Table Row), TH (Table Header), and TD (Table Data). All of these tags MUST close.

Tag: TABLE
Description: Makes a container for a table.

The TABLE tag makes a container for an entire table. All rows and cells of a given table must reside within a single pair of opening and closing TABLE tags.

Tag: TR (Table Row)
Description: Defines a row within a table.

The TR tag creates a container for all the cells in a single row of a table. There must be one set of opening and closing TR tags for each row in a table. TR may only be declared inside the confines of a TABLE tag.

Tag: TH (Table Header), TD (Table Data)
Description: Defines a cell within a row of a table.

Each cell in a table must be defined using either a TH or TD tag. For today's professional purposes, TH and TD are interchangeable in all respects except: TH causes its content to be BOLD text and CENTER aligned; TD causes its content to be NORMAL text and LEFT aligned.

In the examples given above, cells which contain BOLD text and have CENTER alignment are marked with TH tags, while cells which contain NORMAL text and have LEFT alignment are marked with TD tags. TH tags are supposed to mark "headers" of a table, namely, the words at the top or side of a table which refer to the content of the cells in that row or column. TD tags are supposed to mark ordinary "data" in a table. Despite this differentiation, however, TH and TD tags may be used interchangeably, containing any content you desire at any position in the table; they don't have to be used for "headers" or "data" specifically.

Procedure for creating tables:

1. Design your table; draw it on paper.
2. In the BODY of your HTML code, lay in one set of opening and closing TABLE tags.
3. Place one set of opening and closing TR tags inside your TABLE.
4. Create one set of TH or TD tags for each cell in your row, placed within the opening and closing TR tags.
5. Fill in your content for the individual cells.
6. Repeat steps 3 through 6 until table is completed.

Walkthrough:

I am going to create a very simple table, demonstrating all of the steps involved. I encourage you to follow along in either BBEdit or HomeSite, if you wish.

Step One: Design your table; draw it on paper, if you like. Here's the design we're using for this walkthrough:

This table has two rows, with each row containing two cells. The first cell in the first row contains the number 1, and the second cell in the first row contains the number 2. The first cell in the second row contains the number 3, and the last cell in the second row contains the number 4. These numbers are just plain old typed numbers, they have no special significance; I'm using them as filler content, so that it's clear to you which cell is which. Remember that we need to lay out our HTML left-to-right, then top-to-bottom, when creating our code.

Step Two: Lay TABLE tag into the BODY of your HTML document.

Place the pair of opening and closing TABLE tags into your HTML page.

Example:

<table>

</table>

Step Three: Lay in your first row using TR.

Example:

<table>
<tr>

</tr>
</table>

Step Four: Lay your two cells into your TR using either TH or TD.

For this demonstration, I'm going to use TH because it centers the text and makes it bold, which is what I wanted in my drawing.

Example:

<table>
<tr>
<th></th>
<th></th>
</tr>
</table>

Step Five: Add the content to your first two cells.

Example:

<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
</table>

Remember: that these numbers are just ordinary text characters; the numbers have no special significance in terms of the table code. The cells must contain some content, so I'm using these numbers.

Step Six: Insert the next pair of opening and closing TR tags after the first row to make your second row.

Example:

<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>

</tr>
</table>

Step Seven: Insert your final two TH cells into your TR.

Example:

<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<th></th>
<th></th>
</tr>
</table>

Step Eight: Add the content to your final two cells.

Example:

<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<th>3</th>
<th>4</th>
</tr>
</table>

Step Nine: Display the table in a web browser.

Code:

<table>
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<th>3</th>
<th>4</th>
</tr>
</table>

Displayed:

Notice how this table has no border, and how the content is all scrunched up together. We need to add some attributes to the TABLE tag to rectify this. We'll talk about these attributes at greater length later on. In the meantime, let's set the BORDER attribute equal to "1" (which will give us a visible border), the WIDTH attribute equal to "100" (which will make the table 100 pixels wide), and the HEIGHT attribute equal to "100" (which will make the table 100 pixels tall).

Example:

<table border="1" width="100" height="100">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<th>3</th>
<th>4</th>
</tr>
</table>

And here's what our table looks like now:

Alright, the individual cells may be a little distorted, depending on which browser we're using to view the table. If we wanted to spend the time, we could set the WIDTH and HEIGHT attributes for each cell, which would neaten up the table somewhat. Unlike WIDTH and HEIGHT attributes in the TABLE tag, however, WIDTH and HEIGHT attributes in the individual TH and TD tags do not size cells accurately. How do you size cells accurately, then? We'll discuss that in the next module.

Any kind of content could go into these cells, not just numbers. Here is the same table, with words in the four cells:

<table border="1" width="100" height="100">
<tr>
<th>Boo</th>
<th>Baby</th>
</tr>
<tr>
<th>Boy</th>
<th>Goy</th>
</tr>
</table>

Displayed:

Here's the same table, with pictures in the four cells (and the WIDTH and HEIGHT attributes of TABLE set to 200 rather than 100):

<table border="1" width="200" height="200">
<tr>
<th><img src="./graphics/capitalA.gif" width="54" height="54" /></th>
<th><img src="./graphics/capitalB.gif" width="54" height="54" /></th>
</tr>
<tr>
<th><img src="./graphics/capitalC.gif" width="54" height="54" /></th>
<th><img src="./graphics/capitalD.gif" width="54" height="54" /></th>
</tr>
</table>

Displayed:

Here's a similar table, with mixed content in the cells:

<table border="1" width="200" height="200">
<tr>
<th><img src="./graphics/capitalA.gif" width="54" height="54" /></th>
<td>Boogalu!</td>
</tr>
<tr>
<th>1025.623</th>
<td>
<img src="./graphics/capitalD.gif" width="54" height="54" />
<p>Hi There!</p>
</td>
</tr>
</table>

Displayed:

	Boogalu!
1025.623	Hi There!

Here's a more traditional table:

<table border="1" width="200" height="200">
<tr>
<th>Numbers</th>
<th>Sounds</th>
</tr>
<tr>
<td>10</td>
<td>Beep</td>
</tr>
<tr>
<td>27</td>
<td>Quack</td>
</tr>
<tr>
<td>146.17</td>
<td>Oink</td>
</tr>
</table>

Displayed:

Here's a similar table with the same content:

<table border="1" width="400" height="150">
<tr>
<th>Numbers</th>
<td>10</td>
<td>27</td>
<td>146.17</td>
</tr>
<tr>
<th>Sounds</th>
<td>Beep</td>
<td>Quack</td>
<td>Oink</td>
</tr>
</table>

Displayed:

Any number of different cell types may be placed into a single row. A single cell may contain any combination of items, from a single word, to a group of paragraphs and pictures, to another entire table! We'll talk about more complex table combinations a little later.

Now that you've seen how to construct a simple table, it's time for you to create one of your own.

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.