Subscribe Now

Receive alert message from us when new articles submitted to our site for free.

Enter Your Name
Enter Your E-Mail

Sponsors

Internet Marketing
Business Letter
Nursing job opportunities


Categories




Sign Up Here

Home / Computer Programming / CSS


Print | Send To Friends | Add To Favorites | Comment

Using CCS to Eliminate Tables

By: Sanjay Johari

Article Word Count: 1235 words  [Comments (0)]
Total Views: 143 Views
















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 in the 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 features the













design became more and more complicated resulting in longer













loading times. It also took lot of time to "adjust" the tables













on the page to make it acceptable.



























It was not an easy task to redesign all the pages using CSS. But













once I started, the improvements were more than I had bargained













for. The design became simpler, the 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 change the













appearance but to make the design simpler. Now the 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 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 floating













in which case location can be defined with respect to another













"box".



























If the location and dimensions of the boxes are properly worked













out, 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 the













actual content of the page.



























If you have several web pages with similar design, the CSS code













with these and other details can be put in an external file.













This will further shorten the code for each page. With CSS lot













many improvements can be done in web page design and layout. CSS













can also be used for search engine optimization of the page.



























My experience with CSS has been great and I wonder why it is not













used more often. My advice - convert to CSS based design.













Grab this articles

Related articles


Newest Articles

Most Popular Articles