Tables have become the most used HTML element around. They allow you to place graphics and text practically anywhere you want to. A newspaper or book style layout is only possible by using tables.
Before continuing, a few simple rules. The first is no table should exceed 600 width. This is because most people are still at a 640x480 resolution. Any table wider than 600 means that the user will have to scroll vertically which is a design no-no. The second rule is to make sure you always have ending tags. Basically if you have an opening tag, close it. Some browsers will not show your table properly if you do not have ending tags.
Let's get started with a the basic structure of a table. The example below shows you in which order the tags are written. Of course you can add more cells and lines, but you have to keep to its structure.
Always check your table in as many browsers as possible. This will eliminate any problems later on. Here is a basic table example.
<td> cell 1 </td>
<td> cell 2 </td>
<td> cell 3 </td>
<td> cell 4 </td>
This is how it looks.
Here is an example using all of the options listed below.
<table border=1 cellpadding=5 cellspacing=4>
<td valign=center align=left> cell 1 </td>
<td width=100> cell 2 </td>
<td colspan=2 align=center> cell 3 </td>
Here is how it looks
Defines whether your table is in the middle, at the left or at the right side of the screen.
e.g.: align="left", align="right", align="center"
Valign is vertical align. The three values are top, middle and bottom. For example valign="bottom" would make text and graphics in the table appear at the bottom. "valign" can be also used with <td>.
Nowrap is for cells (<td>) only. If you put nowrap in a cell, your text and graphics won't be wrapped until you break it with <br>. e.g.: <td nowrap>
Colspan and Rowspan
You use colspan to stretch a cell vertically. Do this horizontally use rowspan. With both you have to define above how many cells or rows it should stretch, therefor the code would look like <td colspan="x">, if the cell should stretch vertically above x cells.
e.g.: <td colspan="2">, <td rowspan="8">
... defines the thickness of the table border. The standard is set to border="1". I recommend only to use border if you want to turn the table border off.
Cellspacing defines the size of the space between the different cells and rows. e.g.: cellspacing="1"
Cellpadding defines size of the space between the inside of the cell (text, graphics) and the border of the cell. e.g.: cellpadding="0"
Width defines the width of your table. The amount is often given in dots, if the amount is written together with, then it is given in percent. This tag can be also used in cells (<td>). e.g.: width="10%", width="400"
Height defines the height of your table. Again: The amount is often given in dots, if it is written together with "%", then it is in percent. This tag can be also used in cells (<td>). e.g.: height="100", height="30%"
Bgcolor is used to define the background color of your table. It can be also used with cells (<td>). e.g.: bgcolor="#00FF00"
The Background or BG tag is used to define the image that's in the back of your table and you can use it in cells (<td>) too. e.g.: background="bg.gif" OR bg="bg.gif"
Copyright © 1995-2003 Sidetrips Internet Services, Inc. All rights reserved.
Reproduction in whole or in part in any form or medium without express
written permission of Sidetrips Internet Services, Inc. is prohibited.
sidetrips.com, hostserver.com, registera.com, htmlshop.com,
and associated domains are trademarks of Sidetrips Internet Service, Inc.