Tables Layout

Here's a tutorial on how to make a simple table layout. I usually use Photoshop to make my layouts and then I cut and code them by hand.

To cut the layout I flatten all layers, copy the flattened background, delete it, then paste the copied background as a new layer. I then use the Rectangular Marquee and select the first slice that I want to use, copy that, delete it, and then paste that into a new image. I then save that as the slice. I then follow the same steps until I'm done. It's quicker than it sounds. ;)

Okay, let's start out with a layout that I made that isn't coded yet.



I then cut that image into seven different images.

left.jpg
top.jpg
right.jpg
bg.jpg
bg_02.jpg
bottom_01.jpg
bottom_02.jpg



Now we're ready to code the layout. This layout will consist of only a content area.

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

^ Set your width of the layout, add your background to the table, and center it.

<tr valign="top">

^ Start a row and align everything to the top of the row.

<td width="8"><img src="left.jpg" width="8" height="249"></td>

^ Start a column and insert your left side image, then close the column.

<td width="385"><img src="top.jpg" width="384" height="249">

Content...blah, blah, blah

</td>

^ Start another column and add your main image, then add a line and start your content, close the column.

<td width="7"><img src="right.jpg" width="8" height="249"></td>

^ Start another column and insert your right side image, then close the column.

</tr>

^ Close the row.

<tr valign="top">

^ Start another row.

<td colspan="3"><img src="bottom_01.jpg" width="400" height="3"></td>

^ Start another column and insert your bottom image, close the column.

</tr>

^ Close the row.

<tr valign="top">

^ Start another row.

<td colspan="3" background="bg_02.jpg"><center>&copy; Site</center></td>

^ Start another column, and add your second background. Enter any copyright text you want, and then close the column. I also centered the text. Close the column.

</tr>

^ Close the row.

<tr valign="top">

^ Start another row.

<td colspan="3"><img src="bottom_02.jpg" width="400" height="2"></td>

^ Start another column and insert your last bottom image. Close the column.

</tr>

^ Close the row.

</table>

^ Close the table.



Okay, now here's your finished code:

<table width="400" border="0" align="center" cellpadding="0" cellspacing="0" background="bg.jpg">
<tr valign="top">
<td width="8"><img src="left.jpg" width="8" height="249"></td>
<td width="385"><img src="top.jpg" width="384" height="249">

Content...blah, blah, blah

</td>
<td width="7"><img src="right.jpg" width="8" height="249"></td>
</tr>
<tr valign="top">
<td colspan="3"><img src="bottom_01.jpg" width="400" height="3"></td>
</tr>
<tr valign="top">
<td colspan="3" background="bg_02.jpg"><center>&copy; Site</center></td>
</tr>
<tr valign="top">
<td colspan="3"><img src="bottom_02.jpg" width="400" height="2"></td>
</tr>
</table>



...and here's how it should look coded, note I did not add any css to the layout.

[click here]

And there's how to make a table layout. Good luck on your own. ^_^

 • Main/Updates
 • Domain
 • Current Layout
 • Past Layouts
 • Contact
 • Links
 • Credits
 • Terms of Usage
 • Layout Guide
 • Layouts
 • Avatars
 • Abstract Art
 • Tutorials
 • PNG's
Kamui [Tsubasa Reservoir Chronicle] Subaru [X] Yuuko [XXXHOLiC]
2003 - 2012 Amber-Nights.net