Here you will learn the basics of Tables

Here are the basic tags to use
for constructing tables.

<<>TABLE<>> <<>/TABLE<>>

These are the opening and closing tags.

<<>TR<>> <<>/TR<>>

Is used when you want a new "Table Row" to begin or end.

<<>TD<>> <<>/TD<>>

These tags are called "Table Data" or "Cell" and will open and close each cell

BORDER=" "

Designates how wide a border will be.

First, we'll start out making a table with 1 row and 1 cell.
I'm going to add a BORDER="5" so that
you can view what actually happens.

Here are the tags:

<<>center<>> <<>TABLE BORDER="5"<>>
<<>TR<>>
<<>TD<>>
This is what a table looks like.
<<>/TD<>><<>/TR<>><<>/TABLE<>>
<<>/center<>>

And here is what you get:

This time we'll add some graphics and text into a table
with 2 cells across.
We'll also use the ALIGN="CENTER" command
in the <<>TD<>> tag.

<<>HTML<>>
<<>TABLE BORDER="5"<>>
<<>TR<>>
<<>TD ALIGN="CENTER"<>>
<<>IMG SRC="http://URL of image"<>>
<<>/TD<>>
<<>TD ALIGN="CENTER">
<<>FONT SIZE="5" COLOR="RED"<>>
This is what<<>BR<>>
tables look like. <<>/FONT<>>
<<>/TD<>><<>/TR<>><<>/TABLE<>>
<<>/HTML<>>

And here's the results:

This is what tables look like.

You can make your rows with as many cells
(table data) that will fit across the screen.

Most of the time when I want to place text
and graphics within tables, it is more attractive
not to use a border that will show the
physical separation between cells.
This is done when I write BORDER="0"in the
<<>TABLE<>> tag.

<<>TABLE BORDER="0"<>>
<<>TR<>>
<<>TD ALIGN="CENTER"<>>
<<>IMG SRC="http://URL of image"<>><<>/TD<>>
<<>TD ALIGN="CENTER">
<<>FONT SIZE="5" COLOR="RED"<>>
The Same Table<<>BR<>>
Without Border. <<>/FONT<>>
<<>/TD<>><<>/TR<>><<>/TABLE<>>

The Same Table Without Border.

This is the same table as the one above...
but without the border.

Now, I will show you how to do a table with 2
cells across and then a new row with two more
cells across.
Notice where I place the <<>TR<>> and <<>/TR<>> tags
to start and end the "table rows."
I'll use a border so you can see what is happening.

<<>center<>>
<<>TABLE BORDER="5"<>>
<<>TR<>>
<<>TD ALIGN="CENTER">
<<>IMG SRC="https://members.tripod.com/~Cannonball2/file-1/flag1.gif"<>>
<<>/TD<>>
<<>TD ALIGN="CENTER"<>>
<<>IMG SRC="https://members.tripod.com/~Cannonball2/gif-2/apple.gif"<>>
<<>/TD<>><<>/TR<>>
<<>TR<>>
<<>TD ALIGN="CENTER">
<<>IMG SRC="https://members.tripod.com/~Cannonball2/gif-1/crystalball2.gif"<>>
<<>/TD<>>
<<>TD ALIGN="CENTER">
<<>IMG SRC="https://members.tripod.com/~Cannonball2/gif-2/frog.gif"<>>
<<>/TD<>><<>/TR<>><<>/TABLE<>><<>/center<>>

You can also add color in the table and table
data tags. I'm only going to make a simple
two cell table to demonstrate this.
Also, note: I will add a dimension in the
<<>TABLE<>> and <<>TD<>>tags.

<<>center<>>
<<>TABLE BGCOLOR="DARKBLUE" BORDER="5" WIDTH="400"<>>
<<>TR<>>
<<>TD BGCOLOR="white" WIDTH="200" ALIGN="CENTER"<>>
<<>IMG SRC="https://members.tripod.com/~Cannonball2/gif-2/alligator.gif"<>>
<<>/TD<>>
<<>TD BGCOLOR="YELLOW" WIDTH="200" ALIGN="CENTER"<>>
<<>FONT SIZE="3" COLOR="BLACK"<>><<>B<>>
This is Pogo.<<>br<>>Ain't he cute? <<>/B<>><<>/FONT<>>
<<>/TD<>><<>/TR<>><<>/TABLE<>><<>/center<>>

This is Pogo. Ain't he cute?

Now you'll learn how to add backgrounds in the
<<>TABLE<>> and <<>TD<>> tags.
We add an URL of a background in these tags.

<<>center<>>
<<>TABLE BACKGROUND="https://members.tripod.com/~Cannonball2/pagebg-images/oakbg.gif" BORDER="10"<>>
<<>TR<>>
<<>TD BACKGROUND="https://members.tripod.com/~Cannonball2/pagebg-images/lawn2.gif" ALIGN="CENTER"<>>
<<>IMG SRC="http://www.geocities.com/BourbonStreet/Square/7855/kids.gif"<>>
<<>/TD<>><<>/TR<>><<>/TABLE<>><<>/center<>>

This is a simple table. Remember that you can make as many cells across and rows down that fit the purpose.

CELLPADDING & CELLSPACING

CELLPADDING="#" this is how many pixels you have between the border of your table cell and whatever you have inside. Great way to make some space.

CELLSPACING is how wide the borders are between the cells. Try using this and changing the TD BGCOLOR, you can get some great color effects going.

Remember if you're sizing your table to add all of the CELLPADDING and CELLSPACING in with your HEIGHT and WIDTH, if not it may come out wrong.

<<>TABLE BGCOLOR="BLUE" CELLPADDING="12" CELLSPACING="5"<>>

Colspan and Rowspan

Two important attributes of a <<>TD> cell are colspan and rowspan.

Colspan informs the browser how many cells the <<>TD> cell is to span. This attribute is placed in the cell that you want to span with.

Rowspan informs the browser how many rows the <<>TD> cell is to span. This attribute is placed in the cell that you want to span with.

 These are the basic and most easy table tags.
Practice and see what you can do with tables.

You can also put a table inside a TD cell (table within a table within a table)

Home