Hints for Making Tables

We call this "hints" because we don't intend to show you all the information you need to create tables. Instead, this section is intended to get you thinking about how tables are constructed in general. Once you understand this, we feel that you can best learn the details by looking at examples.

Getting Started

The basic HTML instructions for making tables are quite simple. You need just three "containers."

<table> ... </table> This is the overall Table container
<tr> ... </tr> This is the Table Row container. You will have one, more or less, for every row in your table.
<td> ... </td> The Table Data (or cell) container. Each cell in your table, more or less, gets its own container.

Put together into a simple table with three rows and three cells per row, you would have HTML instructions that look like this:

It may look a little intimidating, at first. You'll soon see that it is pretty straight forward.

There are a few things to look at that are more apparent in this simple table than the more complex one's you'll see soon.

All the containers have a start and end code.
A table container starts and ends with the same code, except there is a "/" in the ending code.
The containers are nested. The <table> ... </table> is on the outside. <tr> ... </tr> come next. And finally, <td> ... </td> are the innermost elements. Put another way, the table is built of rows, each of which has data cells.
Blanks in data cells are ignored. This has a lot of useful implications that we will explore in the shortcuts section.

What does this table look like? Actually, nothing. You can't see it because it has no data and until we add some more information, there won't be any lines.

Enhancing the Table Containers

Additional information can be put into each table container. For example, you can get a table with thin borders by changing the starting <table> container into <table border>. If we also slip a value into each data cell, you get the following table.

1	2	3
4	5	6
7	8	9

<table border>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

There are three values, including border, that you can use to enhance the appearance of your tables.


border border=0 border=5	This draws lines of various thicknesses around the table, or lets you turn all the table lines off. Note that the outer line has been defined as a bezel and it gives the table a distinct 3D appearance.

cellpadding=0 cellpadding=5	This controls the width of the interior lines in the table. Bigger values result in thicker lines. The values are in pixels.

cellspacing=0 cellspacing=10	This is the space (in pixels) around each item in a data cell.

You can see how these work with a few examples. The previous table will be used, except it will have different beginning <table> container enhancements.

1	2	3
4	5	6
7	8	9

<table border=5 cellspacing=5>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

1	2	3
4	5	6
7	8	9

<table border=5 cellspacing=10>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

1	2	3
4	5	6
7	8	9

<table border=5 cellspacing=5 cellpadding=10>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

1	2	3
4	5	6
7	8	9

<table border=10 cellspacing=5 cellpadding=10>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

1	2	3
4	5	6
7	8	9

<table cellspacing=0 cellpadding=10>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>

Obviously, with just these three enhancements you can produce a wide variety of appearances.

There are many useful enhancements that can be added to containers.

Enhancing a Table by Adding Information to a Container Specification

The previous examples showed three types of "enhancement" that could be added to the <table> container. A number of other common enhancements are also available.

	horizontal alignment options, both for the table as a whole and for cell contents.
	vertical alignment options for cell contents.
	size options, expressed as either an absolute value (such as the number of pixels) or a percentage.
	grouping of cells so that larger cells can span either rows or columns.

Cell Contents

A cell in a table can hold just about anything that you can include in a non-table HTML document. We usually think of placing numbers or words into cells. However, consider the following list of useful possibilities:

	numbers since data values are a key part of many tables.
	words for both identification (like column headers) as well as "data values." Sometimes people put many paragraphs of words into a single cell when a table is used to format a page. You can use all the word formatting containers (such as <b> and <i> to get bold and italics, as well as <br> and <p> to control line breaks.
	images such as icons, or even pictures. Sometimes large pictures are included. An image can be sized to fit into a cell. You'll see in the examples that you can even expand a tiny image to make a line or fat bar.
	links to send people to other places.
	rules, which provide any easy and general way you can get lines into a table.
	tables can be put into tables (doesn't that boggle the mind!).

Some of these possibilities may seem unlikely. Don't bet on it. Everything on this list has been used somewhere on this page or the TABLES home page.

What's Next?

Check out the examples. We strongly believe that you learn best by finding an example of something that interests you and then examining how it was created. You'll find a lot of tables, the code that was used to create them and our commentary on the process.

Gallery of Examples Ways to Save Time

Take Me Home!