This layout technique is better for when you want all your iframes lined up, and it also makes centering a lot easier, because everthing is contained in a table. There's ups and downs to this type of layout, one of the downs is that you can't really place your iframes where ever you want. They can only go where your table cells can go. But, with a little creativity, you can do a lot with it! For example, this site is made with iframes and tables. So, to begin, we need to know how to make a table. If you don't know already, check out my table tutorial.
Now once you know how to make a table, create a table for your layout. As in, Just make sure it's the right size, you have room for your content, links, navigation, basically whatever you like! As long as you can make it fit, that's great. You can also add background colours and borders to your table if you don't add an image as the background. For mine, I'll be making a basic layout similar to the one on this site, with my navigation on the left, and content on the right. So my table code will look like this:
Ok, so now we have our layout skeleton coded, and it looks like this: My Layout So Far.
Now, we need to add our iframes in. We take our code from above, and where it says 'Whatever Iframe Goes Here', we put in an iframe code. Make sure that you put in the right size for it! Your height's going to be the height you put in for your table, and your width is going to be whatever you putin for the width of that one cell. So now, I have this code, where my iframe codes are bolded to show what I added in now:
<center>
<table width="500" height="700" cellspacing="10">
<tr>
<td width="150" valign="top" style="border: 1px solid #000000; background-color: #FF9C0F;">
<iframe src="YOUR NAV PAGE URL HERE" name="nav" frameborder="0" scrolling="auto" allowtransparency="true" style="width: 150px; height: 700px; border: 0;"></iframe> </td>
<td width="350" valign="top" style="border: 1px solid #000000; background-color: #FF9C0F;">
<iframe src="YOUR CONTENT PAGE URL HERE" name="main" frameborder="0" scrolling="auto" allowtransparency="true" style="width: 350px; height: 700px; border: 0;"></iframe> </td>
</tr>
</table>
</center>
And there! Your layout's pretty much done! Now you just need to add an image, pages, and any other details you might want to add. Remember- you can make your layout as long as you want to fit all your content in, as wide as you want, and you don't even need to space your cells like that! Just be creative and do whatever you want with it to make your layout all your own!
