Creating Tableless Sites - Why and Some Basics

In a time of web developers who just like to say that 'Tables are Evil' and can't (or won't) explain why, this article will attempt to give you some solid reasons that people create tableless designs. Included are six major benefits of creating tableless sites, and how to sell your desire to alter your website to a resistant manager.

Let's begin with the benefits of a tableless layout. These are only in the order that I feel they should go in, some things are more important to other people, so rank them as you will.

Forces You To Write Well-Formed Code

You cannot have a properly made tableless layout, and use improper and non-standard code. Well, let me correct that - you can (technically you can do it) but it defeats the whole purpose. When you are creating a tableless design, you should be using standards compliant code. I think that anything that makes you get into the habit of always writing clean code is a good thing.

Faster Loading Time This is absolutely a benfit of a tableless layout, and for several reasons. First, on a fundamental level - tables load slowly. For the most part, unless you set the height and width of your table elements, all the text has to be loaded and rendered BEFORE the table sizes itself to the page. Of course, this is what so many people loved about tables isn't it? The fact that they were so easily sizeable. The downside is how much more time they take to load.

Okay, so the solution to that loading time is to set all the values explicitly, right? So now we see another downside. Code clutter that increases loading time. First of all, just by themselves, tables take alot of code. How many td open and close tags does your average table based layout have? Tons. Having to set all the values explicitly only adds to the page size and loading time. There are many experiments that have been done on this topic, I'll point you toward this one that StopDesign did on a remake of the Microsoft website from a tablebased site to a tableless layout. That remake showed a 62% file size reduction of the site, and using their average hits per month for the Microsoft site, calculated that Microsoft would be saving 924 GIGS in bandwidth per day, and 329 Terabytes of bandwidth per year. For any company that pays for bandwidth, these things are important.

Easier to Read Code If you are using standard code, semantic document conventions, and a tableless layout, your code can be so clean that it looks practically like just regular text with a few extra symbols.

That is a great benefit because it not only makes it easier for you to update, but it makes it easier for a non-technical user to make small alterations to. Additionally, if you work as a web developer in a more freelance capacity, it is common for there to be a full-time web developer who has to maintain that site. Clean and simple to read code makes that a easy transition. We like it when people leave us easy to understand code, right? Let's return the favor.

Print Alternate Views When you create a page using a table-layout, you are rather unfortunately locked into a certain layout. Developers who have created table-based websites, as most of us have at some point - particularly if you were in the the industry before the big tableless movement, know that you often have to create a separate printable version of your pages. This can be, needless to say, quite tiresome.

Ease of printing style control is a huge benefit with a tableless layout. You can easily create a single new printing style that applies to all your pages, instead of making them individually. That alone is a huge time saver, but there is more.

While you can control all elements with this approach, the biggest key is organization of information within the page itself. Using the example, let's assume that the display order we want all our pages to print using the following order: The page header first, the content next, the special news after that, then the link list, and then the footer. However! We still want it to display as it would normally when viewing (meaning the header at the top, the links on the left, content in the middle, news on the right, and footer at the bottom). With a table-based layout, you would have to create a new page to do that special printing organization because the print style will read your columns left to right. With a table-less layout, you are not bound by this. You can order the content in your page however you like, and still control the way it looks... all by using the CSS only!

Additionally, because we can put the content in whatever order we want in the HTML, and then move the content blocks around for website viewing using CSS - we can have ultimate control over presentation.

That is very important because the clean code, and ability to alter presentation, means that your site can be viewable by someone on a small mobile phone screen, a PDA, in all text format can be perfect for someone using a text-to-speech reader, or a braille device, and since the code is clean, it is both backward compatible (with older browsers seeing mostly just the text) and forward compatible with new technologies to come. The flexibilty and organization leads to being able to create a powerful website that takes advantage of some of the possibilities with XHTML, and adding in support in your pages for microformats, or taking advantage of using RSS / ATOM feeds from your site to develop a base of regular readers.

Search Engine Optimization Due to the fact that you can organize your most important content at the top of your page, without affecting the layout, your page can be better optimized for search engines. For instance, say that I have a navigation bar on the left side of the page that lists tons of parts of the site that are actually great keywords. I could move that navigation bar code higher up in my actual HTML, without changing the layout, because I'm using the CSS to position the navigation where I want it.

Those search engines can also more clearly find common words throughout your document without having to filter through code. Search engines prioritize websites that have a higher content to code ratio, so putting all your style elements into your external CSS stylesheet makes your site highly content based to a search engine. Tableless layouts, as previously mentioned, decrease page size and loading time - another bonus to search engines.

Additionally, being able to take advantage of the RSS/ATOM feeds (see the section directly above) will aid you in some new technology for site indexing as used by all search engines called ROR. (ROR is an XML format summary of your website, like a sitemap, that search engines can access for additional information about your website.)

Presentation Flexibility Making changes to a CSS based Tableless layout is simple. You can alter the CSS file only, changing as many styles and graphics as you want. The affects cascade through all the pages on your website, and eliminate the need for manually updating many pages.

For one of the best known examples of how powerful presentation can be, you can visit the CSS Zen Garden and navigate through the 'Select a Design' links to see the differences. Each of the different designs uses exactly the same HTML file content. The only thing that changes is the CSS file for each one.

Selling Yourself On Standards Sometimes knowing how to code for standards, and create flexible tableless layouts is not enough. There are some web designers who meet with difficulties from their management. Most often those difficulties are rooted in the management being unaware of the benefits of using tableless content and CSS driven layout.

If you want to design for standards, but you work for a company that is not very forward-thinking in allowing you the time to work on the changes -- try this: Make them think about their pocket-book. Point out the cost saving benefits.

For instance, try grabbing a single page of existing code. Clean it up to standards. Compare the page size to before (including image optimization), and count the difference in bytes saved. Multiply that across the number of site pages, and the number of days per month. Then explain to them the amount of bandwidth cost saved monthly if this was done across the whole site. If that isn't enough, show them how quickly you can make changes to a website once it is CSS driven, and push the idea that you will be able to change the site more rapidly when there are needed updates, and you will have more time to focus on adding in new functionality to the site - instead of spending your time doing maintenance.

Summary Hopefully, this little article will serve as a way to get you started on understanding why to use a tableless layout, what the benefits are, and you can easily take a look at Layout Gala and download just 1, or all 40 of the tableless layout examples to get you started. However, the best step toward moving to a tableless design is to slowly move your website toward a standard compliant version first, before you get rid of the tables. To get to that point, study as much on CSS as you can, read through the articles here and elsewhere on the web, and moving from table layouts to tableless will be just a matter of time.

Thanks to Nicole Hernandez, is a web developer with a specialty in web standards and accessibility. She is the owner of Website Style

What is The Concept Behind CSS?

The concept behind CSS (a.k.a. cascading style sheets or style sheets) is really simple. CSS allows you to make changes to all of the web pages that link to the CSS file at once by changing a style in the style sheet, instead of having to manually change every style in every HTML file.

CSS allows you to create a single document of code, similar to an HTML file, that lets you specify the colors, fonts, backgrounds, etc. of a web page. The CSS file is then linked to from the web page(s) that you want to have the same styles that you specify.

If CSS did this and only this, they would save you a lot of time to say the least, especially if you have a large or multiple web sites. This alone is worth learning CSS, however, style sheets allow you to do this and much more.

CSS also allows you to:

• position text and graphics precisely where you want to
• add rollover effects to links
• control the spacing between letters, lines, margins, web page borders
• specify the units such as centimeters, pixels, points and more
• hide content from certain web browsers in certain situations. An example of this is when you have some content that you want to appear only in your web pages, but not in print.

In the end, CSS can save you a lot of time and effort and is very easy to learn.

The Low Down on Cascading Style Sheets

CSS has been around for more than 10 years already beginning in its development in 1997 but it seems it has been in the public consciousness for only a relatively short time. The reason for this is because it wasn't until the year 2000 that many web browsers began using the capabilities of CSS beyond its more basic color and font characteristics. Of course things are way different now and virtually all modern day browsers feature support for all CSS Level 1 aspects, many aspects of CSS Level 2 and some web browsers have even gone beyond that to support some of the capabilities of CSS Level 3.

Indeed, it is rarely that you find a web site nowadays that does not utilize some form of CSS in their design and development. For better or worse, web sites that rely solely on HTML are quickly going the way of the dinosaur. May industry pundits as well as end users have even gone so far as to consider a thorough knowledge of CSS as being far more necessary than a thorough knowledge of HTML. While in truth they are both equally important and will continue to be an important facet of the web for many years to come, there is no denying the widespread impact that CSS has brought upon the World Wide Web.

CSS was originally developed as a means by which web developers could define both the look and the feel of their web pages. With its inception, web designers were now able to treat content and design as two separate entities, thereby allowing HTML to function more in accord with its intended purpose, which was to focus on the markup of a particular web site's content and leaving the responsibility of the design and layout to CSS.

The term CSS itself is an abbreviation for Cascading Style Sheet. The style sheet in this particular instance refers to the document itself. The concept of style sheets itself is nothing new; designers have used them in their documents for many years. Strictly speaking, style sheets are the set of technical specifications that govern a particular layout, whether it is online or on print. The purpose of these of course is to ensure that any subsequent designs will conform to the predetermined specifications upon printing.

This concept can be translated easily enough to the World Wide Web only in this particular case, Cascading Style Sheets not only determine the technical specifications of a particular document on the web but also has the added function of communicating to the viewing vehicle (in this case the web browser that the end user is using to surf the Internet) exactly how the document that is being viewed is to be rendered.

One of the most important things to remember in all of this is the key word Cascade. Much like a stream of water running of a cliff or elevated area comes into direct contact with the rocks and soil that line the full course of the incline, yet is ultimately only affected in terms of its final destination by the land elements at the end of the slope, Cascading Style Sheets by their very nature flows or cascades through any number of separate style sheets. To follow the stream of water analogy even further, the appearance of a particular web site is ultimately dependent upon the user agent style sheet, which in many cases is the default style that the Web browser will utilize in the task of displaying a particular web page in the absence of any other set of instructions.

Of course more often than not, a web designer will probably provide any number of his own instructions that are embedded in the web page in question. The Cascading Style Sheet in this particular scenario will be tasked with dictating to the web browser which particular set of instructions will have top priority. The most commonly seen usage of this is in the fonts that are used for a web site. Even if your web browser is set to display web pages in a specific font and type size, say Arial narrow 10 points, the font size and family that is specified in the Cascading Style Sheet will take precedence overriding the default values that have been set in your browser.

Cascading Style Sheet go far beyond font specifications however into the areas of XHTML and XML markup. This means that Cascading Style Sheets could be used to define the look of any XHTML and XML markup that you use in your web site.

Clearly Cascading Style Sheets are one of the most powerful tools that any web designer can have in his or her arsenal and they can have a tremendous impact on the whole look and feel of a web site. If you are at all interested in becoming a professional web designer, a thorough knowledge of Cascading Style Sheets is crucial.

Thanks to Mikhail Tuknov is a search engine optimization specialist providing web site search engine optimization (SEO), pay per click (PPC) management and web analytics services.