Using Tables

There is no more useful tool for coding HTML than the humble Table. Tables allow you to place objects and page elements very precisely on your web page allowing you a lot more creative freedom.

There is one big drawback to using tables. Your browser will wait until ALL of the material contained in the table has been downloaded before it displays the table on the page. So, it is absolutely essential that you include Height and Width tags in any images you put into a table, so that the browser doesn't wait for every single graphic to download before it displays the table.

Tables can have borders which will separate the information obviously, or they can have no borders hence being invisible on the page.

Here is a table with thin borders:

Cell A Cell B Cell C

Cell D Cell E Cell F

Here is a table with thick borders:

Cell A Cell B Cell C

Cell D Cell E Cell F

Here is a table without borders:

Cell A Cell B Cell C

Cell D Cell E Cell F

The Parts Of A Table

Tables are broken down into rows and cells. Each row contains cells and the cells contain your images and text. An individual table cell can contain anything you can put on a page, even another full table! Here are the tags we use to create tables:

Table Creation Tags:	The Tags function:
<TABLE>	This tells the browser to start a table
<TH>...</TH>	This starts and ends a table header cell
<TR>...</TR>	This starts and ends a table row
<TD>...</TD>	This starts and ends a table cell
</TABLE>	This tells the browser to end a table

The <Table> Tag Attributes

The Opening <TABLE> tag tells your browser that you want to create a table next. As with most of the tags we have discussed, the <TABLE> tag has several Attributes you can use to change the way your table looks and behaves:

BORDER=
If you want your table displayed with a border, you can specify a numerical value which will tell the browser how many pixels wide you want the border to be. Using BORDER="5" will give you a border 5 Pixels wide, etc.

TIP: I ALWAYS set this value to "1" while I am creating the Table. This allows me to view the Table as I build it, then when I am finished the table and everything appears the way I want it, I can turn off the border altogether by using BORDER="0".

WIDTH=
By using this Attribute, you can specify how wide you want the table to be. If you do not specify a table width, the table will appear as wide as the objects you put into it. There are two methods you can use to specify the WIDTH= Attribute:

Percentage method

WIDTH="60%"
Using this method will create a table 60% the width of your screen. This method is recommended because people using different screen resolutions will always see the table as being 60% of their screen width, no matter whether they are using 640x480, 800x600 or whatever.

Absolute method

WIDTH="450"
Using this method you can specify an exact PIXEL width. This can be very handy if you are placing objects precisely on your page. Be warned though, if you specify a table has a width of 800, for example, and a viewer with a resolution of 640x480 (640 wide by 480 high) tries to view your table, they wind up not being able to see the whole table and have to scroll to the right constantly to see everything.

BGCOLOR=
You can use this Attribute to specify the background color of EVERY cell in your table. ALL of the cells in the table will have the same background color. Code the BGCOLOR= Attribute like this:

BGCOLOR="#ff0000"

ALIGN=
Using this Attribute you can define the alignment of the WHOLE table. Correct values for this Attribute are "right", "left" and "center". So you code this like so:

ALIGN="right"

CELLPADDING=
This numerical value lets you specify how many pixels there should be between the object/text in the cell and the wall of the cell that the object is in. This value will affect ALL of the table's cells. You cannot have one cell with a different cellpadding value than another in the same table. You code it thusly:

CELLPADDING="2"

TIP: The most important of cellpadding and spacing (in my opinion) is cellpadding. Concentrate on that when building the table. Try it with a cellpadding of zero, and then with a cellpadding of eight, and see what happens. If you are showing the borders of the table (not setting it to zero), then cellspacing is a great way to control the width of the borders. Generally, I set cellspacing to zero and cellpadding between 2 and 10.

CELLSPACING=
This numerical value lets you specify how many pixels should be BETWEEN each cell. This value affects ALL cells in the table the same way. We code this one just like this:

CELLSPACING="3"

TIP: If you are having trouble understanding the difference between cellpadding and cellspacing, imagine you have a crate full of beer cases. The space between the individual bottles and the case they are in, is the CELLPADDING. The space between each of the beer cases inside the crate is the CELLSPACING.

You can combine any or all of the Attributes into one <TABLE> tag like this:

<TABLE WIDTH="60%" CELLPADDING="2" ALIGN="RIGHT" BORDER="1">

Remember that the Table Attributes affect the ENTIRE Table.

The Table Header

Using the <TH> Table Header tag is a convenient way to create a cell with bolded heading text in it in one easy step. The header cell is identical to other cells in your table and can be manipulated in the same way. Here is a simple table with a header cell:

Testing the header
Example Cell

Testing the header
Example Cell

This tag is not widely used anymore since it is usually just as easy to create a cell and bold the text in it. Here is how you would code the example Table above:

<TABLE BORDER="1"> <-- Opening Table tag with the border on

<TH> Testing the header </TH> <-- defining the header cell and text

<TR> <-- defining the first row with this tag

<TD> Example Cell </TD> <-- defining the individual cell

</TR> <-- ending the first row with this tag

</TABLE> <-- ending the table with the Closing table tag

Coding A Table With One Row

Here is a very simple table with the border value set to "1":

Cell A Cell B Cell C
Row 1

Column 1 Column 2 Column 3

Let's take a look at the coding for the example table:

<TABLE BORDER="1"> <-- Opening table tag with the border 'on'

<TR> <-- starting the first row with this tag

<TD> Cell A </TD>      <-- defining the individual cell
<TD> Cell B </TD>      <-- defining the individual cell
<TD> Cell C </TD>      <-- defining the individual cell

</TR> <-- ending the first row with this tag

</TABLE> <-- finishing the table with this tag

Coding A Table With Two Or More Rows

All you have to do is tell the table to start a new row, and define more cells:

Cell A Cell B Cell C

Cell D Cell E Cell F

Row 1
Row 2

Column 1 Column 2 Column 3
Here is how I would code the table you see above:

<TABLE BORDER="1"> <-- Opening table tag with the border 'on'

<TR> <-- starting the first row with this tag

<TD> Cell A </TD>      <-- defining the individual cell
<TD> Cell B </TD>      <-- defining the individual cell
<TD> Cell C </TD>      <-- defining the individual cell

</TR> <-- ending the first row with this tag

(here is where the second row comes in)

<TR> <-- starting the SECOND row with this tag

<TD> Cell D </TD>      <-- defining the individual cell
<TD> Cell E </TD>      <-- defining the individual cell
<TD> Cell F </TD>      <-- defining the individual cell

</TR> <-- ending the SECOND row with this tag

</TABLE> <-- finishing the table with this tag

Customizing Your Table Cells

Each table cell requires an Opening <TD> tag and a Closing </TD> tag to work properly. You can insert text, images, anything that you would put on any other portion of your page, into a table cell. There are several attributes you can use to modify your cells:

ALIGN=
This Attribute allows you to define HORIZONTAL ALIGNMENT of text or objects in the cell. Correct values for this attribute are "left", "center" and "right" We code it like this:

ALIGN="right"

VALIGN=
This attribute lets you define the VERTICAL ALIGNMENT of text or objects in the cell. Correct values for this attribute are "top", "middle" or "bottom". We code it like this:

VALIGN="bottom"

COLSPAN=
This attribute allows you to specify how many columns a cell should span across. The correct value is a numerical value entered like this:

COLSPAN="2"

The number you use depends on how many columns you wish to span across.

ROWSPAN=
This attribute allows you to specify how many rows a cell should span across. The correct value is a numerical value entered like this:

ROWSPAN="2"

The number you use depends on how many rows you wish to span.

BGCOLOR=
This attribute lets you specify the background color of that individual cell. You complete this attribute by entering a Hexadecimal Color Value, like this:

BGCOLOR="#000000"

WIDTH=
This attribute lets you specify how wide the individual cell should be. You can use the percentage method or the absolute pixel width method.

Percentage method:

WIDTH="35%"

(Note: Using the percentage method will give you a percentage of the width of the table, not the width of the page.)

Absolute method:

WIDTH="150"

This is the width of the cell in PIXELS.

Spanning Columns and Rows

Spanning is a very useful table creation tool. Cell spanning allows you to alter the size of cells to your own needs. Here is the simple table we created before:

Cell A Cell B Cell C

Cell D Cell E Cell F

Row 1
Row 2

You will notice each row has 3 cells, but what do we do if we want the second row to have only two cells? If you simply remove one cell, you will notice your table gets all screwed up.

So, what we need to do is modify the cell <TD> tag with an attribute that will allow us to span one cell across two existing cells. If we use the COLSPAN= Attribute we can stretch a cell across 2 or more columns of the table:

Cell A Cell B Cell C

Cell D Cell F

Row 1
Row 2

Notice Cell D is now stretched, or SPANNED, across two cells.

Here is how the above table is coded:

<TABLE BORDER="1"> <-- Opening table tag with the border on

<TR> <-- starting the FIRST row with this tag

<TD> Cell A </TD> <-- defining the individual cell
<TD> Cell B </TD> <-- defining the individual cell
<TD> Cell C </TD> <-- defining the individual cell

</TR> <-- ending the FIRST row with this tag

(here is where the second row comes in)

<TR> <-- starting the SECOND row with this tag

<TD COLSPAN="2"> Cell D </TD> <-- defining the individual cell

(Notice I removed Cell E entirely)

<TD> Cell F </TD> <-- defining the individual cell

</TR> <-- ending the SECOND row with this tag

</TABLE> <-- finishing the table with this tag

Here is a slightly different variant, using the ROWSPAN= attribute:

Cell A Cell B Cell C

Cell D Cell E

Row 1
Row 2

Notice Cell C is now stretched, or SPANNED, across two cells and ROWS.

Here is how the above table is coded:

<TABLE BORDER="1"> <-- Opening table tag with the border on

<TR> <-- starting the FIRST row with this tag

<TD> Cell A </TD> <-- defining the individual cell
<TD> Cell B </TD> <-- defining the individual cell
<TD ROWSPAN="2"> Cell C </TD> <-- defining the individual cell

</TR> <-- ending the FIRST row with this tag

(here is where the second row comes in)

<TR> <-- starting the SECOND row with this tag

<TD> Cell D </TD> <-- defining the individual cell
<TD> Cell E </TD> <-- defining the individual cell

(Notice I have removed CELL F entirely because CELL C now occupies it's space)

</TR> <-- ending the SECOND row with this tag

</TABLE> <-- finishing the table with this tag

Want some handy tables you can Copy and Paste right onto your own page? Try our cool Sample Tables page!

Getting feedback from your visitors is very important, so let's make it easy for your visitors to send you email with a special form:

~~~~~ On to "Adding Email Forms" ~~~~~