Using Tables For
Page Layout

Tables can be used for page layout as well. The difference is we use images as data for the table. We'll demonstrate this with an example.

This image is created out of 4 different images and put into a table.

<table cellpadding=0 cellspacing=0>
<tr>
<td><img src="1.gif" alt=""></td>
<td><img src="2.gif" alt=""></td>
</tr>
<tr>
<td><img src="3.gif" alt=""></td>
<td><img src="4.gif" alt=""></td>
</tr>
</table>

You can create your own interface and then use a table to display it. We'll show this on the next example. We'll split the next images and use a table to put it back together.

example

How do we do that. First will split this image by sections. Each section is going to be a separated image. The header is one section. Each button is an other. To make our work easier, we'll cut a small piece of the post and make it the background image. This is how we cut our image.

example

Now we have to put our pieces together. Here is the HTML code we'll use. We have put a border so that you can easily see what in which cell goes.
 

<table border=0 cellspacing=0 cellpadding=0 width=250>
<tr>
<td colspan=4><img src="i1.gif" alt=""></td>
</tr>
<tr>
<td valign="top" background="i5.gif">
<img src="i2.gif" alt=""><br><br>
<img src="i3.gif" alt=""><br><br>
<img src="i4.gif" alt=""><br><br>
</td>
<td><img width=10 src="spacer.gif" alt=""></td>
<td><br>Here you can write what ever you want.<br>
</td>
<td><img width=10 src="spacer.gif" alt=""></td>
</tr>
<tr>
<td valign="top"><img src="i6.gif" alt=""></td>
<td><img width=10 src="spacer.gif" alt=""></td>
<td align="center"><br>Copyright © 2000,2001<br>Proxima Design</td>
<td><img width=10 src="spacer.gif" alt=""></td>
</tr>
</table>









Here you can write what ever you want.

Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla Bla

Copyright © 2000,2001
Proxima Design

 

There are many ways to organise your page layout. You could for example put all your buttons in a separated table, or put each button in its own cell. Which ever way you choose we wish you good luck.


 
Proxima Design Copyright © 2000, 2001 Proxima Design Proxima Design
Back Home Links e-Mail