Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter
*
 

Tutorials
Cookies
ASP
Advanced HTML
Frames & Tables
.htaccess
Rounded Table Corners
Flash 5
FTP
Beginners
Javascript
PHP/MySQL
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics
XHTML
Stylesheets
XML
PHP
*

125x125

Related Links
Frames - An Introduction
Frames Page Generator
More Frames & Tables Sites
*

 
Sitemap | Contact | Link To Us | Advertise
Report A Problem

Frames & Tables Tutorial
Part 4 - HTML Tables

Before You Start

Before you start learning how to create a table in HTML code you must make sure that you are familiar with with the terms used when referring to tables. If you have not done this then go back to part 3 and read about them.

Tables In HTML

Tables are quite difficult to do in HTML. This is not because the code is particularly hard to remember but because it is difficult to get the table you want by using it. It is extremely difficult to visualize what you are creating when you are using HTML code.

The first thing you must do is declare the table. This is done using the <table> tag:

<table border="1" cellspacing="2" cellpadding="2" width="500" height="100">

This basically means to create a table with a border of size 1 with cell spacing of 2 and cell padding of 2. If you do not know what these terms mean click here. The table should be 500 pixels wide and 100 pixels high. You could also use percentage values here by adding a % sign. If you leave out the width and height tags the table will resize itself depending on the data in it (but will never be wider than the browser window).

The next tag declares a row in the table:

<tr>

This tag does have some variables but I will deal with them later. The next thing you have to do is declare the first column:

<td width="100" height="100">

This creates a cell 100 pixels wide and 100 pixels high. Like with a table you can use percentages (of the total table width and height) or leave out the width and height and the cell will resize itself.

Next you include the standard HTML you want in the cell (you can use anything, even tables) before closing the column tag:

</td>

You can now add as many columns you like before ending the row using:

</tr>

You can add as many rows and cells as you like before closing the table:

</table>

That may have been a little bit confusing so I will give you an example:

Month
Sales
Profit
January$10,000$2,000
February$15,000$5,000
March$5,000$1,000


<table width="75%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td>
<center><b>Month</b></center>
</td>
<td>
<center><b>Sales</b></center>
</td>
<td>
<center><b>Profit</b></center>
</td>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
<td>$2,000</td>
</tr>
<tr>
<td>February</td>
<td>$15,000</td>
<td>$5,000</td>
</tr>
<tr>
<td>March</td>
<td>$5,000</td>
<td>$1,000</td>
</tr>
</table>

This information should have helped you to create a simple table. There are some more complex tags to make cells span several rows or columns but when you are creating these sort of tables it is much easier to use a WYSIWYG program. There are just a few more pieces of information you will need to know:

These are the background and bgcolor attributes. These can be used in the <table> <td> and <tr> tags to apply a background color or image to that part of the table (or the whole table if used with <table>). The background attribute is used to specify a background image:

<td background="http://www.gowansnet.com/cellbg.gif">

and the bgcolor is used to specify a color using an HTML color word or an RGB code:
[co
de]
<td bgcolor="#FF0000">

Summary

In this final part you have learned the basics of creating a table in HTML. Tables are a very good navigation feature but in my opinion they are best created by WYSIWYG programs as they can soon become quite complex.

© 1999 - 2001 FreeWebmasterHelp.com