Tables:

Without a doubt tables cause more confusion for new web designers than any other component of HTML.  But once you master the basics of tables, a whole new world in design and layout will open up to you.  This will be a long tutorial so get comfortable and open your mind to new thoughts.  When we are done you will be able to build basic tables, do complete page layouts using tables and a basic understanding of what makes up a nice page.

Maybe a better question is when not to use tables in a layout.  I use tables for EVERY layout I do.  The first thing I do is set down and get an idea of the overall layout I want.  How many tables do I need, how many cells for each table, rough dimensions for each.

I should tell you, I LOVE tables, and want to instill in you the same enthusiasm I have.

Basic concept:

Tables are nothing more than a series of boxes, we can make big boxes, small boxes, rectangles.  Remember when you were a kid playing with blocks, you had an idea of what you were building with your blocks, same concept with tables.

Basic table construction:

A one cell table, can't get more basic than that.  This table has a border 1 pixel wide, and one cell.  So lets code it.

<table>
<tr><td>hello</td></tr>
</table>

Every table starts with the <table> tag, then we have the <tr> tag, this means table row, then we have the <td> tag, this means table data <td> is the actual table cell, where we put out text or image.  Notice that we close our tags in the reverse order that they were opened, example, <tr><td>hello</td></tr>.  That was really easy wasn't it?  Well, all we do is build on this concept, if you understand a one cell table then you can build a table.  Told you :-)

When building a table in notepad it is good practice to open and close the table to start, example,

<table> (we open the table)
</table> (we close the table)

Then we start adding the <tr> and <td> tags.

Example:

<table>
<tr><td>&nbsp</td></tr>  The "&nbsp" is a space, we use it to temporarily occupy the data area.
</table>

Table with a border:

And here is the code for the above table with a border.  Notice that the border is 5 pixels and the color is #008080.

<table border="5" cellpadding="0" cellspacing="0" bordercolor="#008080" width="50%" >
<tr>
<td width="100%" align="center">Hello</td>
</tr>
</table>

Table with a border and a background color:

And here is the code for the above table with a border and a background color.  Notice that the border is 5 pixels, color is #008080 and the BG color is #800000.

<table border="5" cellpadding="0" cellspacing="0" bordercolor="#008080" width="50%" bgcolor="#800000">
<tr>
<td width="100%" bordercolor="#800080" align="center">
<font color="#FFFFFF">Hello</font></td>
</tr>
</table>

Table with a border and a background image:

And here is the code for the above table.  beige003.jpg is the file name for the BG picture.  BG pictures will tile to fill the table.  I set the table height just so you could see the result, the code below does not include the height.

<table border="5" cellpadding="0" cellspacing="0" bordercolor="#008080" width="50%" background="beige003.jpg">
<tr>
<td width="100%">&nbsp;</td>
</tr>
</table>

To get the layered effect put a table inside another table (nested tables).


That is all there is to a basic table.  I have to admit though, in it's present form it's not very useful.

Next lesson:

Sizing your Tables --->
 

Tozo
5-10-2003