Tables

Hello

Blah blah

Table consists of <TABLE>, </TABLE> 
                  <TR>, </TR> (Table Row within Table)
	                 <TD>Table data</TD> (Data within Table Row)
e.g.
                  <TABLE>
                  <TR>
                  <TD>Hello</TD>
                  <TD>Blah blah</TD>
                  </TR>
                  </TABLE>

Optional extras include <TABLE BORDER=2 WIDTH=75%>
or                      <TABLE BORDER=15 WIDTH=75 HIEGHT=100>

The height of individual cells cannot be reliably controlled from browser to browser.

The white section of the border stays the same, but the grey bit changes size.

Tables will by default fit to the size of their contents unless the height and width is specified,.
By default there is no border.

As above, you can align text horizontally within the cells by putting <ALIGN=CENTER> within the TD tags. The options are LEFT, RIGHT or CENTER. Otherwise the default is range left.

The vertical alignment can also be specified.
<TD ALIGN="left" VALIGN="bottom">Blah blah</TD>
The options are "bottom", "top", "middle". The default is middle.

To put images in a table, use:
<TD ALIGN="center" VALIGN="middle"<IMG SRC="ed.gif" WIDTH=32 HEIGHT=32 ALT="Ed"></TD>

Specifying cell widths as a proportion of table width

Check this out!

Hello

Blah blah

As you know, the width of the table can be stated in pixels or as a percentage of the browser window.
Data cells can be sized within the table as pixels or percentages of the table size.
The above table is sized at 75% of the browser window. The first cell is at 30%, the second at 70% of the table.
Code:
       <TABLE BORDER=2 WIDTH=75% HEIGHT=75>
       <TR>
       <TD WIDTH=30% ALIGN=CENTER>Hello</TD>
       <TD WIDTH=70% VALIGN="bottom"> Blah blah</TD>
       </TR>
       </TABLE>
Make sure that the numbers add up!

Making additional rows

To make additional rows, just add more <TR> statements. You do not have to re-specify the cell widths, they follow the previous cells to form columns. However - you do still need to specify the alignment. If there are not enough <TD> statements, then you will get a blank one at the end. It is better practice however - to specify a blank space instead - using nbsp.

Name1	Name2	Name3
Name4		Name5

The code for the above table is:

<TABLE BORDER=5 WIDTH=80%> <TR> <TD WIDTH=33.3% ALIGN=CENTER>Name1</TD> <TD WIDTH=33.3% ALIGN=CENTER>Name2</TD> <TD WIDTH=33.3% ALIGN=CENTER>Name3</TD> </TR> <TR> <TD ALIGN=CENTER>Name4</TD> <TD ALIGN=CENTER> </TD> (As stated, this is optional but recommended.) <TD ALIGN=CENTER>Name5</TD> </TR> </TABLE>

Cell Padding and Cell Spacing

<TABLE BORDER=3 CELLSPACING=12 CELLPADDING=12>
Cell padding controls the space between the cell contents and the edges of the borders.
Cell spacing controls the amount of white space inside the borders.

Normal

CELLSPACING=10

CELLPADDING=10

CELLSPACING=10
CELLPADDING=10

Note: It is important to always close the tags in tables: </TABLE>, </TR>, </TD>
.

Background colours

Colours can be specified for the backgrounds of table data cells, table rows and whole tables.
A <TD> bgcolor will override a <TR> bgcolor and a <TR> bgcolor will override a <TABLE> bgcolor.

Ed	Tom	Rick
Larry	Curly	Moe

The code for the above table is:
<TABLE BORDER=3 BGCOLOR="#FF6633"> <TR BGCOLOR="#009900"> <TD BGCOLOR="#9999FF">Ed</TD> <TD>Tom</TD> <TD>Rick</TD> </TR> <TR> <TD>Larry</TD> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>

Background images

You can put a reference to a background image wihtin the TABLE, TR or the TD tags.
The only problem is that Internet Explorer and Netscape display them differently. Unfortunately, in Netscape you can't get one whole image inside the table. So, unless they've updated Netscape, the following table will display an image in tiles (in Netscape).

1	3	8	19	?
5	14	35	80	?

The only consistent way of putting a background image in is to specify the image inside the TD tag. This means the same image is tiled inside each table data cell. For this reason it's best to choose images which can tile properly.
For example:

1	3	8	19	?
5	14	35	80	?

The COLSPAN function

Basically, the COLSPAN statement goes inside the TD tag and specifies how many columns this cell will take up. You sometimes want one cell to overlap the next cell instead of just leaving a blank space.

For example: For one table data cell you type: <TD COLSPAN=2>Ed</TD>

Ed		Rick
Larry	Curly	Moe

If there were more than two items in the first table row, then the table would flow on to form another column - like this:

Ed		Tom	Rick
Larry	Curly	Moe

Hyperlinks and styled text

You can make an item with the usual bold, italic etc within the table.
You can even make a hyperlink within the table.
For example:

Ricky
Larry	Curly	Moe

<TABLE BORDER=0 BGCOLOR="0099FF" CELLPADDING=19 CELLSPACING=19> <TR BGCOLOR="FFFFFF"> <TD COLSPAN=3 ALIGN=CENTER><I><B>Ricky</B></I></TD> </TR> <TR BGCOLOR="FFFFFF"> <TD>Larry</TD> <TD><A HREF="www.smh.com.au/">Curly</A></TD> <TD>Moe</TD> </TR> </TABLE>

The ROWSPAN function

You can probably guess what the rowspan function is and how it works:

Ed	Tom
	Curly	Moe

<TABLE BORDER=5 BGCOLOR="0099FF" CELLPADDING=19 CELLSPACING=19> <TR BGCOLOR="FFFFFF"> <TD ROWSPAN=2>Ed</TD> <TD COLSPAN=2>Tom</TD> </TR> <TR BGCOLOR="FFFFFF"> <TD>Curly</TD> <TD>Moe</TD> </TR> </TABLE>

As above you can see that it is possible to put a table within a table.
Table Data can be a list of things, not just one word or one image.
So, now you know how to put text in different horizontal positions on screen and put some text next to an image.

For example:

Ingredients for Apple Pie;

Apples
Flour
Sugar
Cinnamon

<TABLE> <TR> <TD ALIGN="right"> <IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138> </TD> <TD> VALIGN="middle">   Ingredients for Apple Pie;    <UL> <LI>Apples <LI>Flour <LI>Sugar <LI>Cinnamon </UL> </TD> </TR> </TABLE>

Horizontal alignment

Just for the record, tables can be centered.
I dont know if they can be aligned right, but the default is aligned left.

Put more than one item inside a <TD> tag

You might want to know that you can put in more than one item inside a <TD> tag; so you can have more than one item per cell of the table. If you separate them with <BR>, then they will be on different lines, otherwise they will be next to each other.

Breaking a picture up into sections

To decrease download time, this pic has been broken up into normal gifs and animated gifs.
The animated gifs are obviously larger, so on this image it occupies its own small section.
The table has CELLPADDING=10 to separate the sections, otherwise the sections should butt up against each other.

			I didn't do the pic by the way - it has been stolen from Boris Vallejo

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=10> <TR> <TD ROWSPAN=3><IMG SRC="dragon/dragon4.gif" WIDTH=250 HEIGHT=406></TD> <TD><IMG SRC="dragon/dragon3.gif" WIDTH=122 HEIGHT=109></TD> <TD ROWSPAN=3><IMG SRC="dragon/dragon5.gif" WIDTH=219 HEIGHT=406></TD> </TR> <TR> <TD><IMG SRC="dragon/anidrag.gif" WIDTH=122 HEIGHT=50></TD> </TR> <TR> <TD><IMG SRC="dragon/dragon2.gif" WIDTH=122 HEIGHT=247></TD> </TR> </TABLE>

There are three rows and three columns in this table.
The 1st column is one image that takes up 3 rows (ROWSPAN=3)
The 2nd column is made of 3 images in 3 rows.
Their pixel heights add up to the same height as the first pic of course, because they are cropped sections from the same image.
The 3rd column is one image that takes up 3 rows (ROWSPAN=3)

If you try this and you find there are unwanted spaces within the joins of the sections of the image (ie - not butting up), there are reasons for this:

One reason is not setting CELLPADDING and CELLSPACING to 0. The usual defaults are usually 1 and 2 respectively.
The most common reason is carriage returns within the coding of individual <TD> cells:
If you use the images as links, you'll want to make sure that the attribute BORDER="0" is in the image tag or you might get not only spaces, but blue boxes around the sections (blue or whatever your link color is). Actually, it is good practice to include BORDER="0" in there anyway, because some browsers may default at 1
Keep in mind that these things can be happening one at a time, or in combination. Also, even with these three direct causes eliminated, you may find that something else is causing the problem indirectly.

To see more examples of tables, visit: http://www.pagetutor.com/pagetutor/tables/neetstuf/neetstuf.html