 |
  HTML Tutorials GuruSearch! Web Glossary LiveWire Forums |
 |
 |
  Getting Started Text Links Colors Backgrounds Images Tables Frames Image Maps |
|
|
|
|
 Design Guide Forms Meta Tags JavaScript Style Sheets SSI CGI Web Browsers |
|
|
|
|
 HTML Editors Free Web Hosting Domain Names Copyrights |
 |
Tables are one of the most powerful design elements available to you as a web designer. They can be used to create simple presentations of data or can be nested to create complex layouts. A simple table consists of three basic tags each repeated as necessary.
The first of these tags is the <TABLE> tag itself. This tag surrounds the entire table and can specify many attributes that apply to the table as a whole. The <TABLE> tag can include the following attributes:
| Attribute | Description | Syntax |
| ALIGN | Sets the alignment for the table | ALIGN="center, right, left" |
| BACKGROUND | Sets a background image for the table | BACKGROUND="URL of image file" |
| BGCOLOR | Sets the table's background color | BGCOLOR="color specification" |
| BORDERCOLOR | The color of the table's border | BORDERCOLOR="color specification" |
| BORDER | Sets the width of the table's border in pixels | BORDER="number of pixels" |
| CELLPADDING | Sets the width in pixels of the space between the edge of a cell and its contents | CELLPADDING="number of pixels" |
| CELLSPACING | Set the width in pixels of the space between individual cells | CELLSPACING="number if pixels" |
| CLASS | Used by Style Sheets to reference a group of objects | CLASS="name of class" |
| FRAME | Specifies which edges of a table are to dsiplay a border frame | FRAME="above, below, border, box, hsides, vsides" |
| HEIGHT | Sets the height of the table either in pixels or in the precentage of the page that it is to cover | HEIGHT="number of pixels, precentage" |
| ID | A unique alphnumeric identifier for the table | ID="unique ID" |
| STYLE | Used to specify style information for the contents of the table | STYLE="style information" |
| SUMMARY | Provides a summary of the table contents. Used for non-visual browsers | SUMMARY="summary information" |
| WIDTH | Sets the width of the table either in pixels or in the precentage of the page that it is to cover | WIDTH="number of pixels, precentage" |
The second basic component of the table is the <TR> tag. It is used to define each row in a table and to assign attributes to that row. The <TR> and </TR> tags must surround each row of the table. Attributes that are defined by the <TR> tag include:
| Attribute | Description | Syntax |
| ALIGN | Sets the alignment for the table row | ALIGN="center, right, left" |
| BGCOLOR | Sets the table row's background color | BGCOLOR="color specification" |
| CLASS | Used by Style Sheets to reference a group of objects | CLASS="name of class" |
| ID | A unique alphnumeric identifier for the table row | ID="unique ID" |
| STYLE | Used to specify style information for the contents of the table width | STYLE="style information" |
| VALIGN | Sets the vertical alignment for the table row | VALIGN="top, bottom, center, middle" |
The final component of the table is the <TD> tag. It is used to define each individual cell in a table and to assign attributes to that cell. The <TD> and </TD> tags must surround the contents of each cell of the table. Attributes that are defined by the <TD> tag include:
| Attribute | Description | Syntax |
| ALIGN | Sets the alignment for the table cell | ALIGN="center, right, left" |
| BACKGROUND | Sets a background image for the table cell | BACKGROUND="URL of image file" |
| BGCOLOR | Sets the table's background color | BGCOLOR="color specification" |
| BORDERCOLOR | The color of the table's border | BORDERCOLOR="color specification" |
| CLASS | Used by Style Sheets to reference a group of objects | CLASS="name of class" |
| COLSPAN | Indicates how many columns wide a cell will be | COLSPAN="number of columns" |
| HEIGHT | Sets the height of the table either in pixels or in the precentage of the page that it is to cover | HEIGHT="number of pixels, precentage" |
| ID | A unique alphnumeric identifier for the table | ID="unique ID" |
| NOWRAP | Turns off automatic text wrapping for the table cell | NOWRAP |
| STYLE | Used to specify style information for the contents of the table | STYLE="style information" |
| VALIGN | Sets the vertical alignment for the table cell | VALIGN="top, bottom, center, middle" |
| WIDTH | Sets the width of the table cell either in pixels or in the precentage of the page that it is to cover | WIDTH="number of pixels, precentage" |
Now that you have an idea of the basic tags that make up a table, you need to know how they fit together to create a table. At the beginning of each table you need a <TABLE> tag with all of the attributes that that you want to apply to the table.
<TABLE BORDER="1" CELLSPACING=2 ALIGN="center">Next you insert the first table row tag and any attributes that are specific to the first row of the table. Remember that all of the attributes that you set in the >TABLE< tag apply to the entire table so you do not have to restate them.
<TABLE BORDER="1" CELLSPACING=2 ALIGN="center">
<TR BGCOLOR="#CCCCCC" HEIGHT="50">Now you need to insert the <TD> tags for each column of your table, insert their contents and then close them.
<TABLE BORDER="1" CELLSPACING=2 ALIGN="center">
<TR BGCOLOR="#CCCCCC" HEIGHT="50">
<TD WIDTH="100">This is the content of the first cell</TD>
<TD WIDTH="150" BGCOLOR="#EEEEEE">This is the content of the second cell</TD>
Then close the TR tag to end the row.
<TABLE BORDER="1" CELLSPACING=2 ALIGN="center">
<TR BGCOLOR="#CCCCCC" HEIGHT="50">
<TD WIDTH="100">This is the content of the first cell</TD>
<TD WIDTH="150" BGCOLOR="#EEEEEE">This is the content of the second cell</TD>
</TR>
You can add more rows and more columns in the same fashion.
<TABLE BORDER="1" CELLSPACING=2 ALIGN="center">
<TR BGCOLOR="#CCFFFF" HEIGHT="50">
<TD WIDTH="100">This is the content of the first cell</TD>
<TD WIDTH="150" BGCOLOR="#FFFFCC">This is the content of the second cell</TD>
</TR>
<TR BGCOLOR="#EEEEEE" HEIGHT="50">
<TD WIDTH="100">This is the content of the third cell</TD>
<TD WIDTH="150" BGCOLOR="#FFCC99">This is the content of the fourth cell</TD>
</TR>
Finally, close the TABLE tag. This is essential because Netscape will not display a table without an closing tag.
<TABLE BORDER="1" CELLSPACING=2 ALIGN="center">
<TR BGCOLOR="#CCFFFF" HEIGHT="50">
<TD WIDTH="100">This is the content of the first cell</TD>
<TD WIDTH="150" BGCOLOR="#FFFFCC">This is the content of the second cell</TD>
</TR>
<TR BGCOLOR="#EEEEEE" HEIGHT="50">
<TD WIDTH="100">This is the content of the third cell</TD>
<TD WIDTH="150" BGCOLOR="#FFCC99">This is the content of the fourth cell</TD>
</TR>
</TABLE>
The table that you just created will look like this:
| This is the content of the first cell | This is the content of the second cell |
| This is the content of the third cell | This is the content of the fourth cell |
The table shown above demonstrates only the most basic concept of the <TABLE> tag. You can use tables to position content, add backgrounds, fill space, and even add graphical effects to your site. As with any new concept, the best way to learn about tables is to experiment with them.
| Tell a friend about NetaGuru | Comment on NetaGuru | Bookmark NetaGuru This page was last updated 12/12/03 Please read our disclaimer and legal notices. All editorial content and graphics copyright 2002 NetaGuru. Designed and maintained by David Jones and Reid Beels. |
