HTML Tips and Techniques
Using Tables in HTML

One of the first frustrations that many web designers hit is getting things to line up. Since most websites use proportional fonts, a "space" doesn´t always move the same distance across the page. This means that going space-space-space- doesn´t necessarily get everything to line up in the same spot.

This is where tables come in. A table is sort of like a grid in Excel, or a table in Word. It´s a construct with rows and columns, that let you get things to line up. You can have as many rows and columns as you wish, or you can even just have one row and one column, and use that ´block´ to get things to line up in a certain spot on the screen.

To start with, there are the basics. Every table needs to start with a <TABLE> and end with a </TABLE>. This is the ´shell´ that holds the table contents. If you want to center a table, just put the <CENTER> before it and a </CENTER> after it. That´s one of the most common ways to use tables - to center a block of data and still get that block to line up nicely.

Next, the rows and columns within the table. Every row has to begin with a <TR> and end with a </TR>. That row can now have detail cells. Those begin with <TD> and end with </TD>.

So to create a table that had 3 items in it and the dollar value associated with each, you could do:

<TABLE> <TR><TD>Apple</TD><TD>$1.20</TD></TR>
<TR><TD>Orange</TD><TD>$1.90</TD></TR>
<TR><TD>Kiwi</TD><TD>$3.20</TD></TR>
</TABLE>

That results in:

Practice using the basics of tables - they are incredibly helpful in any number of situations! Once you get the basics down, it´s time to move on to the next article, on some more advanced features.

Lisa's HTML Tips and Techniques Homepage

Other Sites by Lisa
ASP Code & Help Java Code & Help Gaming Walkthroughs