Make your own free website on Tripod.com
 
 
 
 

TG 404 Home | Html Home | Color Wheel | Color Chart | Basic Images
Basic Text | Basic Body | Basic Links | Basic Tables | View Source

Tailgunner404

Basic Tables

Lets talk about "Tables". What good are they? Well they help you keep things where you want them on the page relative to other elements on the page. This page is a series of tables. Go ahead look at the source code for this page. The simplest table has two cells either in a row (side by side) of in a column (one on top of the other). Here is a basic table. Containing two vertical cells (R1C1 and R2C1

R1C1
R2C1

Here is the code for the table above:

<table width="40%" border="5" cellspacing="3" cellpadding="3" bgcolor="#404080" align="center"> 
<!--Row 1 Column 1 -->
<tr>
<td align="center">
R1C1
</td>
</tr>
<tr>
<!-- Row 2 Column 1 -->
<td align="left">
R2C1
</td>
</tr>
</table>

Okay what's it mean??

<table width="40%" border="5" cellspacing="3" cellpadding="3" bgcolor="#404080" align="center"> 

This line tells the browser that this is a table. It then specifies the size of the table (width) in percentage of the page. Border tells the browser how wide in pixels to make the border; cellspacing is the space petween cells; while cellpadding is the blank space around the text inside of the cell. The bgcolor is the color of the background in the table and the align="center" tells the browser to place the cell in the center of the page, or in the case of this page in the center of the table it is inside...confused...you should be. Tables are great but they can be killers when large and complex.

<!--Row 1 Column 1 -->

This is a comment. The "<!--" begins the comment and the "-->" closes it. Everything between the "<" and the ">" is ignored by the browser and will not be displayed. Comments are great for remembering why something is coded like it is and for finding certain elements in a table. Use them! They will save you a lot of time in the long run.

<tr> This is the opening tag for a row. (Table Row... TR...get it??)

<td align="center">
This tag is the opening tag for a cell. What ever comes after this tag will appear inside the cell. The align="center" centers the content of the cell.

R1C1 This is the content of the cell

</td> This is the closing tag for the first cell.

</tr> This tag closes the first row.

<tr> This tag opens the second row.

<!-- Row 2 Column 1 --> A comment tag.

<td align="left"> The begining of the first cell in the second row.

R2C1 This is the content of the cell.

</td> This closes the cell (TD =table detail)

</tr> This tag closes the second row.

</table> This tag then closes the table

Get a tag out of order or forget to close a tag and the table will do crazy things to your page. Internet Explorer displays tables with some mistakes, but Netscape is unforgiving. All tags must be right for the table to work.

Below are some variations of how tables look. If you set the Border="0" for your table then no one will know that there are tables on your page. Like this page...LOL

A two column one row table:

R1C1 R1C2

A two row by two column table

R1C1 R1C2
R2C1 R2C2

A three row by six column table.

R1C1 R1C2 R1C3 R1C4 R1C5 R1C6
R2C1 R2C2 R2C3 R2C4 R2C5 R2C6
R3C1 R3C2 R3C3 R3C4 R3C5 R3C6

Now I admit that the Html editing program (Arachnophilia) that I use to write/edit Web pages contains a table wizard which helps a lot.

I recommend that you put a border on the table until you have everything right where you want it as the borders make the placement easier to figure out. In fact you might want to leave the cell numbers in place until you have it perfect.

Thats it for now...hugs!


Click Here for next tutorial.

Return to Top

Click Here to Email Tailgunner404

TG 404 Home | Html Home | Color Wheel | Color Chart | Basic Images
Basic Text | Basic Body | Basic Links | Basic Tables | View Source


Site Copyright 2001 by Tailgunner404 All rights reserved
Page posted June 4, 2001