Layout,Image Slicing and, to use Tables or not

This site will show you why Image Slicing, Fluid Page Layout, and Css is better to use then a table It will also tell you what slicing is and why people should use it and also the Pros and Cons of using HTML Tables.

Slicing

What is Slicing?

"Slicing"is the process of chopping up a large image into smaller images for use in a Web page. The images are then placed in the Web page.They are usually in HTML tables or divs which makes them join together again to form the original, large image or to make a diffrent image out or may other images.

Why use Slicing

Here are three main reasons that slicing should be used:

  1. Rollovers

    In order to create rollover menus that integrate well with the rest of the graphics on the page, you need separate, small images for the menu items. It would simply take too much bandwidth to have one big image for every single rollover.
  2. Control over layout

    By splitting the big image up into lots of smaller images, you can control the position of other page elements, such as HTML text and Flash movies, more easily. For example, you can place a Flash movie "inside" your big image by creating a table around the movie that contains the slices of your big image. You wouldn't be able to do this if you just had one big image, as there would be nowhere to put your Flash movie!
  3. User Friendliness

    It's not nice to have to wait ages for a big image to download. By splitting the image up into smaller images and placing these images in the Web page, the user can get a feel for the layout and look of the page before the whole page has loaded.

Pros and Cons of HTML Tables

Pros

  • It is the easiest way to the same height.
  • It avoids using float or position:absolute for purposes for which they were not intended.
  • It provides a simple way for beginners to produce side by side layouts in CSS without polluting their HTML with non-semantic tags.

Cons

  • It doesn't work in IE7 and earlier and so you either need to define a different layout for those browsers or mess around with floats or position:absolutes to produce CSS for those browsers which works equally well in other browsers anyway.
  • To create a colspan or rowspan effect requires nesting one table inside another.
  • It encourages people to build grid layouts rather than taking a more flexible approach.

Created By:Karina Drake

If you have questions contacted me at karinadrake@ymail.com