Differences using CSS Against Tables

The majority of websites that can be found in the net are built using "Tables" again an outdated method of building sites. The code equivalent against using CSS is awesome. Through our own experience(s) a site that uses tables for design layout and content presentation will always trail behind a site that uses standards conform CSS coding.
The amount of code that goes into presenting a website to the end user using tables is extensively time consuming and the amount of incorrect coding that goes on is immense. The majority of table based websites don't even use the tables as well as they could or should be. It is easy to build a site using tables but building a site that uses tables properly seems to be a hard task. Using accessible coding to create or build a site is easy, the tags are there to be used but the main stream designers dont seem to grasp the need for accessible websites.
Comparing the amount of (X)HTML code when using tables to CSS coded sites you will find that the ratio is way to high. The performance of a site that uses CSS is generally a lot better. lowering the amount of code in the documents increases download speeds and gives the end user a better impression.

Website Design | Website Design Company | Web Development Get a beautiful website design. Studio Web is a results oriented web design & online marketing firm serving companies worldwide.

Sponsored Link

Setting up the style sheet

Now that we have told the HTML file where to find the stylesheet we have to set out our default styling. All elements have default settings which are set by the individual browser style sheets.

Everyone who uses CSS have their own method of setting CSS defaults. The following method is a recognised method created by Eric Meyer.

To override the defaults we set up our stylesheet with the following CSS code:
Click for CSS Code
Open or Close Box
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

/* remember to define focus styles! */
:focus{
outline:0;
}

body{
line-height:1;
color: black;
background:white;
}

ol, ul{
list-style:none;
}

/* tables still need 'cellspacing="0"' in the markup */
table{
border-collapse:separate;
border-spacing:0;
}

caption, th, td{
text-align: left;
font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after{
content: "";
}

blockquote, q{
quotes: "" "";
}

Read more about setting or overriding UA default styling

Now that the initial values and sources have been configured we can go onto programming our project.

20% TemplateMonster Discount on White Website Templates Read more about Template Monster Blog - Part 8 by blog.templatemonster.com

Well, now to mark the arrival of the Christmas season TemplateMonster brings more festive attractions to its web audience and unveils a new promo that starting December 21st 2010 and up until January 1st 2011 will ensure 20% discount on each and every snow white website design from our brand new White Templates category. As you may see, those white themes from our richest collection combine clean backgrounds, subtle color-schemes, well-spaced typography, and tasteful detail-rich design touches to lend an uncluttered and clear aspect to your future website and create an easy to navigate, usable interfaces. Fitting a lot of web content into a simple clean design, our White Templates are for sure the easiest way to make an effective overhaul of your website adding at the same time to the comfort of the visitors, while clean white background, being fully integrated into all parts of the design, make everything very readable and simple to be perceived.

Read more about Template Monster Blog - Part 8 by blog.templatemonster.comwebsite design