 |
|
 |
| What Are Tables? |  |
|
|
HTML does not provide a lot of flexibility when you're trying to get the layout of a web page to look a certain way. One feature of HTML that does allow for some formatting is tables. With tables, you can divide your page up into areas in an effort to achieve some control over the layout of your page.
What are tables? If you've ever seen a spreadsheet, then you've seen a table. Tables are nothing more than rows and columns, just like a spreadsheet, and are created with three basic HTML tags... TABLE, TR, and TD. The TABLE tag is used to define a table, TR is used to identify the rows of the table, and TD is used to identify the cells (or columns) of each row.
A simple two row, three column table can be added to your page with the following tags:
<TABLE>
<TR>
<TD>row 1, column 1</TD>
<TD>row 1, column 2</TD>
<TD>row 1, column 3</TD>
</TR>
<TR>
<TD>row 2, column 1</TD>
<TD>row 2, column 2</TD>
<TD>row 2, column 3</TD>
</TR>
</TABLE> |
Which would display on your page as:
| row 1, column 1 |
row 1, column 2 |
row 1, column 3 |
| row 2, column 1 |
row 2, column 2 |
row 2, column 3 |
There are additional attributes that can be used with the TABLE tag to create more elaborate tables. You can add a border to your table by adding the BORDER=n attribute, where "n" represents the number of pixels wide you'd like the border surrounding your table to be. The CELLPADDING=n attribute allows you to control the number of pixels between the contents of a cell and it's surrounding borders. The CELLSPACING=n attribute allows you to control the line thickness that separates the individual cells of a table. If you put it all together, you'd have something like this:
|
<TABLE BORDER=3 CELLPADDING=10 CELLSPACING=5> |
This would create a table with a surrounding border 3 pixels wide, with 10 pixels of space between the contents of cells and their surrounding borders, and a line separating the table cells that is 5 pixels wide, and would look something like this:
| row 1, column 1 |
row 1, column 2 |
row 1, column 3 |
| row 2, column 1 |
row 2, column 2 |
row 2, column 3 |
You can also make your tables a bit more attractive by adding color. All three table tags allow the BGCOLOR attribute to be set. The BGCOLOR attribute specifies the color of the background to be used for a table element. For example, here's the code to create a single row, two column table, with the background color of the table set to red, the background color of the row set to green, and the background color of one of the left hand column set to blue:
<TABLE BGCOLOR="#ff0000">
<TR BGCOLOR="lightgreen">
<TD BGCOLOR="#0000ff">this cell would have a blue background</TD>
<TD>this cell would have a green background because no BGCOLOR is specified, and it inherits the color of the table row.</TD>
</TR>
</TABLE> |
Which would display on your page as:
| this cell would have a blue background |
this cell would have a green background because no BGCOLOR is specified, and it inherits the color of the table row. |
Note that when specifying the background colors, you have the option of using either color names or color hex codes.
There are several other attributes that can be used to control the layout of the contents within a table. These attributes, as well as more detailed descriptions of them can be found on our Using Tables page. We also have a Table Examples page that takes you through the steps of creating an increasingly more elaborate table.
|
|
