Using CCS to Eliminate Tables

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.

Sanjay Johari contributes articles regularly to various ezines. His website contains information, articles, resources, opportunities and more for small business owners and home based business owners. http://www.sanjay-j.com

Join the longest running internet business opportunity - because it works! http://www.sanjay-j.com/empowerism.html

---

Choosing Your Web Design

We would all like to have the best looking website,... Read More

How To Create A Homepage That Works

Want to know what the worst thing to say on... Read More

How To Use Unsafe Web Colors With Minimum And Safety And Maximum And Profit

Do you want to use unsafe web colors without offending... Read More

The Most Important Question To Ask About Your Web Site!

When you design a website how do you start ?Do... Read More

Online Advertising: 10 Tricky Secrets To Keep Visitors Glued To Your Website And Increase Sales

It is common sense.The more time people spend at your... Read More

Why Use Professional Web Site Designers For Your Next Web Development Project?

Probably you know someone who has created a web site... Read More

My Top Ten List Of Extremely Annoying Web Page Design Elements!

Easy navigation and usability are one of the most important... Read More

Caveat Scriptor: Use the Advice of Those Who Know Before You Build a Site

~A man [woman] is a success if he [she] gets... Read More

Dont Overdo it!

Have you ever been to site with so much ad... Read More

5 Ways To Improve Your Website Immediately

If you are reading this, I assume you either have... Read More

10 Ways Web Site Text Can Impact Your Readers Buying Decision

10 Ways Web Site Text Can Impact Your Reader's Buying... Read More

Pages to Include in Your Website

What pages need to be included on your website? The... Read More

Web Production And Design Tips

You have identified that to have an internet prescence would... Read More

Website Design - Choosing Your Colors Wisely

Colors convey emotions and emotions heavily influence the decision-making process.... Read More

The Next Marketing Tool: Deisgn

Design sells. It's something that all of us know, but... Read More

Your Web Site Is A Wonderland: What Picassos Art Taught Me About Persuasive Design

Whenever singer John Mayer sings his romantic song, "Your Body... Read More

Why is a Logo so Important to Your Business?

Well, a logo for your business. Why is it important?... Read More

Your Website Hurts My Eyes: 7 Reasons to Tone Down Your Advertising

So you're on the computer, as usual. Your eyes are... Read More

Build Web Pages from the Top Left Corner Down

There are two important reasons to build your website from... Read More

10 seconds is all it takes? (How to grab the attention of your audience with your web site)

FACT: 30 to 60% of visitors tend to drop off... Read More

Breathe New Life Into Your Half-dead Website By Using Words That Sell

This article may come as a surprise to you.Especially since... Read More

Got Web Traffic but Still Low Sales? Ten Ways to Selling Success - Part 2

Part one of this article is available at ... Read More

Custom Web Site Design Strategies

Web site design has certainly, in the past decade, evolved... Read More

Banner Enchancement - Designing Your Banner

A well designed web site is great to have, but... Read More

Website promotion Ideas: 10 Web Site Add-Ons To Increase Your Traffic

If you're not getting a lot of traffic to your... Read More

Low Cost Web Design In Birmingham

There are many companies who build websites, all of which... Read More

TEN Answers That Turn Your Visitors Into Your Customers

You know... Before purchasing your product a person comes to... Read More

Web Site Redirection - How to Implement a 301 Redirect

You just created a new web site but want to... Read More

Web Site Design Mistakes ? Database Parameters In URLs

Creating a web site takes thought, planning and execution. Unfortunately,... Read More

Successful Flash Tips

Ever browse across a website that took ten million years... Read More

Do You Really Need A Website?

Nope. You certainly don't need a website.But you don't need... Read More

Website Conversion Secrets Revealed

In my last article entitled, Maximizing The True Value Of... Read More

You Need RSS, Atom, and ROR/RDF Codes on Your Website--Now You Need Google Sitemap as Well!

Do you have a website? If so, you need an... Read More