Using CCS to Eliminate Tables

Written by Sanjay Johari

CSS or Cascading Style Sheets has opened up tremendous possibilities for improving web site designs, web page layouts and adding new features. The HTML code can be made shorter, cleaner and simpler by CSS resulting in faster loading of web pages, and making them more accessible to search engines. Here I am narrating my experience with only one part of CSS - using it to eliminate tables.

If you look at a traditionally designed web page, you are likely to find number of tables inrepparttar layout. Tables were earlier used only for displaying information in a tabular form. But web site designers soon started using tables for other applications such as showing images, graphics and other decorations.

My own web pages were earlier checkerboards of tables. Each web page was almost fully covered with tables and many tables were nested inside other tables. As I tried to add more featuresrepparttar 105156 design became more and more complicated resulting in longer loading times. It also took lot of time to "adjust"repparttar 105157 tables onrepparttar 105158 page to make it acceptable.

It was not an easy task to redesign allrepparttar 105159 pages using CSS. But once I started,repparttar 105160 improvements were more than I had bargained for. The design became simpler,repparttar 105161 appearance improved and loading time came down considerably. The code looked real clean. Most of "td" and "tr" tags were gone.

My purpose of this exercise was not really to changerepparttar 105162 appearance but to makerepparttar 105163 design simpler. Nowrepparttar 105164 tables which were earlier used only for design purpose have been eliminated. For eliminating tables first step is to decide which tables or more specifically which cells have to be removed. For applying CSS each cell of a table can be considered as a "box". These boxes are given separate identities and description of each "box" goes into CSS code. The "boxes" can be given names such as box1, box2 etc. The description ofrepparttar 105165 "box" can include size, its location on web page, background color and image if any, font details, padding, border details etc. The location ofrepparttar 105166 "box" can be made "fixed" onrepparttar 105167 web page, or it can be floating in which case location can be defined with respect to another "box".


Written by

Cont'd on page 2 ==> © 2005
Terms of Use