Tables Part 2

Let's make a visible table for thumbnails.

Ok.....now this is going to be a bit tricky to explain.  Let's say you are putting up a dolphin gallery.  You have a nice collection of large dolphin images that probably have a pretty large kb size.  You want people to be able to open your page with a minimum of wait time.  The answer is to create thumbnails of the images.  You should have a decent graphic program like Paint Shop Pro to do this in.  PSP has something called bicubic resample that decreases the kb size, as it resizes the image, much better than just a plain resizing.

Now, let's say you have 12 images, and for this tutorial they are all landscape format.  (wider than higher)  You want to make your little thumbnails all the same size.  Usually I pick 125 pixels wide for landscape images.  I pull up one full size image, leave the aspect ratio checked while I see about where the height comes to.  Let's say it comes to 78 pixels. I uncheck aspect ratio and resample all my large images to the rounded number of 80 pixels.  In this case the dolphin images are all going to be 125x80.  I save each of those thumbnails with the same image name of the bigger image, but I add the letter t to the end of the name to indicate it's a thumbnail of the original.

Here's my little thumbnail:

Now I want to setup a table for these 12 images.  I also want it to be visible.  Since I know the images are each 125 pixels wide, I'm going to have 4 columns to give me a table width of 500pixels.  You may wonder why I didn't put them in 5 columns, 625 pixels wide.  The answer is that a lot of people still surf the web at a resolution of 640x480.  I try to keep this in mind because that would cause them problems.  Besides, 12 divided by 4 is 4....so I'll have 4 rows.

First though, I create a large size visible border to set them off, and also add 3 pixels between the cells to provide a break between each image and a nice frame effect.

Now....table width.  I add the total width of 4 images.  4x125=500.  I set my table to be 500 pixels.  Doing this will frame the images exactly in any browser.  If you try to do it with percentages, it might look ok in Netscape, but not in IE.  In fact it won't!  ::::sighs:::  I have several thumbnail galleries that I still have to go back and set to pixel width!

Now, since they are all the same width, we keep equal column width checked.  In a more advanced table tutorial I'll show you what to do when they aren't the same width.  Now say ok so your table will appear for you.

But before you go inserting your images, do this one thing.  Once your table comes up after you check OK, put your cursor in the first column of each row,  right click and choose table properties.  Go to the Cell tab, and then the Row tab.  On each, check the two centering boxes.  Do this for the beginning of each row before you start, and you won't have to center the images for any of the other 3 columns in each row. This assures that if there is any space at all in another browser the images will be perfectly centered in their little box.

Now you can just go and insert all your images in the gallery.  After you add the first image in the first column of the first row, you can use the tab to jump to the next column, it's easier that way.  In the next tutorial I'll cover linking the images.


Email
Copyright© 1999 Web Warrios
All Rights Reserved

[Netscape 1 [Netscape 2] [Netscape 3] [Netscape 4] [Netscape 5]
[Netscape 6] [Netscape 7] [Netscape 8] [Netscape 9]
[Notepad Editing] [A Better Notepad] [Using Iview]

[Forum] [Members] [Join] [Rosebuds] [Resources] [PSP Tutorials] [Graphic Buds]