Tables

TABLES are used to present data in rows and columns on a web page. They can be used to anchor text and images on a page.

All table structures begin with the TABLE tag, closing tags are required for all table related tags. Beginners should also avoid building a table within a table.

Table Tag
<table></table>
Attributes within the TABLE tag:

•WIDTH=measurements are in pixels or percentage. For best results, because most surfers do not use full view when browsing, do not exceed a 500 or 600 pixel setting. Or try a percentage setting of 90%.

•BORDER=border settings are a matter of preference. Experiment and decide which works best for you. Zero is no border. One is a single border. Two is 3 dimensional. Successive numbers increase the thickness of the 3 dimensional effect.

•CELLPADDING=specifies the distance in pixels of the text or image from the inside wall of a cell.

•CELLSPACING=specifies in pixels, the spacing between cells in a table.

•BGCOLOR=sets and overall background color for the entire table. You can also use bgcolor in row and cell tags to produce multi color effects.

•BACKGROUND=for adding a background image to the table. You can use style sheets for this setting, but because of incompatibilty problems with Netscape it is best to use this method.

Row Tag

<tr></tr>
The ROW tag is used to define rows in a table. A row can contain numerous cells defined by the column tag.

Attributes within the row tag:

•ALIGN=horizontal alignment. Choices are left, right or center.

•VALIGN=vertical alignment. Choices are top, middle or bottom.

•CELL OR COLUMN TAG=used to define the cells in a row.

Column Tag
<td></td>
The COLUMN tag is used to define columns in a table.

Attributes within the column tag:

•ALIGN=horizontal alignment. Choices are left, right or center.

•VALIGN=vertical alignment. Choices are top, middle or bottom.

•BGCOLOR=set individual background colors for cells.

•WIDTH=measurements in pixels or percentage.

This is the basic code for the following table: (single row - 2 column)

<table width="200" border="1"> <tr> <td>Column One</td> <td>Column Two</td> </tr></table>
Column One Column Two

From the first example, lets change some of the coding and see how it affects the appearance fo the table.

<table width="400" border="3"> <tr><td align="center"> Column One </td> <td align="center">Column Two</td> </tr></table>
Column One Column Two

The changes made:

• Setting the width of the table to 400 from 200.
• Changed border setting to 3 for a three dimensional effect.
• Added the align="center" attribute to both cells.

*Removing the Border*

<table width="400" border="0"> <tr><td align="center"> Flag</td> <td align="center"><img src="flag17.gif"></td> </tr></table>
Flag

Tables and Text

One of the hardest things for a beginner in HTML to do, is to control text on a page. The following code sequence can be used to anchor a paragraph on a web page, centered and left justified.

The code:

<table width="200" border="1"> <tr align="center"> <td align="left"> <p align="left"> The use of tables in a document can be confusing at first but, if you remember a few simple rules, they can be mastered very quickly. Always use pairs of tags.</p> </td></tr></table>

The use of tables in a document can be confusing at first but, if you remember a few simple rules, they can be mastered very quickly. Always use pairs of tags.

Spanning Columns and Rows

Spanning is a very useful table creation tool. Cell spanning allows you to alter the size of cells to your own needs.

Use the COLSPAN= attribute to span one cell across two or more existing cells.

<TABLE BORDER="1"> <TR> <TD>Cell A</TD> <TD>Cell B</TD> <TD>Cell C</TD> </TR> <TR> <TD COLSPAN="2">Cell D</TD> <TD>Cell F</TD> </TR> </TABLE>
Cell A Cell B Cell C
Cell D
Cell F
Notice Cell D is SPANNED across two cells.

Use the ROWSPAN= attribute to span one cell across two or more existing cells.

<TABLE BORDER="1"> <TR> <TD>Cell A</TD> <TD>Cell B</TD> <TD ROWSPAN="2">Cell C</TD> </TR> <TR> <TD>Cell D</TD> <TD>Cell E</TD> </TR> </TABLE>
Cell A Cell B Cell C
Cell D Cell E

Notice Cell C is now SPANNED across two cells and ROWS.

Color in Tables

For browser compatibility color settings in tables should use the inline bgcolor attribute:

bgcolor="red"
bgcolor="#ff0000"

Tags that accept the bgcolor attribute are:

<table>(IE) <th> <td> The code below shows how to set the color within the tags that accept the bgcolor attribute.

<table width="200" cellpadding="2" cellspacing="15" border="0" bgcolor="#000000"> <tr><th colspan="2" bgcolor="#FF6666">Heading</th></tr> <tr> <td bgcolor="#996699">Column 1</td> <td bgcolor="#6666FF">Column 2</td> </tr></table>
Heading
Column 1 Column 2

Untitled

BACK