Design Your Imagination by Webguru India - HTML preview

PLEASE NOTE: This is an HTML preview only and some elements such as links or page numbers may be incorrect.
Download the book in PDF, ePub, Kindle for a complete version.

CSS versus tables for layout design

In web designing both Cascading Style Sheet (CSS) and table based layouts are used. But there exists a dichotomy regarding which of the methods of designing is better. There is a group of web designers who tend to support and use the table based designs. There is another group who insists upon CSS. Table based layout is an older version of web design. CSS combined with XHTML makes a visual layout of a web site. CSS based layouts are considered better than table layouts by many web designers.

One of the basic differences of CSS and table is that in table layouts the content is not separated from visual data, while in case of CSS, both are separated. Thus a web designer finds it easier and more convenient to design pages using Cascading Style Sheets.

There are a number of reasons why CSS is considered superior to table layouts for web design. Some of them are discussed here:

  • Time for Loading a Web Page: The web sites with table based layouts take longer time to load than CSS based layouts. Generally a table based layout takes about two to four times than CSS layouts to load. Therefore using table based layouts for a web page is more time consuming for a user. So it is better to use CSS web design as an impatient net user can shift from the site that takes him longer time. For CSS Spacer GIFs are not required to be used as is in the practice with table layouts. The Spacer GIFs increase the amount of junk markup and delay loading of a web page.
  • Redesigning Web sites: It takes much longer time to redesign a web site with table based layouts. Since in CSS the content and the visual data can be kept separated, it helps the web designer to work fast and with ease compared to table layouts. Thus in a web page changes can be easily made with CSS.
  • Cost Effective for Redesigning Sites: Using CSS for redesigning is not only more efficient than tables but also cost effective. If the web designers are paid by working hours then using CSS will save both money and time.
  • Cost of Hosting Web Sites: Using CSS layouts for web sites will take lesser time to load compared to sites using tables. The memory of file sizes used for CSS is also smaller when compared to those files saved while working with tables. The reduction in file size while using CSS is a great advantage. While hosting a web site a number of plans are provided. Most of the web hosting companies charge according the usage of bandwidth. So if a web site consists of only table layouts then incase of extra bandwidth usage, one has to pay more or a web site might be shut down until more bandwidth is purchased.
  • Visual Consistency: A visual consistency can be kept all over the web site when it is designed with CSS. In case of table layouts for web pages, a web designer has to edit code for individual pages and also adjust other features to give the pages a consistent look. But with CSS it has become quite easier for a web designer to gain control over the elements of the web pages.
  • Quick Updates on Web Sites: With use of CSS, a web site can be easily updated. This is a big advantage of using CSS than table layouts. It saves time and alterations can be done very quickly.
  • Aids in SEO for Web sites: CSS are more effective for Search Engine Optimization (SEO). It is necessary to increase the volume as well as quality of traffic to a web site by using SEO processes. Using CSS for web designs ensures lesser junk markup and smaller file sizes of contents on web pages. The search engine spiders take lesser time to crawl web sites with CSS compared to those with tables.
  • Usability of Web Sites: With the use of CSS the usability of any web site increases. The usability of a web site is considered when the users find it easy to navigate through the pages of the site and even interact. A CSS web design is helpful to increase the usability as the style sheets are printer friendly and the pages can be downloaded very fast.

Using CSS for a web site has other advantages too when compared to table layout designs. CSS supports multi-medium. It supports screen readers, web browsers and assistance required while accessing personal data. It separates visual data from content which is not possible in case of table designs. In a CSS designed web site, one can use interactive elements. Using CSS also enables better and convenient handling of projects by teams. Use of CSS based layouts also gives creative freedom to web designers.