Using CCS to Eliminate Tables 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 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.
About the Author
Sanjay Johari contributes articles regularly to various ezines. His website
contains information, articles, Subscriptions, 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
|
