Using TABLES TABLES are just rectangle-shaped areas divided into rows (across), and columns (down). You define the size and the contents of the cells (the little rectangles within the table) and their contents and whether or not there are borders drawn between the cells.

[ borders , cellpadding , cellspacing , aligning , colspan & rowspan,
width , contents , as frames, colors ]

A BASIC TABLE

Here is a very simple TABLE:

It has a caption at the top.
It has two columns, each labeled with a bold heading.
It has three items listed in each column. (adding that to the heading makes four rows in all)
There are nice neat lines drawn around the borders of the cells.
The Netscape browser will ignore any <FONT> tag that you may have used outside of the TABLE and so display the TABLE in the default FONT. (to take care of this use a FONT tag inside the table)

HEALTHY FOODS
FRUITS	VEGETABLES
apples	broccoli
bananas	carrots
grapes	peas

The HTML for the table looks like this:
<TABLE BORDER>
<CAPTION>HEALTHY FOODS</CAPTION>
<TR>
  <TH>FRUITS</TH>
  <TH>VEGETABLES</TH>
</TR>

<TR>
  <TD>apples>/TD>
  <TD>broccoli>/TD>
</TR>

<TR>
   <TD>bananas</TD>
  <TD>carrots</TD>
</TR>

<TR>
  <TD>grapes</TD>
  <TD>peas</TD>
</TR>

</TABLE>

Notice that:

The <TABLE> tag contains a BORDER.(more about widening or leaving off that border)
The caption for the table is between <CAPTION> tags. (omit this if you want NO caption)
The four ROWS are set between <TR> tags, the top one being the HEADING.
The HEADING is between <TH> tags.
The other rows are listed between <TD> tags.
The width of each cell is determined by the widest cell in each column. (more about controlling width of cells)
The data in each cell begins at the far left of the cell. (more on aligning within the cells)
There must be a </TABLE> tag at the end!

BORDERS:

If you want the borders to be wider than the default size then you can add a size after BORDER (the bigger the number, the widder the borders). For instance <TABLE BORDER=5> would look like this:

HEALTHY FOODS
FRUITS	VEGETABLES
apples	broccoli
bananas	carrots
grapes	peas

If you want your table to be borderless just add BORDER=0. That would make our example TABLE look like this:

HEALTHY FOODS
FRUITS	VEGETABLES
apples	broccoli
bananas	carrots
grapes	peas

However leaving off the borders make it difficult to read this TABLE unless perhaps we put more space between the cells, or more space between the cell walls and the stuff in the cells, and maybe aligned the words so they centered under each heading.

CELLSPACING:

CELLSPACING controls how much space is between the cells in the TABLE. This attribute goes inside the <TABLE> tag like this: <TABLE BORDER cellspacing=10>

Here's our example with larger CELLSPACING:

with borders

HEALTHY FOODS
FRUITS	VEGETABLES
apples	broccoli
bananas	carrots
grapes	peas

without borders

HEALTHY FOODS
FRUITS	VEGETABLES
apples	broccoli
bananas	carrots
grapes	peas

However our borderless TABLE would still look even better now if the text in the cells was aligned so that it was centered under the headings.

ALIGNING THE DATA INSIDE THE CELL:

The ALIGN attribute goes inside a <TD> tag and only affects the data in that one cell. You can align right left, or center. Now lets see those bordered and non-bordered TABLES again with the larger cellspacing and with the data centered in the cells. The <TD> tags would look like this:
<TD ALIGN="center">

with borders

HEALTHY FOODS
FRUITS	VEGETABLES
apples	broccoli
bananas	carrots
grapes	peas

without borders

HEALTHY FOODS
FRUITS	VEGETABLES
apples	broccoli
bananas	carrots
grapes	peas

The VALIGN attribute can also go inside a <TD> tag. It will control how the data in the cell aligns vertically. By default it will align vertically to the center. <TD VALIGN=top> will make the data begin at the "top" of the cell.

CELLPADDING:

You saw how CELLSPACING was one way to increase the blank space in TABLES. This can also be done with CELLPADDING which controls the space between the walls of the cells and the data in them. The CELLPADDING attribute goes inside the <TABLE> tag. A higher number makes more space. The tag might look like this:
<TABLE BORDER=5 CELLPADDING=10>
You may use the CELLSPACING and the CELLPADDING attributes in the same TABLE tag.

COLSPAN AND ROWSPAN:

The COLSPAN attribute creates a single TABLE cell that "spans" the whole width of the TABLE. COLSPAN goes inside the <TD> tag. For example:
<TABLE BORDER=2 CELLSPACING=5 CELLPADDING=5>
<TR>
   <TD ALIGN="center" COLSPAN=3>Good Fruits </TD>
  </TR>
<TR>
   <TD ALIGN="center">apples </TD>
   <TD ALIGN="center">bananas </TD>
   <TD ALIGN="center">oranges </TD>
</TR>
</TABLE>
It will look like this:

Good Fruits
apples	bananas	oranges

Notice that the first <TD> is the cell with the COLSPAN and since it "spans" across 3 columns then you wrote COLSPAN=3. If you had only wanted to "span" across only 2 cells, then you would have written COLSPAN=2, then added the 3rd cell with another <TD> before you wrote the <TR>.

The ROWSPAN attribute does the same thing, except it spans across rows instead of columns (vertically). For example:
<TABLE BORDER=2 CELLSPACING=5 CELLPADDING=5>
<TR>
   <TD ROWSPAN=3 ALIGN=CENTER>Good<BR>Fruits</TD>
   <TD ALIGN=CENTER>apples</TD>
</TR>
<TR>
   <TD ALIGN=CENTER>bananas</TD>
</TR>
<TR>
   <TD ALIGN=CENTER>oranges</TD>
</TR>
</TABLE>

It will look like this:

Good Fruits	apples
	bananas
	oranges

Confused yet? And what's more, you can use the COLSPAN and the ROWSPAN attributes together in the same TABLE! I am not even going to attempt it here, but you can if you like! Just draw out the shape of your table with it's cells and remember that the TABLE must be "four-sided".

DEFINING WIDTH OF CELLS:

You can use the WIDTH attribute in a <TD> tag to control the width of the cell. The width is either defined in pixels or a percentage in relationship to the screen. Be careful if you use the WIDTH attribute in more than one cell, as you must keep the TABLE in a rectangular shape. For example you might say <TD WIDTH=100> or <TD WIDTH=30%>

WHAT ALL CAN YOU PUT INSIDE THE CELLS?:

The DATA inside the cells can be:

text
like previous examples
images
for example:
<TABLE BORDER>
<TR>
   <TH>FRUITS</TH>
   <TH>VEGETABLES</TH>
; </TR>
<TR>
   <TD ALIGN=CENTER>IMG SRC="tableapple.gif" HEIGHT=54 WIDTH=50</TD>
   <TD ALIGN=CENTER>IMG SRC="tablebroccoli.gif" HEIGHT=64 WIDTH=50</TD>
</TR>
<TR>
   <TD ALIGN=CENTER>IMG SRC="tablebanana.gif" HEIGHT=48 WIDTH=65</TD>
   <TD ALIGN=CENTER>IMG SRC="tablecarrot.gif" HEIGHT=70 WIDTH=33</TD>
</TR>
<<TR>
   <TD ALIGN=CENTER>IMG SRC="tablegrapes.gif" HEIGHT=67 WIDTH=50</TD>
   <TD ALIGN=CENTER>IMG SRC="tablepeas.gif" HEIGHT=70 WIDTH=22</TD>
</TR>
</TABLE>
which looks like this:

FRUITS VEGETABLES
links
you can link any of the text or images that are in the cells to other pages
<BR> and <P> tags
you can use the BREAK and PARAGRAPH tags to force data to the next line
other TABLES
you can even put TABLES inside TABLES

USING ONE-CELLED TABLES AS "FRAMES":

The TABLE tag can also be used to create a "frame" around an image or some text. It would just be a one-celled TABLE and the BORDER would be the "frame". So you would want to use the BORDER attribute in the <TABLE> tag to make the BORDER wider. For example:

USING COLOR IN TABLES:

The <FONT> tag (along with FACE=, SIZE=, and COLOR=) may be placed between the <TD> and the </TD> tags to control the font. Keep in mind that some browsers (like Netscape) will ignore any <FONT> tag that you may have used outside of the TABLE and so display the TABLE in the default FONT unless you provide a new <FONT> inside the TABLE. And don't forget to use a </FONT> tag

Notice that in all our TABLES, the page's background shows in the the TABLE'S background too. Later browsers (Netscape and IE 3.0 or later) will allow you to use the BGCOLOR attribute in the <TD> tags to change the background color of the cell. Either color names or hex codes can be used.

For example here we use the <FONT> tag and the BGCOLOR attibute:

<TABLE BORDER=15>
<TR>
<TD BGCOLOR="CCCCFF" ALIGN=CENTER>
<FONT FACE="Arial" COLOR="RED">
<IMG SRC="kids.gif"><BR>FRIENDS
</FONT>
</TD>
</TR>
</TABLE>

FRIENDS

Some browsers (like IE) will even allow a background image in a table. You do this by adding BACKGROUND= inside the <TD> tag. For example:

Keep in mind that if you are using a browser that does not support this command (like Netscape) then you will not see the red-dot background, but will still see the page's background in the above table!

Some very new browser versions will also allow you to change the TABLE BORDER COLORS. You do this by putting BORDERCOLOR= along with your choice of color in the <TABLE> tag. However you will loose the 3-D effect of the border as all four sides will be the same shade of the color. If the border of the following example appears "red", then your browser supports this new feature.

more advanced extras or go to:
[ HOME , lesson 1 , lesson 2 , lesson 3
extras , advanced extras , colors , graduation ]

visit Ladybug's Garden, my personal pages