Title: Making a Web Layout
Program(s): N/A
Description: This tut will teach you how to make a basic table web layout. Note: Basic HTML skills required
Written by: © Nicolette


In order to make a table web layout, we'll have to start the table xD. We are going to start the table using this code (you may want to center your web layout):
<table width="800" border="1px" bordercolor="black" cellpadding="0" cellspacing="0">

The things that are bolded are things that you can change. You can change 800 to the width that you want your web layout to be (I personally like 800 =P). 1 defines the border's width, which is currently set to one pixel. I wouldn't recommend changing it =P. Black will be the border's color, but you can change it to any other color you want (use hex color code if needed ;D).


In order to add a row to your table, use <tr> and </tr>. In between those two tags, add <td height="250">Blah</td>. You can change the height number to anything you like. I just did 250 because that will be my top banner's height =). Now we have to add a left and right sidebar, and a content space in the middle. That means we will have to add three columns below the row we just made ;). But since we want our top banner to stretch over the three columns, we'll have to add colspan="3" in the last code I showed joo ^^.


To make the left sidebar, we'll start with this code:
<td width="167" height="850" align="left" valign="top" bgcolor="#AB8330">Left navigation</td>
You can change the width number to anything you want, preferably 1/4 of the top banner's width (use your oh so awesome math skills ;)). You can change the height number to whatever you want (this will be the height of the sidebar). The bgcolor color code is the background color for the sidebar. Now we'll insert the middle content part of the table. Use this code:
<td valign="top" bgcolor="#FFFFFF">Text here</td>
Easy =P. If you want to change the background color for this part of your web layout, change the number of bgcolor (I set the color to white). To add the right sidebar, just repeat the left sidebar code you personally used after the middle content part code ;-). Now we will wrap our sidebar and middle part codes in a beautiful package by inserting <tr> before those codes and </tr> after those codes (familiar?)


Now we will add our bottom section of our web layout for the credits. Simply use this code:
<td colspan="3" align="left" valign="top" bgcolor="#AB8330">Credits here</td>
...And of course, wrap it in another beautiful package by inserting the opening tr tag and the closing tr tag ;). Now we have to close the overall table. Insert </table> after your whole code. And now you've got your web layout!


Next I will explain all the coding we just did (that I haven't explained above), so you can eventually make your own web layout from scratch ;-). "td" defines the table's data, such as the width and height. "colspan" makes sure that the row you're making stretches across all the other tables. So for example, if there were 5 table rows above the row I wanted to make and I wanted the table to go across all the above tables, I'd add colspan="5". "align" defines if the text inside the table is going to be centered, left or right. "valign" makes sure that the text inside the cell is either on on the top (inside the cell), bottom, or in between.


I hope this helped you code your very first web layout! It would be very appreciated if you credited TBT on a credit page, but of course it's not forced =). Also note that this is not the only way you can code web layouts, TBT's web layout is tables as well, but a bit more complicated.

~Nicolette