 |
|
|
Table Attributes: Spacing, borders, and colors
This page covers:
Border, Cellpadding & Cellspacing
Aligning Content within TD Cell
Adding Color to Table Cells
Table Border Colors
Border, Cellpadding, Cellspacing
Within the opening <TABLE> tag, you can add a variety
of attributes to determine how the table will look. You can specify the width of a table
(in pixels), add a border, add bacgkround color to the table, change the spacing
between cells (cellspacing) or change the cellpadding around the data within
cells (the space between the contents of cell and cell "walls"). The following code
examples will show you how. If the difference between cellpadding
and cellspacing seem confusing, this picture may help.
Attribute |
Accepted Values |
CODE |
| border |
pixel value
or percentage value (as a percentage of the width of a visitor's browser) |
<TABLE border="3"> OR
<TABLE border="90%"> |
| cellpadding |
pixel value (by default cellpadding is set
to 2 if you do not use this attribute in your opening table tag) |
<TABLE cellpadding="10"> |
| cellspacing |
pixel value (by default cellspacing is set
to 2 if you do not use this attribute in your opening table tag) |
<TABLE cellspacing="5"> |
Click here to view the example table.
Aligning Content within TD Cells
Within the <TD> tag, you can add the
align and valign attributes
to set the horizontal and vertical alignment of the contents of the cell.
Attribute |
Accepted Values |
CODE |
| align |
left, right, center |
<TD align="center"> |
| valign |
top, middle, bottom |
<TD valign="top"> |
Click here to view the example table.
Adding Color to Table Cells
You can add colors to tables by using
the bgcolor attribute. bgcolor can
be used with the TABLE, TR, and TD
elements. You can assign any valid web hexadecimal code or valid color name to the
bgcolor attribute. Note that when you assign different background
colors to all three elements, TABLE, TR, and
TD, the order of precedence goes from TD -->
TR --> TABLE. View the example for
clarification on this issue.
Table Border Colors
You can also change the color of table borders with the following attributes:
NOTE: Netscape does not support the bordercolorlight or
the bordercolordark attributes. Instead it takes the color you assign
to bordercolor and uses that color for the bottom and right of the table,
then automatically chooses a lighter shade of the color you chose for the top and left borders
of the table.
Also note that in Internet Explorer, if you use bordercolor
with bordercolorlight and bordercolordark,
the bordercolor is ignored. If you use bordercolor
and only one of the other attributes - either bordercolorlight or
bordercolordark, then IE will use the color assigned to the light or dark and
then use the bordercolor for the other.
You will probably want to view the example using both Internet Explorer and Netscape.
Next Page: Table Attributes: Spanning Cells
Previous Page: Introduction to HTML Tables
|
|
