More Tables

Objectives

In this module you will learn to create more advanced tables to organize your text, hyperlinks, and images. In the previous module you learned the basics of creating and formatting basic text tables. Now you will use those elements in conjunction with the elements used to insert hyperlinks and images. You will also learn to manipulate cells to get the look you want.

Spanning Columns and Rows

Spanning columns and rows is a frequently used technique that allows you to expand a cell across more than one row or column. You use the rowspan or colspan attributes in the element set with the number of rows or columns you wish to span. For example, <td rowspan="2"> or <td colspan="2">.

Inserting Hyperlinks

A good way to organize and present your hyperlinks is to display them in a table. Simply insert the <a href> tag in as you table data. Here is a table with a few hyperlinks.

<table border="3" width="50%" align="center">
<tr>
<td><a href="http:\\www.yahoo.com\">Yahoo!</a></td>
<td><a href="http:\\www.oocities.org\">Geocitites</a></td>
</tr>
</table>

The result is the table below.

Images

Images can be inserted in the same manner. By putting the <img src> element in as the table data you can put images side by side or even beside text.

<table width="50%" align="center">
<tr>
<td rowspan="3"><img src="wtclogo.jpg"></td>
<td>Western Texas College</td>
</tr>
<tr>
<td>Computer Science</td>
</tr>
<tr>
<td>Snyder, Texas</td>
</tr>
</table>

The result would look like this:

	Western Texas College
	Computer Science
	Snyder, Texas

Sometimes, the web site designer finds that it is difficult to get the images to nestle up against one another. This causes frustration as authors attempt to achieve a smooth and consistent look. There are several reasons why images won't align properly.

In the table tag, it is helpful to include the width in percentages, such as:
< table width = "100%" >
This is especially helpful if one user has their system set at 640x480 and another has it set at 800x600. The table widths will be determined as a percentage of the width instead of by pixels. An example of determining the table width by pixels is:
< table width = "500" >

Another problem is that some browsers will put a gap in the table at the bottom. The culprit is the </td> tag. This tag needs to be on the same line as the last entry on the table with no spaces or blank lines between them.

It is possible to 'nest' tables, that is, you can put tables inside of tables. However, it does get complicated, so be sure that you understand the code because one line out of place can cause major problems with nesting.