The world's easiest table tutorial

Tables can be extremely important in web design. They can be used to control the layout of graphics and text on a page and have many other uses.

We've added a period between the opening < and the start of each tag. This was done to show you the source rather than the result of the code. When you write your URL, please use <tag> and not <.tag>

A first look at table code

<.table><./table>
Creates a table. Begin and end every table with these tags.

<.tr><./tr>
Stands for "Table Row". Sets off each row in a table

<.td><./td>
Stands for "Table Data". Sets off each cell in a row

<.th><./th>
Sets off the table header (a optional cell with bold, centered text for the top row of a table)

Sample Table

For the purpose of our web project, you only need a very basic table. Here's a sample:


<.table>
   <.tr>
     <.td>Cell 1<./td>
     <.td>Cell 2<./td>
   <./tr>
   <.tr>
     <.td>Cell 3<./td>
     <.td>Cell 4<./td>
   <./tr>
<./table>

This would produce a table with two rows and two cells in each row:

Cell 1	Cell 2
Cell 3	Cell 4

I know what you're thinking. What happened to the table? In this case, the table's border was set to zero making it invisible. Invisible tables can be extremely useful as a page layout tool. We'll get into that later.

Now let's get fancy and take a look at some table Attributes. These are used to modify the appearance of tables.

Table Attributes

<.table border=#>
Sets width of border around table cells. 0=no border, 1 is a small border, 5 is a really thick border.
Here's our sample table with a border of 3:

Cell 1	Cell 2
Cell 3	Cell 4

<.table cellspacing=#> Sets amount of space between table cells. Again 0 is none-10 is a lot.
<.table cellpadding=#> Sets amount of space between a cell's border and its contents
Here's our sample table with cellpadding and cellspacing set to 8:

Cell 1	Cell 2
Cell 3	Cell 4

<.table width=# or %> Sets width of table - in pixels or as a percentage of document width.
Here's our sample table once again. This time we've asked it to take up 50% of the width of your browser window. Try resizing your browser. Notice how the table resizes itself too? that can be very useful.
Here's our table including settings for these attributes: border, cellspacing, cellpadding, and width:

Cell 1	Cell 2
Cell 3	Cell 4

Let's just take one more peek behind the scenes at the html code that created this table. Sometimes it's helpful to see all of the tags in action as written:

<.table border="3" cellpadding="8" cellspacing="8" width="50%">
   <.tr>
     <.td>Cell 1<./td>
     <.td>Cell 2<./td>
   <./tr>
   <.tr>
     <.td>Cell 3<./td>
     <.td>Cell 4<./td>
   <./tr>
<./table>

Aligning data within cells:
<.tr align=?> or <.td align=?>
Sets alignment for cell(s) (left, center, or right)

<.tr valign=?> or <.td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom)
First, let's look at the source:

<.table border="3" cellpadding="8" cellspacing="8" width="50%">
   <.tr>
     <.td align="right">Cell 1<./td>
     <.td align="left">Cell 2<./td>
   <./tr>
   <.tr>
     <.td align="center" valign="middle">Cell 3<./td>
     <.td align="left" valign="bottom">Cell 4<./td>
   <./tr>
<./table>

And here's the result:

Cell 1	Cell 2
Cell 3	Cell 4

Spanning across rows or columns:
<.td colspan=#>
Sets number of columns a cell should span

<.td rowspan=#>
Sets number of rows a cell should span (default=1)

<.td nowrap>
Prevents the lines within a cell from being broken to fit.

Here's sample code showing spanning:

<.table border="3" cellpadding="8" cellspacing="8" width="50%">
   <.tr>
     <.td colspan="2">Cell 1<./td>
     <.td>Cell 2<./td>
   <./tr>
   <.tr>
     <.td>Cell 3<./td>
     <.td>Cell 4<./td>
   <./tr>
<./table>

And with any luck at all, here's the result:

Cell 1		Cell 2
Cell 3	Cell 4

As you can see, cell 1 now spans across two columns.

You can find additional help with tables courtesy of HTMLGoodies at:
http://htmlgoodies.earthweb.com/tutors/table.html

Coming Soon

Using invisible tables as a layout tool.