CSS Vs HTML TABLE

Introduction

Nowadays creating a web site is not too hard because the use of style sheet languages such as CSS is said to be much more efficient than the use of ordinary HTML tables. CSS provides many advantages to developers than HTML. Web Designers that don't use CSS for their design and development of Web sites are rapidly becoming a thing of the past. HTML should focus on what the document means rather than what it looks like. Most importantly, this style of authoring respects users' preferences.

CSS

CSS stands for Cascading Styles Sheets. CSS is a style language that defines a layout of HTML documents. The styles define how to display HTML elements, as they are added to HTML to solve a problem. While creating a web site the external style sheets are stored in CSS files that save a lot of work.

The primary purpose of Cascading Style Sheets is to separate the content of a webpage from its layout, therefore facilitating an easy method of adapting the page's content to the device on which it is displayed. As it is much more flexible than a table, CSS is a natural companion to XHTML in defining the appearance of modern webpages. Like HTML, CSS has different version numbers, called levels. CSS 1 was the first version of the standard; it is the most specified method for defining markup that was otherwise possible in HTML, such as text fonts, color, and size, as well as basic object positioning and identification.

Cascade is the special part. A Web style sheet is intended to cascade through a series of style sheets, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow. The same is true of the cascade in Web style sheets. Every Web page is affected by at least one style sheet, even if the Web designer doesn't apply any styles.

WHY CSS?

CSS lets you output to multiple formats quickly.
By editing a single CSS file, you can make sitewide design changes in seconds.
CSS lets you use logical names for page elements.
The practical use of CSS encourages proper HTML structure, which will improve accessibility and search engine placement.
CSS eliminates the need for messy code -- namely font tags, spacer GIFs and nested tables.

Let's discuss the benefits of CSS in Detail:

Benefits of CSS

Faster page loads
Efficient and easy
Better for SEO
Increased usability
Accessibility
Lowered hosting costs
Redesigns are less expensive
Maintainability
Quick website update
No spacer GIFs

FASTER LOADING PAGE

While using HTML tables for web layout we face one common problem of a slow-loading process usually caused by using too many markup tags in one file such as "td align", "td width", "bgcolor", "width", "height" etc.. The biggest drawback with tables is that both the content (text, images) and visual information (layout, positioning, etc..) are contained within the same HTML, PHP, or ASP file. Migrating from a table-based layout to a CSS-based layout is the fact that the content is stored within the HTML, PHP or ASP file and the visual information is stored within a CSS file(s).

EFFICIENT AND EASY

If we use tables then table-based designs mix visual data with content. By using CSS, the layout of the HTML is separated from the content thus allowing a quicker, efficient, and easier redesign and a web designer is also able to easily make changes to the appearance of a single page (or multiple pages) by simply editing the external CSS style sheet

BETTER FOR SEO

SEO stands for Search Engine Optimization and as we know that CSS is faster than HTML tables to load and don't require too much markup it is easier for the search engine spiders to easily crawl through the website. No more JavaScript rollover effects. CSS allows the designer to program a variety of rollover effects (images, text decorations, etc..) that are defined within the CSS style sheet. This method allows the Search Engine Spiders to focus more on your website's content rather than unnecessary JavaScript markup.

INCREASED USABILITY

Usability refers to the ease in which people are able to navigate, interact, and browse a website. Without strong usability, a website is destined to fail. Although there are a number of reasons why usability is better with CSS than with tables, we are just going to mention a few for the sake of time. 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.

ACCESSIBILITY

As we all know that the internet is growing rapidly 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. Accessibility is a general term used to describe the degree to which a product (e.g., device, service, environment) is accessible by as many people as possible.

LOWERED HOSTING COST

Each person who opts to pay a hosting company to host their website must choose a hosting plan. Some hosting providers have payment plans for their customers that are based on the amount of bandwidth that is used each month. Bandwidth is the amount of traffic that is permitted to occur between your website and the rest of the Internet.

REDESIGN IS LESS EXPENSIVE

The redesign of a website is normally said to be expensive but CSS can make it easy. It is both time and money-saving. If you're paying someone by the hour, then you will find yourself paying less if the designer is redesigning your website using CSS (simply because it shouldn't take them as long compared to redesigning a website using tables). So just say "NO" to table-based designs. The styling and layout are separate from the text, so you do not have to redo everything. You can also switch out the style sheet and graphics, and presto, new site. Finally, since your web site meets current standards you will be able to easily find people to work on your site at a reasonable price.

MAINTAINABILITY

The layout is part of the HTML itself under the table-based layout. So, 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 number of repetitive changes required. Even employing sed or similar global find-and-replace utilities cannot alleviate the problem entirely.

QUICK WEBSITE UPDATE

If you value your time, why would you want to open and edit every single document that contains the element which you want to update within your website? Perhaps you have a fetish for opening multiple website documents. If you want to change the fontsize, familysite, line height, bullet-image, and letter-spacing of every single list element contained within your website, now simply open your external CSS file, find the "li" (list) selector, and add, edit, or delete properties with whatever values you so choose. Save the changes, upload the file.

NO SPACER GIFS

The first thing that comes in our mind is what are these Spacer GIFs?

So the answer is: a transparent image, often used to control blank space within a web page, that can be resized according to the width and height dimensions it is given. Spacer GIFs are not browser-specific. The reason a spacer GIF is invisible is so that an HTML developer can create a table cell and fill the background with a specific color that can be viewed through the transparent spacer GIF.

Although it served a purpose prior to CSS, spacer GIFs are no longer necessary. Background colors can now be defined by using the "background" property in CSS. Spacer GIFs bloat up a web page by adding additional junk markup to the already enormous volume of junk markup found within table-based layouts. Other than that, there isn't much else to say about spacer GIFs. Don't use them. Just say "NO" to table-based designs.