HTML Explained

Tables

Tables have a variety of uses. They can show columns of text alongside each other, as in newspaper / magazine columns. They are often used purely to place text or graphics evenly spaced alongside each other.

You have a wide choice of table styles, ie whether to have borders, the border width, the gap between cells, spacing inside cells, border color, cell or table background color or images. It is also possible to make a cell take up the space of 2 or more cells, making 1 larger cell.

The table is defined in the following example:

<TABLE>
<TR><TD>Row 1 Column 1 Table Data</TD><TD>Row 1 Column 2 Table Data</TD></TR>
<TR><TD>Row 2 Column 1 Table Data</TD><TD>Row 2 Column 2 Table Data</TD></TR>
</TABLE>

Each row is defined between the <TR> and </TR> tags (table row). Within each row, each cell (column) is defined between the <TD> and </TD> tags (table data). Of course, the whole table is defined between the <TABLE> and </TABLE> tags.

The <TD> tag accepts many attributes to extend the functionality and usefulness of the table.
Specifying the ROWSPAN attribute enables the cell to span over a number of rows, and likewise the COLSPAN attribute enables the cell to span over a number of columns, as follows:

<TD ROWSPAN=n></TD>
<TD COLSPAN=n></TD>

where 'n' represents the number of rows or columns to span.

Tables can be viewed with a border by specifying the BORDER attribute of the <TABLE> tag.
The border color can be specified with the BORDERCOLOR attribute of the <TABLE> tag.

Following is an example which uses each of the tags and attributes for tables mentioned above. If you can't work out how it is done then select to view the HTML source in your browser. Note, you will also see some additional tag attributes not already mentioned. See if you can work out what they do: