Table layout (Div style) - Designs / Layouts tutorial
- Added: Jul 19th, 2005
- Level: Medium
- Author: Melfina
- Reads: 86,704
- Description: Tutorial on the extendable div-looking table layouts.
This time, we'll consider you have already done your design in Photoshop. This tutorial will cover a certain style of tables layout, such as the one I made, shown at the left: it's a three column table layout (though you may add the columns you want) resembling a div, since the text will be over the lower part of the image.
You can choose preferably any size under 778 pixels width (it's 780, but I'm considering the width of the borders we'll add - Note that you your image shouldn't have a border around it!!) so that it doesn't side scroll in 800x600 resolution. I usually use a width of 750px.
2. The first slices
A. Take the slice tool, and make a big slice exactly where you want your text and/or navigation to start, as it's shown in the left picture. Remember: Even if you want the navigation links at a different level than the content, always slice both at the same level, otherwise, there will be a horrible blank space when you code it!
B. Now right click on the slice at the top of the image and click Divide Slice (Second picture). You may add the slices you want, for example, I put 4 horizontal slices. On this step, we're optimizing the image so it doesn't load too slow when the page is viewed by the visitors, but you don't need to make a thousand of images either... between 4 and 10 slices is okay.
3. Seperating Areas
Make three slices (depending on the number of columns you have) one with the content and two for the navigation areas: At the same horizontal level!. Zoom it to make sure that you didn't left any space between the slices. If you don't know what I mean, just click on the image at the left. The slice tool works more or less as the rectangular marquee tool, so it's not very hard to use.
4. Save for web
We have all the Photoshop work done now (but don't close the document yet), we can save it to start coding. Go to File > Save for Web and save all slices as 60 quality JPEG. Notice that the properties of the slices are set seperatedly, so take the slice tool in the Save for web window and click on a slice, do the same with all slices to make sure the values are correct. Click Save when you're done and save it as HTML and Images.
5. Content coding
Open the html file you just saved in Notepad. In your Photoshop document, find the slices that correspond to the navigation and content areas and find that slice in your HTML coding and replace this:
Basically, what we do, is delete the image from there and put it as a non-repeating background on the cell so that the text will go on top of the image. We do the same with all the content areas, the ones that will hold links and text, not all images!
*. Navigation and content at different levels
We always need to make the slices at the same level, but what if we want our content or a certain navigation to be on a different level? Use
<style="margin-top: Xpx";> on your td cell, for example:
This will put the content 25 pixels down the top of the slice.
6. Centering the table
Skip this step if you don't want to center your table. Search for this just before your
Replace with this:
7. Adding a border
Now we need to add a border and a repeating background like we use on div layouts. On your table tag add a 1px solid border like this:
Remember to replace #000000 for your color, preferably a dark one that's contained on your layout image.
8. Table background
The final step, adding a background so the table expands with the content. For this we need to open our layout PSD on Photoshop and take the single row tool , click on the very bottom of the whole layout psd and go to Edit > Copy Merged. Make a new image and click Ctrl+V (or Edit > Paste) and save the image for web as a 60 quality jpg. Name it tablebg.jpg for example. We'll put that image as table background now:
Now the table layout is mostly done :) you should put your CSS, content and anything else you want to change now just like you would do with any other layout. Good luck!
Tutorial © Melfina. Do not reproduce in any way without previous permission from the author.