The Tables Tips 'n' Tricks

Some examples first

1.) The multicolor table

red	yellow
green	blue

And this is the code for it:
<table cellpadding=1 cellspacing=1 border=2 width=200> <tr><td bgcolor=#ff0000>red</td> <td bgcolor=#ffff80>yellow</td></tr> <tr><td bgcolor=#80ff00>green</td> <td bgcolor=#0000ff>blue</td></tr> </table>

2.) The colspan and rowspan command

two columns		one column
just a cell 1	just a cell 2	two rows
just a cell 3	just a cell 4	two rows

And this is the code for it:
<table cellpadding=10 cellspacing=1 border=1 width="50%"> <tr><td colspan=2>this cell goes over two columns</td> <td>one column</td></tr> <tr><td>>just a cell 1</td> <td>>just a cell 2</td> <td rowspan=2>this cell goes over two rows</td></tr> <tr><td>just a cell 3<tt></td>
<td>just a cell 4</td></tr> </table>

3.) Text and image alignment with (borderless) tables

	If you want to have two images aligned on the same line, like here, you'll have to use another table trick:
image comment 1	the "invisible table"	image comment 2

And this is the code for it:
<table border="0" width="100%"> <tr><td align="left"><img src="../bilder/athens.gif"></td> <td align="center" valign="top">If you want to have two images aligned on the same line, like here,<br>you'll have to use another table trick:</td> <td align="right"><img src="../bilder/athens.gif"></td></tr> <tr><td align="left">image comment 1</td> <td align="center" valign="middle">the "invisible table"</td> <td align="right">image comment 2</td></tr></table>

4.) A few tips and tricks more...

If you do not set width values, the browser makes the table size according to screen width and table contents.
If you do not set align values, the table will appear like <align="left" valign="middle">.
If you do not set bgcolor values, the table will appear with the document's bgcolor but will override background images.
Font settings are always restricted to one cell. Place the <font> tag always within the <td> </td>
You can use tables to make a divided background; simply open a one-row table immediately after the <body> tag and give each cell a different bgcolor value. (Like the Neighborhood pages do with the black and white background...)
Tables can be nested, you can open a table within a table cell ... (thus, you can still have a table in a "table-background" page)
bordercolor is visible for Netscape Communicator and MSIE 4+ browsers only

If you have any questions, please do not hesitate to write me an email.

Made 1998 by wohli (Jan Wohlgemuth).

Hosted by www.Geocities.ws