Simple Table Commands

Tables are the most used format to construct web pages. They can be simple or complex. If there is one thing you should master as a beginner, it's understand tables.

A table can look like this:

Or a table can look like this:

Here is the basic code to create the first table above:

<TABLE>
<CAPTION>Colors</CAPTION>

<TR>
<TD> Red</TD>
<TD> Orange</TD>
<TD> Yellow</TD>
</TR>

<TR>
<TD> Green</TD>
<TD> Teal</TD>
<TD> Purple</TD>
</TR>

<TR>
<TD> Blue</TD>
<TD> Brown</TD>
<TD>Black</TD>
</TR>

</TABLE>

The command or tag for table is <TABLE> </TABLE> .

A table MUST also include a tag for creating the row <TR> </TR> and MUST include a tag for displaying the data <TD> </TD> .

• <TABLE> starts and ends the entire thing.
• <CAPTION> and </CAPTION> is optional. It places a caption over your table. The caption will be bolded and centered.
• <TR> is used when you want a new Table Row to begin. You must end every table row with an </TR>.
• <TD> denotes Table Data. You must put this in front of every piece of information you want in a cell. You must end every one that you open with an </TD>.
• </TABLE> ends the whole deal.

What Is Happening?

What table commands do is create a series of cells. Each cell's data is denoted by the <TD> command.

Please note that even though the program above has each cell (or TD) command on a new line, the cells keep going to the right until you tell the computer that a new row of cells will start by using the <TR> or Table Row command.

You use the <TD> command to make cells across, and use <TR> to create a new row.

Whatever follows the <TD> command will appear in the cell. And the cells, by column, will be of equal size using the largest cell as the model for the others.

Table Attributes

Four frequently used <TABLE> attributes are:

• BORDER, to draw a border around the table and each cell
• CELLSPACING, to create spaces between each cell
• CELLPADDING, to create spaces between the sides of the cell and the text
• ALIGN, to align the table on the page and also with <TD> to align the text within the cell.

To create Table 2 above, the following code was used:

<TABLE BORDER="1" CELLSPACING="1" CELLPADDING="1">
<CAPTION>Table 2: Colors</CAPTION>

<TR> <TD ALIGN = "center"> Red</TD>
<TD ALIGN = "center"> Orange</TD>
<TD ALIGN = "center"> Yellow</TD>
</TR>
<TR>
<TD ALIGN = "center"> Green</TD>
<TD ALIGN = "center"> Teal</TD>
<TD ALIGN = "center"> Purple</TD>
</TR>

<TR>
<TD ALIGN = "center"> Blue</TD>
<TD ALIGN = "center"> Brown</TD>
<TD ALIGN = "center"> Black</TD>
</TR>

</TABLE>

NOTE: Although the default value for BORDER, CELLSPACING, CELLPADDING, is 0 (zero), it is better to explicitly declare them for better control over format between browsers and browser versions.

Activating Cells For Links

Below is an example of adding the Hypertext Link Tag within a table's cell:

The commands are the same for this table except you place a link command after the <TD> command. Here's what the command for the upper left-hand cell looks like:

<TD align = "center">
<A HREF="http://www.newburyport.k12.ma.us/high/">NHS Home Page</A>
</TD>

The BORDER, CELLSPACING, AND CELLPADDING commands are all set at 20 in the above table to give you an example of some larger numbers.

Images In Cells

This is the most frequent way to display a photo album.

	<---Newburyport High School
Newburyport High School--->

All you have done is followed the TD command with an image command. Again, the command that creates the upper left-hand cell is this:

<TD ALIGN = "center">
<IMG SRC="HighSchool.jpg">
</TD>

You can create tables with one cell or one hundred cells. In the next section, we will look at advanced table commands such as COLSPAN, ROWSPAN, and nested tables.

Home	Previous	Next