Basic Table Codes: Getting Started

LinkExchange Member Free Home Pages at GeoCities

Getting Started With Tables

Hello! You've probably found your way here because you are trying to come up with a good reason not to leave your computer for scrap. Before you give your computer a good conk with a tire iron please try this page first! Hopefully it will get you started. So, enough with the introduction, let's learn how to make a table!

Definitions	Basic Table
Table Borders	Table Width
Table Height	Lesson 2

Let's start with some definitions.

<TABLE> This is the main tag. It tells the browser "Hey! There's a table here!", along with some attributes like size, border width and a few other things.

<TR> This TableRow defines a horizontal row of <TD> (TableData) cells.

<TD> Specifies an indiviual block or cell in a table row.

In other words, a table is made up of cells. Cells are made up of rows. Look below:

This	Is	A	Row
-----	Single Cell	-----	Single Cell

Ok! Now you're ready to start on a basic table. It may be easier to start a practice page wherever your editing your page in another window so you can read this at the same time.

Now, somewhere inbetween your<BODY>and </BODY> tags find the area you want to put your table. Start with this basic code.

<TABLE>
</TABLE>
This simply means you will be starting and ending a table.

Now you need a row
<TABLE>
<TR>
</TR>
</TABLE>

Now you need a data cell

Now you are ready to put something in that cell. Let's try Comet.

<TABLE>
<TR>
<TD>Comet</TD>
</TR>
</TABLE>

Now look below and see what you get!!

Comet

I know I know, you were expecting more. But hey, you really have made a table! Congratulations! You were wanting something that LOOKS like a table right? Ok, let's move on and see how to put a border around your word.

This is what you write

<TABLE BORDER="1">
<TR>
<TD>Comet</TD>
</TR>
</TABLE>

This is what you get

Comet

Want a larger border? Just increase the BORDER= number.

<TABLE BORDER="6">
<TR>
<TD>Comet</TD>
</TR>
</TABLE>

And you get this:

Comet

If you don't want a border at all just type BORDER="0" in the code.

Ok, as long as you don't specify a table width or height it will size itself. Sometimes, you want it to be a different size. Let's experiment below

<TABLE BORDER="3" WIDTH="90%">
<TR>
<TD>Comet</TD>
</TR>
</TABLE>

Comet

The 90% means the percent of the browser window the table width will take up.

<TABLE BORDER="3" WIDTH="50%">
<TR>
<TD>Comet</TD>
</TR>
</TABLE>

Comet

There is another way to define width. Instead of writing a percent try just writing 100. This means the table will be 100 pixels wide. If you don't understand that just yet don't worry about it. Just play around with it untill you get things sorted out. Now, let's try it:

<TABLE BORDER="3" WIDTH="100">
<TR>
<TD>Comet</TD>
</TR>
</TABLE>

This is what you will get:

Comet

Which method of sizing you use is really unimportant. Use the one that works best for you

We can also play around with the height. Let's give it a try!

<TABLE BORDER="3" WIDTH="180" HEIGHT="100">
<TR>
<TD>Comet</TD>
</TR>
</TABLE>

And you get this

Comet

You can change the numbers around a little until you get comfortable with them. Continue on to the next lesson where you will learn how to control where your text appears in the table cell, how to do images and make a link. Good Luck!