HTML Tables 
       
                   

Tables in HTML

Whether you realized it or not, you have already seen many examples of tables in HTML. Every one of my examples have been arranged on the screen by a table. Tables can be very confusing if you do not understand exactally what you are doing, but once you understand them, they become indispensable.

You can think of an HTML table as you would any other table; a collection of columns and rows. Every table starts with a <TABLE> tag, and ends with </TABLE>. Further, each row begins with a <TR> tag, which stands for Table Row, and ends with </TR>. Inside these pair of tags, we define the actual information we want to be in the table by surrounding it with the pair of tags <TD> and </TD>, which stands for Table Definition.

The basic syntax structure of a table is: 

<TABLE>
<TR>
<TD>
   .
   HTML Code
   .
</TD>
</TR>
</TABLE>

As in earlier sections, HTML Code can be text, links, images, or any other HTML construct.
Our first example will be a very simple table, one row and one column.

Example:
Note: For this section I will offset the examples with horizontal rules in order to avoid confusion. 
<TABLE>
<TR>
<TD>
This is a very simple table.
</TD>
</TR>
</TABLE>
This is a very simple table.
You may be thinking to yourself right now that you can't see anything different. This is because as a default, table borders are invisible. In order to see them, we must use the parameter BORDER on the <TABLE> tag. We can do our first example again to demonstrate this parameter.
Example:
<TABLE BORDER>
<TR>
<TD>
This is a very simple table.
</TD>
</TR>
</TABLE>
This is a very simple table.

Adding more rows and columns is very easy. If you want another column, add another <TD> and </TD> pair between the <TR> and </TR> tag. This is demonstrated in the next example. 

<TABLE BORDER>
<TR>
<TD>
<IMG SRC = "centauri2.jpg">
</TD>
<TD>
The Centauri galaxy.
</TD>
</TR>
</TABLE>
The Centauri galaxy.

To add another row, we add another <TR> and </TR> pair inside <TABLE> and </TABLE>. The next example shows this. 

<TABLE BORDER>

<TR>
<TD>
  <IMG SRC = "centauri2.jpg">
</TD>
<TD>
  The Centauri galaxy.
</TD>
</TR>

<TR>
<TD>
  If you don't understand, re-read this section
</TD>
<TD>
  <A HREF = "tables.html">Tables in HTML</A>
</TD>
</TR>

</TABLE>
The Centauri galaxy.
If you don't understand, re-read this section Tables in HTML

You can see from these examples that the table will create the table and cell borders automatically. Each column will be as wide as the widest element in it. Likewise, rows will be made the same height as the highest element in it. This is all that you need to know in order to make basic tables.
There are a few other tags which are mainly used for cosmetic purposes. One of the most used is the <CAPTION> tag, which will put a caption either above or below the table. As a default, the caption will appear above the table, but using ALIGN as a parameter you can move it to the bottom of a table. 

<TABLE BORDER>
<CAPTION ALIGN = BOTTOM>The Centauri Galaxy</CAPTION>
<TR>
<TD>
<IMG SRC = "centauri2.jpg">
</TD>
<TD>
The Centauri galaxy.
</TD>
</TR>
</TABLE>
The Centauri Galaxy
The Centauri galaxy.

You may decide that you want to label the top of each column in order to better identify what it is. To do this, you use the <TH> and </TH> tags. This pair of tags works in exactally the same way as the <TD> and </TD> tags, except that all text in the cell is made bold. You must also remember to put these headings into a new row. 

<TABLE BORDER>
<CAPTION ALIGN = BOTTOM>The Centauri Galaxy</CAPTION>
<TR>
<TH>
Image
</TH>
<TH>
Description
</TH>
</TR>
<TR>
<TD>
<IMG SRC = "centauri2.jpg">
</TD>
<TD>
The Centauri galaxy.
</TD>
</TR>
</TABLE>
The Centauri Galaxy
Image Description
The Centauri galaxy.

The other features of tables come in the form parameters for the <TABLE> tag. They are BORDER, CELLSPACING, CELLSPADDING, and WIDTH.
The BORDER parameter can be used to make the border of the table larger. We have been using BORDER without an argument just to be able to see the boundaries of the table, but we can also put higher numbers with it to give more definition to the table. 

<TABLE BORDER = 10>
<TR>
<TD>
<IMG SRC = "centauri2.jpg">
</TD>
<TD>
The Centauri galaxy.
</TD>
</TR>
</TABLE>
The Centauri galaxy.

CELLSPACING changes the amount of space between the cell borders of the table. CELLPADDING puts space in between the items in the cell and its inside border. It is very easy to mix these two up. Especially when you are dealing with tables that do not have borders, and they will give you similar results. The next example will contrast their functions. 

<TABLE BORDER CELLSPACING = 20>
<TR>
<TD>
<IMG SRC = "centauri2.jpg">
</TD>
<TD>
The Centauri galaxy.
</TD>
</TR>
</TABLE>
The Centauri galaxy. 

<TABLE BORDER CELLPADDING = 20>
<TR>
<TD>
<IMG SRC = "centauri2.jpg">
</TD>
<TD>
The Centauri galaxy.
</TD>
</TR>
</TABLE>
The Centauri galaxy.