Two Column Tables Layout

This tutorial is for a simple two column tables layout. First I'm going to show you how I cut and code a layout. I do not use the slice tool in Photoshop or any generator, I cut and code my layouts by hand. For this I will be using Photoshop 6.0.

First, let's start out with our layout. Flatten all layers and copy it, then paste it as a new layer in a new image.

In this layer copy the top part with some padding space below it into your content and navigation areas. Paste this as a new layer in a new image, now we'll get to cutting this for our columns.

Select the left part for a column, making sure to have the same amount of padding as you made for the top section. Copy it and delete this section from your image. Paste this in a new image and save as left.jpg.

Now select your area for your content, make sure the amount of padding is the same as for the other parts. Copy, delete, and then paste in a new image. Save as main.jpg.

Select your middle part of the image, this will be your spacer between your content and navigation. Copy, delete, and then past in a new image. Save as middle.jpg.

Now select the area that will be for your navigation. Copy, delete, and then past in a new image. Save as nav.jpg.

Now select the area that will be for your right side of your layout. Copy, delete, and then past in a new image. Save as right.jpg.

Go back to the very first image and select the singe marquee tool (1 px horizontal) and select a line that goes across all of your columns. Copy and paste as a new image and save as bg.jpg.

Select the bottom part of your layout and make sure to have the same amount of padding as with prior sections. Copy and paste as a new image and save as bottom.jpg.

Now we have all of our cuts. You should have left.jpg, main.jpg, middle.jpg,nav.jpg, right.jpg, bg.jpg, and bottom.jpg. Next is coding our tables.

Coding

<table width="610" border="0" cellpadding="0" cellspacing="0" align="center" background="bg.jpg">

The first part of your table. This layout has a width of 610 pixels, so define that. We're aligning it centered, and we'll set our background with bg.jpg.

<tr valign="top">

Start a row.

<td width="11"><img src="left.jpg" width="11" height="237"></td>

Add a column for left.jpg and define it's width to 11 (this is the width of left.jpg).

<td width="419"><img src="main.jpg" width="419" height="237">

Content

</td>

Add another column and for main.jpg, set it's width to 419. This is the column for your content as well. Make sure the column is closed with </td> after your content!

<td width="31"><img src="middle.jpg" width="31" height="237"></td>

Add a column for middle.jpg, set it's width to 31.

<td width="138"><img src="nav.jpg" width="138" height="237">

-Link<br>
-Link<br>
-Link<br>
-Link<br>
-Link<br>
-Link

</td>

Next is the column for your navigation, set it's width to 138. Make sure it's closed as well with </td>!

<td width="11"><img src="right.jpg" width="11" height="237"></td>

Then add your column for right.jpg, set it's width for 11.

</tr>

Close the row.

<tr valign="top">

Start another row.

<td colspan="5" height="11"><img src="bottom.jpg" width="610" height="11"></td>

Make a column for bottom.jpg, set it's height to 11. Note colspan="5", this is to accompany the five columns in the first row. If you forget this, your entire layout will be messed up.

</tr>

Close the row.

</table>

Close the table.

Finished Coding

<table width="610" border="0" cellpadding="0" cellspacing="0" align="center" background="bg.jpg">
<tr valign="top">
<td width="11"><img src="left.jpg" width="11" height="237"></td>
<td width="419"><img src="main.jpg" width="419" height="237">

Content

</td>
<td width="31"><img src="middle.jpg" width="31" height="237"></td>
<td width="138"><img src="nav.jpg" width="138" height="237">

-Link<br>
-Link<br>
-Link<br>
-Link<br>
-Link<br>
-Link

</td>
<td width="11"><img src="right.jpg" width="11" height="237"></td>
</tr>
<tr valign="top">
<td colspan="5" height="11"><img src="bottom.jpg" width="610" height="11"></td>
</tr>
</table>

...and that's it. You can now add css effects and such, it's really up to you. You can see the finished layout [here].

There are several different ways that this particular layout could have been cut and coded. I could have just cut this with one top and bottom image with a 1 px background, and then coded the center part for content and navigation with spacers purely in tables. I also could have made this where the navigation area won't expand with the content.

There are many options, but I think the type I did is probaby one of the easiest.