Table Attributes
- As you can see, the basic table is horridly bland.
- Fortunately, the <TABLE> tag comes with several attributes to
make it look nicer.
- The attributes are shown in the table below:
| ATTRIBUTE |
DESCRIPTION |
| ALIGN |
Specifies the position of the table with respect to the document. This works the same
as the ALIGN parameter for images. Valid values include LEFT,
CENTER and RIGHT. |
| BGCOLOR |
Colors the table background just as it would when used with the
<BODY> tag. |
| BORDER |
Specifies the pixel width of the border that divides table cells
and the table itself. This table is set to BORDER = "0". |
| CELLPADDING |
Specifies the amount of space between the borders of a table
and the actual data in the cell. |
| CELLSPACING |
Specifies the amount of space inserted between table cells. |
| HEIGHT |
Specifies the height of the table in absolute pixels or as a
percentage of the available space. |
| WIDTH |
Specifies the width of the table in absolute pixels or as a
percentage of the available space |
Tables by Example
- Let's take a look at a few examples....
- Here is a basic table with no border.
| Column One Header |
Column Two Header |
| Row One/Column One |
Row One/Column Two |
| Row Two/Column One |
Row Two/Column Two |
- Here is the code for that table:
<TABLE>
<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>
<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>
<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
- Here is the same table with a border of 4.
| Column One Header |
Column Two Header |
| Row One/Column One |
Row One/Column Two |
| Row Two/Column One |
Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4">
<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>
<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>
<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
- Here is the same table with a border of 4 and a CELLPADDING of 10.
| Column One Header |
Column Two Header |
| Row One/Column One |
Row One/Column Two |
| Row Two/Column One |
Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" CELLPADDING = "10">
<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>
<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>
<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
- Here is the same table with a border of 4, a CELLPADDING of 10, and
a CELLSPACING of 10.
| Column One Header |
Column Two Header |
| Row One/Column One |
Row One/Column Two |
| Row Two/Column One |
Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" CELLPADDING = "10"
CELLSPACING = "10">
<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>
<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>
<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
- Here is the same table with a border of 4 and colored cells.
| Column One Header |
Column Two Header |
| Row One/Column One |
Row One/Column Two |
| Row Two/Column One |
Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" BGCOLOR = "YELLOW">
<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>
<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>
<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
- Here is the same table with a width of 100.
| Column One Header |
Column Two Header |
| Row One/Column One |
Row One/Column Two |
| Row Two/Column One |
Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" WIDTH = "100">
<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>
<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>
<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
- Here is the same table with a border of 4 and a pixel width of 80%.
| Column One Header |
Column Two Header |
| Row One/Column One |
Row One/Column Two |
| Row Two/Column One |
Row Two/Column Two |
- Here is the code for that table:
<TABLE BORDER = "4" WIDTH = "80%">
<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>
<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>
<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
Additional Resources:
Basic Tables
Introduction to Web Design | Table of Contents
Table Cell Attributes
|
