Table Tutorial

The purpose of this tutorial is to help you understand the mechanics involved in making the useful and versatile table, and simultaneously serve as a memo to myself.

Tables are useful as data organizers and great fun to make because you can control it's size and placement within your web page.
The red border you see at the left of this paragraph is generated by using a simple table a small example of it's versatility.

Below are the HTML tags Required To Construct a Table.

1. <table> the "element". Below the "attributes". Each of these tags require it's closing tag. I.E. </table>

2. <tr>initiates the table row, and below is the container which contains the row data.

3. <td>the data container; text, images, links</td>

4. <th> heading = same as <td> except it centers and renders text bold.

As we shall see, within the above tags several other attributes can be contained such as table WIDTH to help in fine tuning.

The the above tags are all that is required to construct a table. Note that each of the opening tags requires a closing tag, and in the order shown in the example below.

Example; <table> is the opening tag, and </table> is the closing tag signaling your browser that the table is terminated.

For example the closing tags for the table which follows would be in the order shown:

<table><tr> <td>Table data: text, images. links. </td></tr></table>.

Because screen resolutions can vary from 544 to 372 pixels for web-tv, up to 1600 x 1200 for computers it's a good idea to specify table width in terms of percent rather than pixels. The most popular screen resolution for computers is 1024 to 768 is pixels.

Some helpful table definitions are shown below.

Row 1 -->	column 1	column 2	column 3	column 4
Row 2 -->	cell 1 spans 2 rows	CELL-2	CELL-3	CELL-4
Row 3 -->	cell 1 spans 2 rows	CELL-5	CELL-6	CELL-7
Row 4 -->	CELL-8	cell 9 spans 2 rows	CELL-10	CELL-11
Row 5 -->	CELL-12	cell 9 spans 2 rows	CELL-13	CELL-14
Row 6 -->	CELL-15	CELL-16	cell 17 spans 2 rows	CELL-18
Row 7 -->	CELL-19	CELL-20	cell 17 spans 2 rows	CELL-21
Row 8 -->	CELL-22	CELL-23	CELL-24	cell 25 spans 2 rows
Row 9 -->	CELL-26	CELL-27	CELL-28	cell 25 spans 2 rows
Row 10 -->	CELL-29 SPANS FOUR COLUMNS

Let's begin with the most basic table we can make, and step by step build upon it and note the effect each of the attributes has on the table..

THIS IS THE CODE COLUMN

THIS IS THE RESULTS COLUMN ATTEMPTING TO MIMIC A WEB-PAGE.

The single data cell table shown below is the most basic table one can make.

Not much but hold on.

The table code below yielded a single row 2 column table.

cell-1

cell-2

A 2 row 3 column table.

cell-1	cell-2	cell-3
cell-4	cell-5	cell-6

The table with a border added.

cell-1

cell-2

cell-3

CELLSPACING creates a space around data cells.

cell-1

cell-2

cell-3

CELLPADDING expands the space around the data cells.

cell-1

cell-2

cell-3

Notice that up to now the table is against the left side of the page. That is because the table alignment is to the left by default. We can align the table to the "center" and to the "right" of the page as well. Below the table is aligned to the center of page.

<table ALIGN="CENTER" border="5" ><tr> <td>cell-1</td> <td>cell-2</td><td>cell-3 </td></tr> </table>

cell-1

cell-2

cell-3

The table WIDTH defines width in terms of screen resolution. Example; if your screen width resolution is set to 800 pixels a specified table width of 800 will fill the width of the screen. A width specified in percent of 100% will do the same.

<table WIDTH="300" border="5"><tr><td>Width= 300 pixels</td></tr></table>

Width= 300 pixels

Cell WIDTH and HEIGHT fixes and preserves a uniform width and height independant of content.

cell-1

cell-2

cell-3

Just as the table can be aligned with respect to page, so can the data cell content can be aligned with respect to cell. The default cell alignment is to the left.

cell-1

cell-2

cell-3

Data cell content aligned right.

cell-1

cell-2

cell-3

The data within a cell can also be aligned verticaly.
Notice cell-1 was repeated 3 times in order to create sufficient height to notice the effect.

cell-1
cell-1
cell-1

cell-2

cell-3

Colspan controls how many columns a cell will span. Here is a good place to also demonstrate the effect of the <TH> attribute. This attribute is similar to the <TD> attribute it differs in that it renders bold text.

<table width="360" align="left" border="5"><tr> <TH COLSPAN="3" align="center">A HEADLINE FOR COLSPAN.</TH></tr><tr> <td>cell-1 </td> <td>cell-2</td><td>cell-3</td></tr></table>

A HEADLINE FOR COLSPAN.
cell-1	cell-2	cell-3

Rowspan controls how many rows a cell will span.

<table width="360" align="center" border="5"><tr> <td colspan="4" align="center">THIS CELL SPANS 4 COLUMNS.</td></tr> <tr> <td>cell 1 </td> <td>cell 2</td> <td ROWSPAN="2">THIS CELL SPANS 2 ROWS <td>cell 3 </td> </tr><tr> <td>cell 4</td> <td>cell 5</td> <td>cell 6</td></tr></table>

THIS CELL SPANS 4 COLUMNS.
cell 1	cell 2	THIS CELL SPANS 2 ROWS	cell 3
cell 4	cell 5	THIS CELL SPANS 2 ROWS	cell 6

How about some color! Yes a table can have a background color "BGCOLOR".

<table width="360" BGCOLOR="LIGHTSALMON" align="center" border="5"<tr> <td colspan="3" align="center">A table with "LIGHTSALMON" background. </td></tr><tr> <td>cell-1 </td> <td>cell-2</td><td>cell-3</td></tr></table>

A table with "LIGHTSALMON" background.
cell-1	cell-2	cell-3