Tables

Tags Covered
[ <TABLE></TABLE> ] - [ <TR></TR> ] - [ <TH></TH> ]
[ <TD></TD> ] - [ <CAPTION></CAPTION> ] [ Final Word ]

      In this lesson you will learn tables. They are a way to dress up your page by framing items or links. Tables also help with spacing of items on your page. Once you learn and become accustomed to using tables, you will find them invaluable in creating your pages.
     Tables are made up of columns and rows, each called a cell. Cells contain graphics, text or other tables. Some tables look like framed information, others are not seen, but a way to space things on your pages.
     Tables consist of a few tags you need to become familiar with. Below is a basic table layout.

<TABLE>

<TR>

<TD>

</TD>

</TR>

</TABLE>

     Take note that all tags opening tags have closing tags. You MUST close each tag you open or your table will not work successfully.
     Also, like all other tags you have to use closing tags with, close them in the reverse order in which you opened them.
     These tags are set within the <BODY></BODY> tags.

<TABLE></TABLE>

The first tag you start your table with, is the <TABLE> tag. Within this tag are various elements you can use, such as:

WIDTH - designates the width of your table, either in a percentage of page width, or pixels.
HEIGHT - designates the height of your table, also in a percentage of page height, or pixels.
BORDER - designates the thickness of the framing border around your table.
CELLPADDING - designates the amount of space between your border of a cell, and
the cells contents.
CELLSPACING - designates the distance apart each cell is from each other.
BGCOLOR - designates the color of the background of your table.
ALIGN - designates how your table is aligned on your page, either, TOP, BOTTOM,
MIDDLE, RIGHT, LEFT, ABSMIDDLE, TEXTTOP, or BASELINE.
VALIGN - designates the vertical alignment of the table on your page, either, TOP,
MIDDLE, BOTTOM.

This table was started with a TABLE tag that looks like this:
<TABLE WIDTH=600>

You will see that the table is 600 pixels wide.

This table was started with a TABLE tag that looks like this:
<TABLE HEIGHT=100>

You will see that the table is 25 pixels high.

This table was started with a TABLE tag that looks like this:
<TABLE BORDER=5>

This table was started with a TABLE tag that looks like this:
<TABLE CELLPADDING=10>

The CELLPADDING is the space between the border of the cell and the cells contents.

This table was started with a TABLE tag that looks like this:
<TABLE CELLSPACING=5>

The CELLSPACING is the distance apart each cell is from the other.

This table was started with a TABLE tag that looks like this:
<TABLE BGCOLOR="#FFFFFF">

The background of this table is white.

This table was started with a TABLE tag that looks like this:
<TABLE VALIGN=TOP>

This table is vertically aligned to the top.

This table was started with a TABLE tag that looks like this:
<TABLE ALIGN=RIGHT>

This table is aligned to the right of the page.

Some of these attributes you won't see much affect on your page until there is data placed in the cells. Be sure that once you have constructed your table that you CLOSE the <TABLE> tag, with the </TABLE> tag, or your table will not show on your page.

<TR></TR> This tag is very easy to remember. You MUST start each row of cells with the <TR> tag and end each row of cells with the </TR> tag. Nothing goes in this tag like you will see with the other tags, just start and end each row with it.

<TH></TH>

How about a heading to your table? To do this you will use the <TH></TH> tags.
Here is an example of a table with a heading.

This is an example of a table heading.
Table headings are a good thing to use, so that people will understand more what you have listed in the table.

This is how the table was constructed:

<TABLE BORDER=5 BGCOLOR="#CCCC99">
<TR>
<TH>This is an example of a table heading.</TH>
</TR>
<TR>
<TD>Table headings are a good thing to use, so that people
will understand more of what you have listed in the table.</TD>
</TR>
</TABLE>

Go ahead, try it!!! You will see it's not so difficult.

<TD></TD> The <TD> </TD> tag has much the same attributes as the <TABLE></TABLE> tag does. In the <TD></TD> tag you also can designate COLSPAN and ROWSPAN. Meaning you can tell the cell how many ROWS or COLUMNS you want it to be in size. The following example is of COLSPAN.

Flowers		Hearts
Pictures	Candy	Soda

You see that the Flowers took two COLUMNS in size. Here is how the table was constructed:

<TABLE BGCOLOR="#CCCC99" BORDER=5>
<TR>
<TD COLSPAN=2>Flowers</TD>
<TD>Hearts</TD>
</TR>
<TR>
<TD>Pictures</TD>
<TD>Candy</TD>
<TD>Soda</TD>
</TR>
</TABLE>

Now let's do a ROWSPAN so you can see what that looks like.

Flowers	Hearts	Pictures
Flowers	Candy	Soda

You see how the Flowers too two ROWS of space. This is how the table was constructed:

<TABLE BGCOLOR="#CCCC99" BORDER=5>
<TR>
<TD ROWSPAN=2>Flowers</TD>
<TD>Hearts</TD>
<TD>Pictures</TD>
</TR>
<TR>
<TD>Candy</TD>
<TD>Soda</TD>
</TR>
</TABLE>

How about putting a graphic in a table? Let's try it!!!

We just put this computer graphic in a table.

The table was constructed like this:
<TABLE BORDER=3 BGCOLOR="#ADD8E6">
<TR>
<TD><IMG SRC="computer.gif" WIDTH=200 HEIGHT=94 BORDER=0 ALT="computer graphic"></TD>
<TD>We just put this computer graphic in a table.</TD>
</TR>
</TABLE>

Now the <CAPTION> tag. This tag is used if you would like a comment over your table to let people know what the intentions of the table may be.

This could be used to introduce your table.
This is the <TH> tag, used as a table heading. End this tag when you end your heading like this: </TH>
This is a <TR> with the <TD> to show what is in this data section. End the tag with </TD> then end the <TR> with the </TR> tag.
This is another row of table data, you may use as many rows as you choose to.

A Final Word on Tables

When you first start to learn tables they can seem rather confusing. There are so many attributes to the <TABLE></TABLE> and <TD></TD> tags, but once you work with them, you will become well accustomed to them, and will find they are an asset to a well designed web page. You can put TABLES within tables, to space a page of graphics and text out very nicely, and neatly. Think of a TABLE as a large piece of paper, and how you want things drawn on it. For each item, you can make it's own table within one big table. The one thing you MUST remember, ALWAYS close each and every table tag you use, or your table will not work right. You can, and probably will in the future, design your entire web site in TABLES. Work with all the tags and attributes you have learned here, and see how they all work to your advantage. Then, put them to work on your web pages and watch how it makes your pages much neater and cleaner looking! Don't be afraid to use them, the more you work with them, the easier it becomes. And please, feel free to e-mail us with any comments or help you may need. Have FUN!!! That is the best part of web page design, the fun of watching your pages come to life!!!!

[ Back to the TOP ]

[ Back to Tutorial List ] - [ Next Lesson ]

[ Home Page | HTML Bookstore | Free Graphics Center | Our Do-It-Yourselfers ]

[ E-Mail Us ]

This page hosted by

Get your own Free Home Page

This Site Created By JPWeb Consulting ©1996-2004 - All Rights Reserved

This Site Created By JPWeb Consulting
©1996-2004 - All Rights Reserved