Table Attributes

There are several attributes that can be used with tables:

Row 1, Cell 1
spcholdr.gif - 49 Bytes
Row 1, Cell 2
spcholdr.gif - 49 Bytes
Row 2, Cell 1
spcholdr.gif - 49 Bytes
Row 2, Cell 2
spcholdr.gif - 49 Bytes
Backgrounds can be added to each cell by using the BACKGROUND tag

<TD BACKGROUND="graphics/redchalk.jpg">Row 1, Cell 1</TD>

Row 1, Cell 1
spcholdr.gif - 49 Bytes
Row 1, Cell 2
spcholdr.gif - 49 Bytes
Row 2, Cell 1
spcholdr.gif - 49 Bytes
Row 2, Cell 2
spcholdr.gif - 49 Bytes
or by using the BGCOLOR tag

<TD BGCOLOR="#FFFFFF">Row 1, Cell 1</TD>

Row 1, Cell 1
spcholdr.gif - 49 Bytes
Row 1, Cell 2
spcholdr.gif - 49 Bytes
Row 2, Cell 1
spcholdr.gif - 49 Bytes
Row 2, Cell 2
spcholdr.gif - 49 Bytes
We can control the width of the borders by using the BORDER tag

<TABLE BORDER="10">

Row 1, Cell 1
spcholdr.gif - 49 Bytes
Row 1, Cell 2
spcholdr.gif - 49 Bytes
Row 2, Cell 1
spcholdr.gif - 49 Bytes
Row 2, Cell 2
spcholdr.gif - 49 Bytes
The color of the border can be controlled by using the BORDERCOLOR tag.

<TABLE BORDER="10" BORDERCOLOR="RED">

Row 1, Cell 1
spcholdr.gif - 49 Bytes
Row 1, Cell 2
spcholdr.gif - 49 Bytes
Row 2, Cell 1
spcholdr.gif - 49 Bytes
Row 2, Cell 2
spcholdr.gif - 49 Bytes
By using the CELLPADDING and CELLSPACING tags and turning off the border, we can put the cells next to eachother without any spaces between them.

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">

Here is an example of how this can be used.

Left
spcholdr.gif - 49 Bytes
Right
spcholdr.gif - 49 Bytes
Center
spcholdr.gif - 49 Bytes
By using the ALIGN tag, we can control the alignment of the contents of the cells.

<TD ALIGN="LEFT | RIGHT | CENTER"></TD>

Top Bottom
Middle
By using the VALIGN tag, we can control the vertical alignment of the contents of the cells.

<TD VALIGN="TOP | BOTTOM | MIDDLE"></TD>

Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2
Tables and their cells normally expand and contract to fit the contents of the cells.
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2
However, by using the HEIGHT and WIDTH commands, we can control the size of the table or its cells.

<TD HEIGHT="100" WIDTH="100">Row 1, Cell 1</TD>


Return to Main Menu or Basic Table Layout Page

If you have any problem browsing these pages, please contact stevegrn@comcast.net

This page was last modified