A table is one of the most important things you will ever learn how to do in HTML.

That said, a table is a structure. It has rows and columns. It's similar to an Excel spreadsheet or a Word for Windows table. Text and graphics go into the "cells" of the table.

Most HTML tables are invisible. That is, they have no borders, and no special background color. They are used solely to control where the text and graphics are placed on the page.

Can you make an HTML page without knowing how to do tables? Yes, you can, but you will soon become frustrated because you won't be able to place things exactly where you want them. It is much less work to learn how to do the tables up front, than it is trying to format HTML pages without them.

[ top ]

Don't forget the closing table tag! Without it, you won't be able to see anything that you put inside the table. The whole chunk of text and graphics will disappear and you'll wonder what the...? happened.

<TABLE> as you will guess, signifies the start of the table. Everything inside the pair of Table tags will go inside the table.

<TR> stands for Table Row. Everything inside the pair of Table Row tags will go inside the same row of the table.

<TD> actually stands for Table Data. But that's confusing. I think of it as "table cell." Everything inside the pair of Table Data tags will go inside the same cell in the table.

The example looks pretty unspectacular. :) That's because you usually put more stuff inside a table.

[ top ]

[ top ]

[ top ]

This is very important and can also be somewhat tricky. If I have more than one cell inside a table row, it affects all the rows in the table.

For example, suppose one row of my table contains 3 cells. All of the other rows in that table would either have to contain 3 cells, or have to use COLSPAN.

Here is an example of a correct table with a row containing 3 cells. A border has been placed around the cells to make the example clearer:

[ top ]

How do you make columns?

The short answer is this. If you have 2 cells in a table row, and you put all of your data--text, graphics, other tables, etc.--inside those 2 cells, you'll get 2 columns.

There's no way to have the data automatically flow into 2 columns. You have to become a typesetter. :) Divide the data in half. Put whatever you want in the first column into the first cell. Likewise, put everything you want in the second column into the second cell.

You can make as many columns as you like. Just add another cell to the table row.

[ top ]

You can set the width and height for the entire table. You can also set the height of a table row by setting the height of a cell inside it. Finally, you can set the height and width of a table cell.

Most of the time, you will not need to set the height of tables. Usually you let the data inside the table determine its height.

And sometimes you will not need to set the width of the table either. Tables automatically expand to fit their widest element. If the widest element is as wide as you want the table to be anyway, there's no need to set the table width.

There are two ways to set the width of a table: as a percentage, and as an absolute number of pixels:

I don't usually set the height of rows or the width of cells. There are times when you'll need to do that though. For example, say you wanted all the rows in the table to be exactly the same height, or all the cells exactly the same width. Or you wanted the first cell in the table to be a certain width.

[ top ]

Sometimes you want to put some space between the elements inside the cells and the borders of the cells.

[ top ]

Likewise, sometimes you want to put more space between the cells.

[ top ]

That's one of the first uses of the spacing features, described above, that you'll need to know. There are several ways to do it.

One is to set the width of the table to, say, 90%. That creates a margin on both sides of whatever's inside the table.

Another way is to set the cellpadding attribute of the table. This places a margin on all four sides of the table. If you have cells inside the table, of course they will also be padded.

Yet another way is to set the cellspacing attribute of the table. This places a margin on all four sides of the table and also places a margin around the cells inside the table.

More newfangled HTML programming uses coordinates to set the dimensions of areas on the page. I myself prefer the old-style table programming since you have more control over the placement of the elements on the page.

[ top ]

Tables can be aligned on a page. It is slightly tricky though. I've had my tables overlap other objects on the page. Other times it seems to work perfectly. So keep it in mind, and play with it.

Most of the time, I use centered tables. That's really easy:

It doesn't matter if the data inside the table is or isn't centered. Most of the time. you'll want the table itself centered on the page.

For a piece on Peru, the author contributed 5 pictures. I wanted to place the pictures in such a way that there would be links at the bottom of each picture.

The obvious way to do that would have to involve tables. At first I tried to put the pictures inside their own cells. I put up a table row, with a picture in one cell and some of the text in the adjacent cell.

This worked but it was hardly perfection. You couldn't wrap the text around the picture that way.

I decided to try putting the picture and its links inside a table. I used the ALIGN feature to left- and right- align the tables inside the text:

This worked...exactly the same way aligning an image would. The text wrapped around the tables.

[ top ]

Each cell has a horizontal and vertical alignment.

The default horizontal alignment is left. If you don't specify otherwise, the data inside the cell will be left-aligned.

The default vertical alignment is center. If you don't specify otherwise, the data inside the cell floats vertically to the middle of the cell.

[ top ]

Tables, by default, have no borders. If you would like to have a border, use the BORDER attribute:

Netscape and IE render borders differently. The Netscape rendition is much better. But they are similar enough.

You can also specify a border color:

The cellspacing can affect the border:

[ top ]

The old way to do this was to use the bgcolor attribute to set a background color, and the background attribute to tile the background of the table with an image--exactly the same way you would for the body of an HTML page.

The newer, and better, style is to use style sheets to control these attributes. See Style Sheets, Setting fonts and colors for tables.

You can also define a class and use that for individual tables, table rows, and table cells as follows:

For reference purposes, here is the deprecated code to set the background color/image:

Using an image as a background is the same thing:

[ top ]

Again, the better way to set fonts inside tables involves style sheets. See Style Sheets, Setting fonts and colors for tables.

Using the old way, you can't set the font for the entire table. You have to use inline <font> tags and place a set of them inside each table cell.

For reference purposes, here is the code for that:

[ top ]

Use NOWRAP inside the cell:

[ top ]