|
Using CCS to Eliminate Tables
|
By Sanjay Johari
[Hits: 1977]
|
|
CSS or Cascading Style Sheets has opened up tremendouspossibilities for improving web site designs, web page layoutsand adding new features. The HTML code can be made shorter,cleaner and simpler by CSS resulting in faster loading of webpages, and making them more accessible to search engines. Here Iam narrating my experience with only one part of CSS - using itto eliminate tables.
If you look at a traditionally designed web page, you are likelyto find number of tables in the layout. Tables were earlier usedonly for displaying information in a tabular form. But web sitedesigners soon started using tables for other applications suchas showing images, graphics and other decorations.
My own web pages were earlier checkerboards of tables. Each webpage was almost fully covered with tables and many tables werenested inside other tables. As I tried to add more features thedesign became more and more complicated resulting in longerloading times. It also took lot of time to "adjust" the tableson the page to make it acceptable.
It was not an easy task to redesign all the pages using CSS. Butonce I started, the improvements were more than I had bargainedfor. The design became simpler, the appearance improved andloading 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 change theappearance but to make the design simpler. Now the tables whichwere earlier used only for design purpose have been eliminated.For eliminating tables first step is to decide which tables ormore specifically which cells have to be removed. For applyingCSS each cell of a table can be considered as a "box". Theseboxes are given separate identities and description of each"box" goes into CSS code. The "boxes" can be given names such asbox1, box2 etc. The description of the "box" can include size,its location on web page, background color and image if any,font details, padding, border details etc. The location of the"box" can be made "fixed" on the web page, or it can be floatingin which case location can be defined with respect to another"box".
If the location and dimensions of the boxes are properly workedout, they neatly fit into the web page giving it a clean look.Since the code associated with table designs are done away with,the content of the page attains more prominence in the code.This makes it easier for search engine spiders to locate theactual content of the page.
If you have several web pages with similar design, the CSS codewith these and other details can be put in an external file.This will further shorten the code for each page. With CSS lotmany improvements can be done in web page design and layout. CSScan also be used for search engine optimization of the page.
My experience with CSS has been great and I wonder why it is notused more often. My advice - convert to CSS based design.
|
|
|
|
|
|
