CSS and tableless design in the web development process

CSS and tableless design – what’s it all about – where’s it’s part in web development process?

Web designers often talk about CSS and tableless designs as two parts of the same concept, making these two terms sound almost like synonyms to each other. It’s not exactly correct, but there is a reason to such perception: the two things are indeed very closely connected. In fact, if HTML tables are not used to control the layouts of web pages, CSS becomes solely responsible for the way those pages look in browsers.

CSS stands for Cascading Style Sheets. It’s a language used to control presentation of an HTML/XHTML documents, as well as documents written in some other formats. It serves to separate semantics from presentation on web pages and makes it very easy to change the look and feel of the whole site, if all styles are stored in a separate .css file and get loaded by all pages. Often it’s enough to change one line of code in that .css file to change the way the main text – or, for example, headings – look throughout the site.

CSS has a simple syntax that can be quickly learned. For example, the code that makes all level-one headings brown looks like this:

h1 {
color:#7F0037;
}

Changing it to the following:

h1 {
color:#001CAD;
}

will make all headings on the website dark-blue.

Opposed to this style of building web pages is the old style, in which layouts are controlled by HTML tables and the look of fonts by deprecated tags. This obsolete style is now discouraged for many reasons, some of which will be given in this article below. So, if your prospective web designers offers you CSS-controlled tableless design, it’s a good sign – you are talking to a professional. The downside is, such designs require more skill and more time and are therefore more expensive. But it’s worth it.

Wikipedia, following World Wide Web Consortium (W3C) and other recognised experts in web design, lists the following reasons to prefer tableless design over table-controlled design: accessibility, bandwidths savings and maintainability. Accessibility is based on the fact that tableless designs are more semantically correct than table-controlled designs; it also means that such designs are friendlier to the search engines, because the search engines use semantics in their algorithms. It doesn’t mean that web pages designed without tables will always outrank table-based websites in the search results, but it will definitely make the engines’ work easier and demonstrate our respect to them.

The main reason why many web designers still hesitate to use tableless designs is that different browsers read CSS differently, and to make a website look equally correctly in all browsers the designer needs to know CSS really well. Internet Explorer 6 is the main culprit, but it doesn’t mean that other browsers are blameless. This is another reason why tableless designs can be more expensive, but web designers accumulate experience as time goes, and this difference gradually vanishes. Tableless designs are no longer as exclusive as they were, for example, in 2005.

Modern browsers improve their support of standards with every newly released version. Internet Explorer 9 announced by Microsoft for release in the nearest future boasts perfect support of every standard related to CSS and tableless design, meaning that in just a few years table-controlled websites will become a thing of the past. Investments made today into a modern, professional tableless website will mean your resource will last longer without a redesign. This, along with disability discrimination legislation, gives prospective site owners more reasons to look towards tableless designs today to save funds tomorrow.

Contact us about your enquiry

Contact Us