TABLE TAGS

 <table border width=160> <tr> 
<th>Food</th><th>Drink</th><th>Sweet</th>
 <tr> <td align=left>A</td> <td 
align=center>B</td> <td align=right>C</td> 
</table> 

 <table border height=100> <tr> 
<th>Food</th><th>Drink</th> 
<th>Sweet</th><th>Other</th> <tr> <td 
valign=top>A</td> <td valign=middle>B</td> <td 
valign=bottom>C</td> <td valign=baseline>D</td> 
</table> 

 <table align="left" border> 
<tr><th>Food</th><th>Drink</th><th>Sweet&
 lt;/th> 
<tr><td>A</td><td>B</td><td>C</td> 
</table> My favorites...<br> cookies, chocolates, and more. 

Food	Drink	Sweet
A	B	C

My favorites...
cookies, chocolates, and more.

 <table border> <tr><th bgcolor=000000> <font 
color=blue>Food</font></th> <th 
bgcolor=white>Drink</th> <tr><td 
bgcolor=ffaaaa>A</td><td>B</td> </table> 

 

Invisible Table border

Set <table border=0> to create an invisible table. This makes you able to create advanced page layout with text and pictures as components. You can also put tables inside eachother to obtain even more control of the layout.

Table without a shaddow

If you want to make a visible table simpler, then you can create one without a shaddow if you turn the cellpadding and cellspacing to zero like this: <table cellpadding=0 cellspacing=0 >

Blank cell

If you want to keep an empty cell open, and not collapsing as it would do if nothing is in it, put a <br>(linebreak) or a &nbsp;(empty space) in it like this: <td>&nbsp;<td> or use the tip mentioned under Netscape Error.

More about Table width:

If you spesify the width in % like <table width="80%" >, then this will mean width as a Percentage of the Window. When the window is made smaller and larger, the relative table (width in %) and the cells adjust dynamically. Not just tables can be relative to the window, but individual columns can be relative to the table. In this structure the table cell can always grow with the table, but it will get no smaller than the largest objects it contains.

Ignorred column width > Netscape Error:

Because of an error in Netscapes way of handling tables, it may happen that the table width is ignored. Try then to set all width to actual pixels. If this dont work either, download dot_clear.gif witch is an 1x1 pixels transparent gif image, and put this in the malfunctioning column like this to force its width: <img src="dot_clear.gif" width="1" heigth="1" vspace="width of column or so">

Tables and Images

Remember to allwas spesify the width and heigth attributes for images when their in a table. If you don't the the browser won't know how much space to set aside for the images, and the browser won't display any part of the table before everything is finished loaded. This is especially importent for those webpages that has all the information in a large table. Many people don't want to wait for a blank page to finish loading.

Table border and Images

If you want to put images close together with the help of a table, and you don't want any space between them, then try this <table border=0 cellpadding=0 cellspacing=0>, and make sure all images you put inside has: <td><img src="filename" width="something" height="something" border=0 hspace=0 vspace=0><td>
And remember no carriage return. Keep this last part on the same line (another bug in Netscape).

Put our webpage in a table

If you want to create a webpage with a colored background stripe at the left side (like the background of this page), then it is a good idea to put your page into a large table with 2 columns.

Image:

A background image is easily created in a grapical program like Photoshop, and here is what you do:
Create an image with a width of 1024 pixels and a height of 2 pixels. You don't need it any bigger. Save as a Gif image, not a JPEG, and color the image with the colors you want (ex. black and white).

Table width:

Spesify the width of the table like this:
<table width="preferred size or 100%">
<tr><td width="stripe width"></td>
<td width="actual size or 100%"></td> Remember to put something in both table columns, or it will be ignored. If you have any problems with the width of the left column, look at the tip under Netscape Error.