Wondering how I centered my layouts properly? Well, here's the place to know how! You can actually make a table layout shift any way you want, as long as you code it properly.
1. First off, you have to make a table (obviously). You do that by using this code:
<table align="center" border="0" bordercolor="none" width="600" cellspacing="0" cellpadding="0" background="#ffffff">
In this case, I will make the table 600 pixels wide, with a white background. You can also replace #ffffff with a background image, such as "bg.jpg" or whatever you choose to name your background image.
2. Underneath this, you will now insert this code:
<tr>
<td colspan="5">
<img src="YOURIMAGEHERE.JPG" width="600">
</td>
</tr>
The tag added right after <td means that the image will span across 5 columns - kind of like merging cells. You will put
colspan="5" for a layout that has one navigation bar and a cell for your content, but for a layout that has two navigation bars, you might want to change it to
colspan="7", which I will explain later.
3. Here's a slightly tricky part. Underneath the banner, you will now insert your content and navigation:
<tr>
<td width="5" valign="top"> </td>
I always like to have a little of space from the left and right of my table, so that the text doesn't stick right to the side of my tables. For the content:
<td width="360" valign="top">
PUT ALL OF YOUR CONTENT HERE.
</td>
I also like to separate my content from my navigation slightly, so now you will insert another empty cell to create some space:
<td width="10" valign="top"> </td>
Now I will create a cell for my navigation, as follows:
<td width="120" valign="top">
PUT ALL OF YOUR NAVIGATION HERE.
</td>
And, of course, I will create a little bit of space from the right of my layout.
<td width="5" valign="top"> </td>
</tr>
Notice that when you add up all of the widths of the rows, you get exactly 600 pixels. That is very important, if you don't want your layout to be weirdly distorted in different browsers. Furthermore, if you count the number of
<td>s (aka columns), you'll find that I have 5 of them, the same number as the
colspan tag. Well, you'll notice that for a two column layout, you start out with two columns. I need space before the first column, after the second column, and in between the two columns. That makes three columns. Three and two make five. Similarly, for a three-column layout, you have three columns to start with, then you need space before column #1, space between column #1 and #2, space between column #2 and #3, and space after column #3. Four and three make seven. The
colspan tag kind of merges the columns together, so that your layout isn't just in one column.
4. This step is optional, but if you want to have an end image (as I sometimes have), you can just create another row/column and insert your end image there:
<tr>
<td colspan="5">
<img src="YOURENDIMAGEHERE.JPG" width="600">
</td>
</tr>
5. Now, just add this little piece of code:
</table>
Congratulations! You have now learned how to make a centered table layout! I don't know about other people, I just know that this is my way of doing it. You can replace the align="center" in the first piece of coding with align="right" or align="left"; it's all up to you. PLEASE remember to credit me if you use this tutorial, because it took me a long time to write.
