Basic Tables

Tables are a powerful, but simple to use, HTML construction that you can add to your auction description to gain control of the description listing space and to assist with layout of your auction.

Tables are easy to use, especially if the tags are understood and used correctly. There are just three sets of tags necessary to create effective tables. There are other tags that can be used as part of the actual table construction but only these three sets are needed:

<TABLE> - </TABLE>

<TR> - </TR>

<TD> - </TD>

The first set of tags defines the table itself. <TABLE> is the first tag at the beginning the whole table construction and </TABLE> is the last tag at the end of the completed table.

The <TR> tag is used to open each Table Row, and the </TR> tag is used to close each table row. There is one set of these tags for each row of data cells in your table.

The <TD> tag is used to open each Table Data cell, and the </TD> tag is used to close each table data cell. There is one set of these tags for each individual data cell in your table.

A table is simply a number of data cells laid out in rows. Attributes in the various tags allow you to control the size and other features of these cells. You can put any standard HTML construction inside each of the data cells, but these constructions are the contents of the data cells and are not actually part of the table construction itself. Don't be confused by what is in the data cells!

The minimal HTML code for a typical table with one data cell would look like this:

<TABLE>
<TR><TD> 1/1 </TD></TR>
</TABLE>

Notice that the tags close in the reverse order from which they open. The red 1/1 is used to show the content of the data cell and is not a part of the HTML code for the table.

The minimal HTML code for a more complex table with two rows of three cells each would look like this:

<TABLE>
<TR><TD> 1/1 </TD><TD> 1/2 </TD><TD> 1/3 </TD></TR>
<TR><TD> 2/1 </TD><TD> 2/2 </TD><TD> 2/3 </TD></TR>
</TABLE>

Notice that each table row starts and ends with the opening and closing TR tags, and each table data cell in the rows starts and ends with the opening and closing TD tags.

The attributes in the various tags let you control total table width, cell width, background color and/or graphics, whether the table will have a border or not and what color it should be. They can also control the alignment of the cell contents, the alignment of the whole table and the spacing between the table data cells and the buffer space around the inside of the data cells as well.

It's always the right time to use good code.

[ back to main | back to top ]

design by wizard_mithrandir
Copyright © 2002, 2008, by Stephen B. Henry