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

---

How Do We Know When Its Time To Redesign Our Web Site?

A question we frequently get asked is, "how do we... Read More

Flash Design Adds Website Versatility

You have probably viewed many Flash-based components while surfing the... Read More

Make Artistic Graphic Designs

Are you a student of graphic design? If you have... Read More

Adding the Right Keywords to Your Website Content

You've made your website, added a great title and keywords... Read More

Effective Website Design For Massive Traffic

STEP 1:Do your homeworkPlan and think about your content. Think... Read More

Congratulations! You?ve Gotten Visitors To Your Site! Now, Can They Find What Theyre Looking For?

As search engine marketers, we spend an enormous amount of... Read More

Pop-Ups Still Work. At Least For The Time Being

Do you remember playing with the jack-in-the-box toy as a... Read More

Understand Your Color

Any design on a web application involves the effective input... Read More

.htaccess to Mask Errors on Your Website

The .htaccess file is a control file located in your... Read More

Create A Web Site That Builds Trust

If someone doesn't know you personally, will they trust you... Read More

Building An Effective Furniture Sales Web Site

Web sites that feature products ? especially furniture or other... Read More

Why Use a Web Design Template?

What is a Website Template?Many smart and savvy businesses are... Read More

Three Things You Must Do When Designing and Building Your Small Business Website

If you are going to have a web presence for... Read More

11 Steps to Sticky Web Site!

An attractive and user-friendly Web site is crucial to attracting... Read More

Your Site Map: Spider Food or Just A Light Snack?

Mechanical spiders have to eat. In fact, they usually have... Read More

Content - the Key to Long Term Success

Every day internet marketers are inundated with the latest fad... Read More

Click Here

See, works every time. Seriously now, for some reason people... Read More

20 Tips to Creating a Profitable Website

As an online Entrepreneur you require a successful website.One that... Read More

Graphic Design Using Color

Color is everywhere and conveys a message even if we... Read More

Website Design Mishaps - How to Avoid Costly Errors That Can Crush Your Chances of Success

Designing your website can be a difficult task especially if... Read More

Introduction To CGI Scripts

Using CGI scripts to add automation to your web site... Read More

A Beginners Guide to Web Page Design

Designing your own successful web page can seem difficult and... Read More

Text Is King!

Are you building your website? If so, STOP! Take a... Read More

Appropriate Key Words Choice

What do the key words represent?Key words - these are... Read More

Online Businesses Still Ignoring Dial-up Market

In this article you will find the parallel between two... Read More

Looking for a Web Design Company? Use a Web Design Directory

Your business website tells a lot about your company. A... Read More

404 Error - The Page Cannot be Found

A "404 Error" happens when the web server you are... Read More

Flash - To Use Or Not To Use?

Out there in the WWW there are thousands sites using... Read More

Top Ten Absolutely Free Websites for Downloading Cool Fonts

The following list of websites is the best compilation of... Read More

Using CCS to Eliminate Tables

CSS or Cascading Style Sheets has opened up tremendous possibilities... Read More

Web Designing Tips

Easy That's how you'd like life to be, right? Especially... Read More

5 Ways To Automate Your Site

Automating your online business is one of the most important... Read More

The Best Simple Software For The Busy Webmaster

Here are a few programs I can't do without. They're... Read More