Formatting your pages with tables Part 1
Courtesy of Cherished Memories and CS Designs

pencil line

This page is a beginners introduction to tables. Tables have many uses, but the main use is in helping you format you pages to achieve the right look. Though there are many tags connected to the table command, this page will only cover the basics.

This HTML code below will give you a plain table with only one cell and a border width of 1.  <TABLE BORDER=1><TR><TD></TD></TR></TABLE>
 
Table with one row (tr) by one column (td)

TR stands for Table Row and TD stands for Table cell, Division or Column and it is between the <td></td> that you place your information or pictures. By including the Border tag you can specify if your table will have a border or no border. 0 indicates no border while any number after that will determine the size of your border. If you do not include the border tag your table will have no border by default. 
The example below gives you a table with one row (tr) by two cells or columns (td) across. 
<TABLE BORDER=1>
<TR>
<TD></TD>
<TD></TD>
</TR></TABLE>
 
1st td, cell or column 2nd td, cell or column

The code belwo will give you a table with two row down and 2 cllumns across

<TABLE BORDER=1>
<TR><TD></TD><TD></TD></TR>   ... 1st Table Row contains two columns.
<TR><TD></TD><TD></TD></TR>   ... 2nd Table Row contains two columns.
</TABLE>
 
1st row  begins with <tr> 1st cell or column begins with <td>and ends with </td> 2nd cell or column for this row begins with <td> and ends with </td> before the row is closed with the </tr>
2nd row  begins with <tr> 1st cell or column begins with <td>and ends with </td> 2nd cell or column for this row begins with <td> and ends with </td> before the row is closed with the </tr> Since this is also the last row, your code will end with </table> which closes off the table command.

Another tage that is very benificial is the Colspan tag. This tag will merge several columns into the same row to give you one long row across while leaving the rest of your rows set to how ever many columns you have specified. If your table was formatted to 3 columns down, then you would change the number after the Colspan to=3 and so on. 
 

<TABLE BORDER=1>
<TR><TD colspan=2 ></TD></TR>
<TR><TD></TD><TD></TD></TR> 
</TABLE>
 
 
 This is the result of only one <td></td> and including the colspan=2 
 You will notice that the second TR includes  2 <td></td> one set for each column in this table 

Coloring your tables cells: You can color one, several or all of your table cells with the BGCOLOR:
<TABLE BORDER=1 >
<TR>
<TD BGCOLOR="#CCCCCC"></TD><TD></TD></TR></TABLE>
 
Including the BGCOLOR="" this cell or column has been colored Since this cell does not include the BGCOLOR it has remained uncolored

Table size in pixels and percentages:
As an extra note, you can also specify the width of your tables by the WIDTH="" This would be placed inside the opening <Table> 
Example <Table width="600"> would make a table 600 pixels wide. While <Table WIDTH="75%"> would make your table 75% of what ever resolution your page was viewed at. Whether you choose to format your tables in pixels or percentages is a matter of personal choice and is also sometimes determined by the layout of you page. More often than not I choose pixels, because it gives me a little better control over the layout of my text in relation to the rest of my page. You should keep in mind that the lowest resolution your visitors might be viewing your page, is a width of 640 so if you set your table in pixels and make it wider than the lowest resolution will allow, some of you visitors may have to scroll to the side to see your entire page. 

Another use for tables espeically colored ones, is for displaying images or decorative lines on a background where the text is un-readable or the color washes out against your patterned background. Also See: Using tables with wild backgrounds
 


Placing your images or decortive lines inside tables gives you a little cleaner look when placed on a patterned background and a little more control over the readability of the text when the lines are used for a light background and they were intended for a dark one etc. It is also a way of creating a simple headers for you page using a decorative line or bar.

The Center Command:
The center as with other HTML code will help center your tables or images and text inside your tables. The <center> turns on the command while </center> turns it off. Remember that for every opening command or tag you must have a closing one.

I use tables throughout all the sites I maintain and onve very good use for tables is in formatting pages with side borders. For a better example of this have a look at my Creating pages with sideborders, tables and spacers.

You now have the basics for creating any number of table combinations. 
 

The following is just an extar tidbit. I have had people ask what the following command was for, and thought this was a good a place as any to explain it.

&nbsp;
The &nbsp; for those of you that are curious, is only a blank space. You can add this where ever you want spaces, This can be useful for getting that graphics to move over just a bit. I just added this in my example above because people have asked what it is.
 

You now have the basics for creating any number of table combinations. 
If you have any quesitons regarding this page, please send them to CS Designs Email
red pencil image
Back to Tutorials Menu

 

Please do not take any of the images on this page,
If you need graphics please visit one of my collection pages.

This page was first created on July 27, 1997 and last updated on October 27, 1999

All images and content on this page were created and are the property of Chris Stern,
and my not be used on any other website without my written permission.
Chris Stern / CS Designs © Copyright All Rights Reserved July l, 1997