Simple Tables

First, please repeat after me your html mantra....

If I open a tag, I must close the tag. If I open a tag, I must close the tag!

Here's a simple example of a simple table:

Here is the same table, in unusual colors:

(Note: IE users will probably see more colors than Netscape users - this will be true through all examples. Netscape may Not give all the fancy border colors)

The only difference between the two is the extra coding I inserted for the border colors and the cell color. What did you say Tik Tok??? Cells? Borders??

Part One - The Anatomy of a Table

The first thing you probably notice is this table is divided up into parts, called "cells." Each cell is where you put in text or an image or a link or all three or sometimes, nothing. Think of a table as one of the old fashion shoe bags we use to hang on the inside of our closet doors. You could put anything into each of the pockets (eg: cells), not just shoes.

The width of the entire area can by coded in either percent (%) or in a number (pixels). In the beginning, it is easier to do percent. (At this time, don't worry about the tables height). This is the percent of your web page the table will take up. For example, this simple table is "70%" of the page's total width. Percents Must appear with quotes like WIDTH="82%"

I have it centered on the page using the center tag, sometimes called the "align" tag. <center> to open and </center> to close it. These will be inserted Before the table code, and after you have closed the table code.

The cell area going Across the table is called the "column." It is abbreviated "col."

The cell area going Down the table is called the "row."

The outside frame of the table is called the "border." It can be any thickness you wish (in pixels). This simple table has a border of 5.

The border around each cell is called the "cellspace." It is the space between the cells and it too can be any thickness. This example is 1 pixel.

The size of each cell is called the "cellpad." It is the space within the cell. This example is 1.

Part Two - HTML Code

Now let's look at the entire html code for this simple table:

< table width="70%" border="5" cellspacing="1" cellpadding="1">

<tr>

<td>Tik Tok </td>
<td>Tik Tok </td>

</tr>

<tr>
<td>Tik Tok  </td>
<td>Tik Tok </td>
</tr>

<tr>
<td>Tik Tok  </td>
<td>Tik Tok  </td>
</tr>

</table>

</center>

End of Page One....click here for Page Two

Back to Site Help

This helpful information compiled by Tik Tok