|
Coding a table layout tutorial
To do this tutorial, you need a layout and a paint program. I will use paintshop pro but photoshop or photoplus will do fine! You will need to follow one of the slicing tutorials though before beginning the coding part of this tutorial. |
| Step 1: Here is the layout I will use. You can use it to do the tut but it is strictly forbidden to use it to make yourself a website. Click on the image below to see it in it's original size. Just a note, in your design, do not put any background. |
 |
| Step 2: I won't go into details about slicing it since I have created detailed tutorials to help you do that but below you can see the section I have sliced, the menu, the main content and the credit area. Do not include your border, just cut out the inside of the areas. (Keep an unsliced version of your layout, we will need it later in this tutorial). |
 |
| Step 3: You now have a sliced table layout and here is what you should have by now: Clickie. I will add a background to this layout. I have chose a simple colored background but if you want a pattern background, check out step 6 of this tutorial. Ok so to add the background simply insert a background color attribute in your first body tag like below (choose any color your like to match the layout). This is what your layout should look with a background: Clickie. (just want to point out that depending of the program you have used to slice, your body tag could be different, sometimes there is margin attribute, you can delete them). |
| Step 4: Let's center that layout. Add the code below just below your first body tag (the one we just edited on step 3). You will also have to add the closing div tag just above the closing body tag. Note that the padding value can be change to your liking, it's the position of you layout from the top of the page. Here is what I have now: Clickie. |
| Step 5: To add the menu and the credit in the appropriate cells, you will have to remove the image in the cell and set them as background instead. Since I already all explained that in my Iframe tutorial, I will invite your to check it out here. Just follow those steps and you will be able to add content in those cells. |
| Step 6: Now we will work on the main content cell... With an Iframe, when your content expand, it automaticly scroll. With a table it doesn't do that. if you remove the image and set it as a background, when your content will expand the cell, all the layout will be screwed up. First of all, repeat the previous step to remove the image and set a background to the cell. Let's do a test now, insert content in that cell so that it expands it. (just insert several line breaks it should do the trick. See what happends here: Clickie. See? my borders are cut and it's not really beautiful. To fix this, we will add a background to the table, so when the content expand, the background will stay in place. In your paint program open your unsliced layout. You will have to cut a row in the main area. Cut from the left border to the right border. Check out the image below to help you. (since my border is white it's difficult to see on a white background, that's why I have put a black border to mine so it's easiest for you to see what I am doing! Yours should not have the black border. The height doesn't really matter unless you use a pattern border, you will want to cut it so the border align when it's repeated.) Save this image as tablebg.gif. |
 |
| Step 7: To add the background, simply add a background attribute in your first table tag. Now look the result when the content expands the cell: Clickie. (your table tag may have other codes in it depending on which program you have use to slice your layout, do not touch them, just add the background in the tag). |
| Step 8: To add some more pages to your site, simply copy the index page and change the main content! |
|
That's it your done! I invite you to check out this
site, it will help you create a stylesheet (CSS) to customize your layout! Any questions? Click here |