<table border="4">
<tr>
<th>What are tables used for?</th>
</tr>
<tr>
<td>Tables are used to make your page easier to interpret or to make your document look better.</td>
</tr>
</table>

Coding Tables can be challenging! It's not difficult really, but it does take time to get the hang of it. Tables begin with the <table> tag and usually contain the border=n. If you set the border=0, your table will be invisible. If you don't use the border attribute the table border is usually invisible. This is very useful when you want to align text or images in rows and columns, but don't want a table border around it. border=1 is a thin border. border="2" is a little thicker, border=3 a little thick yet and so on. The table MUST end with a </table> tag, or the table will not appear at all!

Example of tables with and without borders...

This table has a border of 0. <table border="0"> <tr> <td>This table has a border of 0.</td> </tr> </table>

This table has a border of 3. <table border="3"> <tr> <td>This table has a border of 3.</td> </tr> </table>

Each row within the Table is defined by the opening <tr> and closing </tr> tags. Each Table Row contains cells, defined by the opening <td> and closing </td> tags. Most Table Rows contain more than one Cell, and quite often you need to define a heading for each cell. To do this you will use the opening <th> tag and closing </th>. The text within the <th></th> tags will be CENTERED and BOLDED.

Example of a Table with multiple Rows and Columns.

Heading 1	Heading 2	Heading 3	Heading 4
Cell A	Cell B	Cell C	Cell D
Cell E	Cell F	Cell G	Cell H

<table border="2">
<tr>
<th>Heading 1</th><th>Heading 2</th><th>Heading 3</th><th>Heading 4</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
<td>Cell D</td>
</tr>
<tr>
<td>Cell E</td>
<td>Cell F</td>
<td>Cell G</td>
<td>Cell H</td>
</tr>
</table>

There are many variations of how you can make your tables appear.
You will notice rowspan="2" has been introduced below.
This allows that cell to span two rows.

Heading 1	Heading 2	Heading 3	Heading 4
Cell A	Cell B	Cell C	Cells D &. H
Cell E	Cell F	Cell G

<table border="2">
<tr>
<th>Heading 1</th><th>Heading 2</th><th>Heading 3</th><th>Heading 4</th>
</tr>
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
<td rowspan="2">Cells D & H</td>
</tr>
<tr>
<td>Cell E</td> 
<td>Cell F</td> 
<td>Cell G</td>
</tr>
</table>

Similarly, the colspan="2" attribute allows a cell to span two cells.

Heading 1	Heading 2	Heading 3	Heading 4
Cells A & B		Cell C	Cell D
Cell E	Cell F	Cell G	Cell H

<table border="2">
<tr>
<th>Heading 1</th><th>Heading 2</th><th>Heading 3</th><th>Heading 4</th>
</tr>
<tr>
<td colspan="2">Cells A & B</td>
<td>Cell C</td>
<td>Cell D</td>
</tr>
<tr>
<td>Cell E</td>
<td>Cell F</td>
<td>Cell G</td>
<td>Cell H</td>
</tr>
</table>

Controlling the CONTENT within your TABLES
There are two ways you can control the content within your Table Cells (<td></td>).
First, you can ALIGN your text <td align="center"> <td align="left"> or <td align="right">.

Example of Cells using the ALIGN attribute:

Header 1	Header 2	Header 3
Cell C align="left"	Cell A align="center"	Cell B align="right"

<table width="100%" border="2">
<tr>
<th>Header 1</th><th>Header 2</th><th>Header 3</th>
</tr>
<tr>
<td align="left">Cell C</td>
<td align="center">Cell A</td>
<td align="right">Cell B</td>
</tr>
</table>

Take this one step further and VALIGN your cells.
The valign attribute allows you to place your text or image at the top, bottom or in the middle of your document. <td valign="top">, <td valign="middle"> or <td valign="bottom">
(You'll notice that I've added the WIDTH attribute to the table. It's always a good idea to define the width of your tables
(<table width="100%" border="2">). This fixes your table in a specific spot on your page. Your document will also load faster.)
I've added height="60" to the Cells so you can visualize what occurs within a Table Cell when the VALIGN element is added.

Header 1	Header 2	Header 3	Header 4
Cell A valign="bottom"	Cell B valign="top"	Cell C valign="middle"	Cell D & H No alignment specified rowspan="2"
Cell E valign="top"	Cell F valign="middle"	Cell G valign="bottom"

<table width="100%" border="2">
<tr>
<th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th>
</tr>
<tr>
<td height="60" valign="bottom">Cell A</td>
<td height="60" valign="top">Cell B</td>
<td height="60" valign="middle">Cell C</td>
<td rowspan="2">Cell D & H</td>
</tr>
<tr>
<td height="60" valign="top">Cell E</td>
<td height="60" valign="middle">Cell F</td>
<td height="60" valign="bottom">Cell G</td>
</tr></table>

The next step is to define the widths of your Table Cells.
<td width="25%" align="left" valign="middle">Some Text</td> and various combinations are possible, giving you more control over how your web page will look.

Example using the WIDTH, ALIGN & VALIGN, COLSPAN & ROWSPAN attributes within the Table Cell. Again, I've added the HEIGHT attribute to the Table Cells.
This Table is centered as well. <center></center>

Header 1	Header 2	Header 3	Header 4
Cell A width="25%" align="left" valign="bottom"	Cell B width="25%" align="center" valign="middle"	Cell C width="25%" align="right" valign="top"	Cells D & H rowspan="2" No alignment set. Most Browsers default to align="left" and valign="middle"
Cells E & F colspan="2" align="right" valign="middle"		Cell G align="center" valign="bottom

<center><table width="80%" border="2">
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<td width="25%" height="60" align="left" valign="bottom"><b>Cell A</b></td>
<td width="25%" height="60" align="center" valign="middle"><b>Cell B</b></td>
<td width="25%" height="60" align="right" valign="top"><b>Cell C</b></td>
<td width="25%" rowspan="2"><b>Cells D & H</b></td>
</tr>
<tr>
<td width="50%" colspan="2" align="right" valign="middle">Cells E & F</td>
<td width="25%" height="60" align="center" valign="bottom">Cell G</td>
</tr>
</table></center>

Adding an IMAGE
<img src="your_image.gif">
Attributes which should be included within the IMG SRC tag are: <img src="your_image.gif" width="n" height="n" alt="your description"> ("n" is the width or height of your image in pixels.) The ALT attribute gives a description of your image when hovered over. Also, there are still people who travel the Internet with images disabled in their Browser Options, and the alternate text you apply to your image will give them something to look at other than just an x. Your line of code may look something like this:
<img src="your_image.gif" width="n" height="n" alt="A Description Here">. Adding the WIDTH & HEIGHT elements helps your page load faster.

Other attributes that can be applied to the IMG SRC tag are ALIGN="RIGHT" or ALIGN="LEFT", HSPACE="n" and VSPACE="n", BORDER="n". ALIGN="RIGHT" will place the IMAGE on the far right side of your page. Your text will be to the left of the IMAGE. ALIGN="LEFT" will place the IMAGE on the left side. Your text will be to the right of the image. HSPACE adds HORIZONTAL spacing to your IMAGE, while VSPACE adds VERTICLE space to your image. Adding the BORDER attribute is optional. BORDER="0" will give your image NO border. As with TABLES, the larger the number the thicker the border.

Examples using the above table:

Header 1	Header 2	Header 3	Header 4
Cell A <td width="25%" align="left" valign="bottom"> <img src="pics/rose-ico5.gif" width="56" height="42" border="0" alt="rose">	Cell B <td width="25%" align="center" valign="middle"> <img src="pics/rose-ico5.gif" width="56" height="42" border="0" alt="rose">	Cell C <td width="25%" align="right" valign="top"> <img src="pics/rose-ico5.gif" width="56" height="42" border="0" alt="rose">	Cells D & H <td rowspan="2"> No alignment set. Most Browsers default to align="left" and valign="middle" <img src="pics/rose-ico5.gif" width="56" height="42" border="0" alt="rose">
Cells E & F <td colspan="2" align="right" valign="middle"> <img src="pics/rose-ico5.gif" width="56" height="42" border="0" alt="rose">		Cell G <td align="center" valign="bottom> <img src="pics/rose-ico5.gif" width="56" height="42" border="0" alt="rose">

What you have learned here are the basics. Check out the Glossary for other tags that will help make your document something you enjoy viewing. Practice typing your own tables so you get familiar with using HTML. Save your work as an .html or .htm file. Open your browser, click File→ Open and find your saved HTML file. Now, you can preview your work in your browser. Don't close your browser. As you make changes to your document, simply save it after each change you make, then hit the Refresh button on your browser to view your new changes.