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:

Okay what's it mean??

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.

This is a comment. 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.

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