Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter

Advanced HTML
Frames & Tables
Rounded Table Corners
Flash 5
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics


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 3 - WYSIWYG Tables

What Are Tables?

Tables are the same as a table in any other application. They are like a spreadsheet. They have rows, columns and cells. They are quite complex to make in HTML but can be very effective (this page is made up of many big and small tables). If you are going to create one in HTML read the section below first as it will explain how the table works.

Tables In A WYSIWYG Program And Table Terms

I would strongly suggest that you use a WYSIWYG (What You See Is What You Get) program to create tables even if you don't normally use one. This is because it is difficult to create a table in HTML as it is difficult to visualize it.

You will be able to either insert a table by choosing Table, Insert Table... or Insert, Table... depending on the program you are using. You will probably now get a dialog box.

You can specify the number of rows and columns here (although you can add or delete them later). You can also specify the width and height of the table. If you do not it will resize with the things you put in it. You can either specify these as a percentage of the browser screen or as a size in pixels.

Next you can specify the border size, cell padding and cell spacing. The border size is how thick the border around the cell is. It will be invisible (like on this page) if you set it at 0. Cell spacing is the space between each individual cell. A value of 1 or 2 is usually common here. A value of 0 will leave no space between cells. Cell padding is the space between the edge of the cell and the content inside. The values in here are the same as for cell spacing (1 or 2 is common, 0 is none).

Once you have inserted the table you can put text, images or anything else in it. Two more things you may need are merging cells, splitting cells and changing the background color.

Merging and splitting cells can usually be done by highlighting the cell(s) and right clicking to get a menu. If you select 2 (or more) cells and choose to merge them they will become one cell. This will not effect any of the other cells so you can have cells spanning more than one row or column in your table.

If you choose to split a cell it will split in two (or more). This allows you to have multiple cells where there would normally be one.

Finally changing the cell background can be done from the cell properties (usually in the right-click menu). You can either select a color or an image (like with a page background) and it will be applied to the cell. An example of this is the cells at the top this page which have a background color.

Tables are an excellent design tool and if you use them properly you can create complex designs, far beyond the normal HTML limitations.

Part 4

As creating tables in HTML is quite complicated I will leave the HTML code until the next part where I will explain it in full.

© 1999 - 2001