HOME
   HTML TUTORIALS
   HTML EDITOR
   COLOR CHART
   TEMPLATES
   RESOURCES
   PROMOTION
   HOSTING
 
 
 
   SEARCH
   LINK TO US
 

Do you find this website helpful?
Help us by making a donation.
All donations go back to promote ebay stores.


 




Cash Register, POS, Credit Card Printer Ink Ribbons
 

 

 

 
 
 



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.

When to use tables:

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>

hello

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:

Hello

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:

Hello

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


 
 

Google



Home | HTML Tutorials | HTML Editor | Templates |  Resources | E-mail
 Copyright 2004 - 2008 xample.net

 
 



More help sites

 
Need Help?
checkout
Bob's
Tips


 

Lesley Feeney
Resources