Index > Design Tutorials > Table Tutorial

By request of Cho | Note: ['s are replaced for <'s

This tutorial is going to explain how to make a table layout. In this tutorial I will be using Adobe Photoshop CS to slice the image for the layout. You can use either Photoshop or Paintshop pro to slice, which is required for the coding of a table in the way that this tutorial is going to explain. So, if you don't have PSP or PS, this tutorial won't be much help. Sorry ^^;;

Okay! Let's begin! First, you need to make the layout for your tables layout. All you do is use PS or PSP to make a design that looks exactly as you want it to look on the site. Remember, USE LAYERS for things that will be added later through html like input boxes, textareas, or text in divs. This is important. Layers are our friends :DD Below is an example that I have done ^^-

Now that you have the image all ready, go into your layers and make the ones with things that will be added later not visible. Then, get the image over to Photoshop Imageready and slice it! If you don't know how to slice go here to learn how ^^ But, with slicing there are a few things you need to remember.

  • Make sure the areas that you plan to have scroll down the page (like navigations and main content) are level with each other at the top. Otherwise, problems will occur X_X ^^;; If you really want them to be unequal, slice the layout with them even, then add an image to make it appear lower ^^
  • Make sure that if you plan to have corners of say a box at the top of content, and the bottom of the content, that they are on two separate slices. Otherwise, the layout will look bad xD I will show an example :D
  • Make sure to make a separate slice for places where you want text and such. I will show you on mine ^^

These are essential concepts to consider while slicing x_X If you mess up you'll have to slice all over again! And that is such a paaaain xD -bad experiences- Next! Onto the coding!

Well, like with all layouts you need a CSS page. I'm not going into this since I think I did in the frame and CSS tutorials :DD

Hopefully you remembered where you saved your files from slicing :DD you need the HTML file photoshop provided you with ^^ If you used Paint Shop Pro, I think you can save the code as a right click! Whee! Yay! Then all you have to do is open notepad and paste that code, then save the file as index.htm(l) ^^

Now, I usually save the coding of the CSS for last, until I have my main content text in first ^^ For this, I usually type nonsense for the initial coding to make sure that it works XD The next part is the tricky part :DD

Like in the frame tutorial, you need to find the slice where the main content will go. To find it, view the html file with the code from PS or PSP and right click in the area that the text will go. You will be repeating this step for the other portions of the coding for things like rollovers, navigation, and other things ^^

When you right click, you need to go down to properties. You need to know the name of the image. Usually in PS it will be the name that you named it when you saved it an underscore and a number ie: toejam_35 if I named the file toejam in PS.

Once you find the name of the image, you have to find it in your code. CTRL + F is good for finding, I usually just browse :DD Once you find it you have to replace the [img src="toejam_35.gif" blah blah] with your text for main content and Navigation. This ONLY goes for areas of text that scroll down the page, not for things that act as frames, divs, rollovers, things like that. IF they are any of the other things, you need to listen to me a little longer :DD

So, what do you do? All you have to do is copy the URL of image that you are replaceing. Copy the URL and in the [td] before where the image URL is located put background="IMAGEURL" after the td making the code look something like this: [td background="IMAGEURL"] This will keep the image in place for your layout, and allow you to have text on the image...YAY! For rollovers you just need to use the rollover code for the image that is already there. You do not need to replace the image code or move it, simply add the code needed to make the image a rollover image.

Now, the layout most likely looks screwed up even after all that hard work..don't worry! There is some more last steps that you need to complete to make it look all pretty-full! Here they are :D See how much I Looove youuu!

First, you need to go back to the image that you sliced. With this image you have to cut out a mid section of it like one that you would for a div/layer layout. Here is what it looks like from my layout:

I usually call it tablebg.gif, because that is what it is, a background for the table! ^^ You can name it whatever you want though xDD Except Sam sucks, because then I would have to kill you :DDDDD Go to the beginning of the code that PS or PSP gave you and go to the first [table] section. Here, after all the code that is already there, but before the closing ] put background="tablebg.gif/whatever you named it" Also REMEMBER to use the correct URL for the tablebg image. If it is in a folder named image the url will now be images/tablebg.gif :DD don't forget! That's important xD

Okay, now you have to look at your layout and see if any images are out of place! If they are, don't worry! Sam is here to save the day! Whoo! Okay, all you have to do is put valign="top/bottom" in the td code. If there is already a background="IMAGEURL" code don't worry, it will just look like this! [td background="IMAGEURL" valign="top/bottom"]. Choose top or bottom based on how the image needs to move. If it needs to move up to make the layout look pretty, put top. If it needs to move down, put bottom :D It's that easy!

Aaaand! All that's left now is making the CSS look pretty for the layout! Pretty easy huh? PS or PSP does all the coding <333 programs! All you have to do is edit it a little to make it usuable for your needs! That's why Sam loves tables so much xDD If you have any questions, don't be afraid to ask! Sam wants to help! Just EMAIL ME. I love to help!

Sitemap | Copyright 2008 Demoria.net