Creating tableless websites - Why and some basics

Let's start with the benefits of a tableless layout. These are just the order in which I feel I should go, some things are more important to other people, it classifies them as you wish.

Force Well-coding formats

You can not have a properly made tableless layout, and uses an inappropriate and non-standard code. Well, correct me that - you can (technically you can do), but it defeats the whole purpose. When you create a tableless design, you should use the standards-compliant code. I believe everything that I make a 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, at a fundamental level - tables load slowly. For the most part, unless you set the height and width of your table elements, all text must be loaded and rendered BEFORE the table size to the same page. Of course, this is what many people care about the tables is not it? The fact that they were so easily significant. The downside is the more time it takes to load.

Okay, so the solution to that load 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 a lot of code. How many opening and closing td tag does not mean the table-based layouts have? Tons. Having to set the values ​​explicitly only adds to the page size and loading time. There are many experiments that have been done on this topic, Stopdesign There was one that did a remake of the site from a Microsoft site tablebased to a tableless layout. This reconstruction showed a 62% file size of the site and their successes using average per month for Microsoft, estimates that Microsoft would have been for 924 gigs of bandwidth a day, 329 terabytes of banda to 'year. For any company that pays for the bandwidth, these things are important.

Easier to read code
If you use the standard code, semantic conventions of the documents, and a tableless layout, the code can be so clean that it almost seems as plain text only, with a few additional symbols.

This is a great advantage, because it not only makes it easier for you to upgrade, but it makes it easier for non-technical user to make small changes. Also, if you work as a freelance web developer as more is normal that there is a full-time web developer who needs to keep that site. Code clean and easy to read that makes an easy transition. We like it when people leave us easily understand the code, right? We return the favor.

Print alternate views
When you create a page using a table-layout, which unfortunately are pretty locked into a certain layout. Developers who have created websites based on tables, like most of us have at some point - especially if you were in the field before the big tableless movement, know that it is often necessary to create a separate version of the printable pages. This can be, needless to say, very boring.

Easy print control style is a huge advantage with a tableless layout. You can easily create a single new printing style that applies to all pages, instead of individually. That alone is a huge time saver, but there's more.

While you can check all the elements with this approach, the key is the largest organization of information within the page itself. Using the example, suppose the display order we want all our pages to print using the following order: The first page header, the next content, the news special after that, the list of links, and then the footer page. But! We still want to appear as usual during the display (ie the header at the top, links on the left, content in the center, the news right and footers at the bottom). With a table-based layout, you should create a new page to make this organization special printing because the print style columns read from left to right. With the table-less layout, which are not bound by this. You can sort the contents of the page as you like, and still control its appearance ... all using CSS only!

Furthermore, since we can put the contents in any way we want in the HTML, and then move the content blocks around to using CSS to display web site - we can have maximum control over the presentation.

This is very important because clean code, and the ability to alter presentation, means that the site can be seen by someone on the screen of a small cell phone, a PDA, in all formats of text can be perfect for someone who uses a text-to-speech reader, or a braille device, and since the code is clean, it is compatible (with older browsers see mostly just text) and forward compatible with new technologies to come. The flexibility and organization leads to being able to create a powerful web site that uses some of the possibilities with XHTML, and adding support for microformats in your pages, 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 the page, without altering the layout, the page can be better optimized for search engines. For example, say I have a navigation bar on the left side of the page that lists tons of parts of the site, which keywords are really great. I could move the navigation bar code higher up in my real HTML, without changing the layout, because I'm using CSS to position the navigation where I want.

These search engines are also common to find words more clearly throughout the document, without having to filter through the code. Search engines prioritize websites that have a higher content ratio of code, so you put all your style elements in your external CSS style sheet makes the site very content according to a search engine. Tableless layout, as mentioned previously, reducing the page size and load time - another bonus for search engines.

Moreover, taking advantage of the RSS / ATOM (see directly above), will help in some new technology to index your site as used by all search engines called ROR. (ROR XML format is a summary of your website, like a map of the site, which search engines have access to more information on your web site.)

Presentation Flexibility
Make changes to a CSS based Tableless layout is simple. You can only edit the CSS file, changing styles and graphics as you want. The cascading effect on all pages of your website, and eliminate the need to manually update many pages.

For one of the best known examples of how powerful can be the presentation, you can visit the CSS Zen Garden (link at end of article) and browse through the 'Select Design' link to see the differences. Each of the different designs uses exactly the same contents as HTML files. The only thing that changes is the CSS file for each of them.

Sell ​​Yourself On Standards
Sometimes able to code for the standard and create flexible tableless layout is not sufficient. There are some web designers encountered difficulties with their management. Very often these problems are rooted in the management being aware of the benefits of using tableless CSS layout and content driven.

If you want to design for standards, but it works for a company that is not very far-sighted in allowing time to work on the changes - try this: try to make them reflect on their notebooks. Emphasize the advantages of cost savings.

For example, try to capture a single page of existing code. Clean standards. Compare the size of the first page (including image optimization), and count the difference in bytes saved. Multiply that by the number of pages, and number of days per month. Then explain to them the amount of monthly bandwidth cost saved if this has been done across the entire site. If this is not enough, show them how quickly you can make changes to a web site once it is CSS driven, and push the idea that you will be able to modify the site more quickly when there are updates required, and will more time to focus on adding new features to the site - instead of spending your time doing maintenance.

Summary
Hopefully this brief article will serve as a way to begin to understand why to use a tableless layout, what are the benefits, and you can easily look at the layout Gala (link below the article) and download only one, or all 40 of the examples of tableless layout to start. However, the best step towards the transition to a tableless design is to move slowly towards your website a version compatible with the standards, before you get rid of the tables. To get to that point the study, both on the CSS, as you can, read the articles here and elsewhere on the web, and moving from table to tableless layout is only a matter of time ....