; Top 10 Reasons Why CSS is Better than HTML Tables
Learning Center
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Top 10 Reasons Why CSS is Better than HTML Tables


Web Design, HTML tables, how to, Top 10, CSS file, web designers, web pages, search engines, Web Designing, style sheet languages, Top 10 Reasons Why CSS is Better than HTML Tables

More Info
  • pg 1
									Top 10 Reasons Why CSS is Better than HTML Tables
It has long been debated that the use of style sheet languages such as CSS is said to be much more efficient than the use of ordinary HTML tables.
Ever since the growth of the world wide web, professionals of the industry have sought ways on how to improve the presentation of their websites both
efficiently and effectively. Style sheet languages such as CSS have perfected this need and became the universal language for designers and
developers alike. The question is, what are the reasons why CSS is much more useful than the use of HTML tables?

Several advantages has been cited on the use of CSS in web design. Some of those advantages are as follows:

  * Faster loading of pages
  * Efficient and easy
  * Consistency
  * SEO friendly
  * Accessibility
  * Maintainability
  * Usability
  * Sophisticated layouts and designs
  * Bandwidth efficient

Faster Loading of Pages
One common problem of using tables for web layout is the slow loading process. This is usually caused by using too much markup tags in one HTML
file such as "td align", "td width", "bgcolor", "width", "height", "br", "font face", "font color", "cellpadding", "cellspacing", "border", etc along with the
content of the HTML. CSS makes up for this by separating the content of the web page which is text and images into the HTML file and the visual
presentation such as the web design, positioning, and text sizes into a CSS file. In a CSS-based layout, table tags or markups are replaced by using
its own language such as the popular "div". This replacements includes:

  * Instead of the usual table tags such as td align or td width, CSS have replaced this by using "divs".
  * Removed all layout editing markups such as height, width, cellpadding, cellspacing, border, bgcolor, font tags from the HTML. All layouts are found
in the CSS file.
  * header tags such as h1 or h2 are used for font tags headings.
  * Breakline tags (br) is not used.

Because CSS have cut the use of too much markups, websites can load a lot faster than using tables which is good when attracting visitors to a
website. Visit an online Web design Philippines site to learn more about CSS and its use in web design.

Efficient and Easy
As mentioned above, by using CSS, the layout of the HTML is separated from the content thus allowing a quicker, efficient, and easier redesign.
Tables would require more time as the HTML content and layout tags are in the same file. By simply editing the CSS file, designers could easily
rearrange the size or the color of an element found in a website.

In relation with the above statements, web designers can easily redesign the whole website by just editing the CSS file. Unlike the use of table in
which a designer would have to open every HTML file just to edit a simple element found in every page such as a header, CSS can offer an easy way
to edit it all in one CSS file. All it takes is opening the CSS file, edit the elements found in the header (such as width, height, etc), and re-upload it.

SEO Friendly
There are several reasons to this. This reasons are:

  * Because CSS is much faster to load than tables, search engine spiders could easily crawl through the website.
  * Because CSS doesn't require too much markup which makes it easier for search engine spiders to crawl the website.
  * The use of header tags such as h1, h2, or h3 makes it easier for the search engine spiders to determine the information in a website.
  * The use of Javascripts for visual effects are replaced by CSS' own effect engine which makes it more SEO friendly.

Because of the Internet's rapid growth, disability discrimination legislation, and the increasing use of mobile phones and PDAs, it is necessary for Web
content to be made accessible to users operating a wide variety of devices. Tableless Web design considerably improves Web accessibility in this
respect. Screen readers and braille devices have fewer problems with tableless designs because they follow a logical structure.

As a result of the separation of design (CSS) and structure (HTML), it is also possible to provide different layouts for different devices, e.g. handhelds,
mobile phones, etc. It is also possible to specify a different style sheet for print, e.g. to hide or modify the appearance of advertisements or navigation
elements that are irrelevant and a nuisance in the printable version of the page. For more web design and development solutions, then visit an online
Web design Philippines site.

Under table-based layout, the layout is part of the HTML itself. As such, without the aid of template-based visual editors such as HTML editors,
changing the positional layout of elements on a whole site may require a great deal of effort, depending on the amount of repetitive changes required.
Even employing sed or similar global find-and-replace utilities cannot alleviate the problem entirely.

By use of CSS, virtually all of the layout information resides in one place. Because the layout information is centralized, these changes can be made
quickly and globally by default. The HTML files themselves do not, usually, need to be adjusted when making layout changes. If they do, it is usually to
add class-tags to specific markup elements or to change the grouping of various sections with respect to one another.

By combining CSS with the functionality of a Content Management System, a considerable amount of flexibility can be programmed into content
submission forms. This allows a contributor, who may not be familiar or able to understand or edit CSS or HTML code to select the layout of an article
or other page they are submitting on-the-fly, in the same form.

Sophisticated Layouts and Designs
Unlike the use of tables, CSS offers freedom in designing. Because of the rigid, inflexible, and grid based form of tables, designers cannot utilize their
potential in designing. CSS offers absolute positioning of elements paired with the z-index property allows CSS-based designs to position elements on
top of one another (like layers in Photoshop), allowing for more unique, complex, and beautiful layouts.

Bandwidth Efficient
A stylesheet will usually be stored in the browser cache, and can therefore be used on multiple pages without being reloaded, increasing download
speeds and reducing data transfer over a network. Visit a Web design Philippines site to get the solution you needed with your website.

About the Author
Margarette Mcbride is a copywriter of Optimind Web Design and SEO, a web design and seo company in the Philippines. Optimind specializes in
building and promoting websites that are designed for conversion..

Source: http://www.articletrader.com

To top