| Let's begin with the benefits of a tableless layout. | | | | someone using a text-to-speech reader, or a braille |
| These are only in the order that I feel they should | | | | device, and since the code is clean, it is both |
| go in, some things are more important to other | | | | backward compatible (with older browsers seeing |
| people, so rank them as you will. | | | | mostly just the text) and forward compatible with |
| Forces You To Write Well-Formed Code | | | | new technologies to come. The flexibilty and |
| You cannot have a properly made tableless layout, | | | | organization leads to being able to create a powerful |
| and use improper and non-standard code. Well, let me | | | | website that takes advantage of some of the |
| correct that - you can (technically you can do it) but | | | | possibilities with XHTML, and adding in support in your |
| it defeats the whole purpose. When you are creating | | | | pages for microformats, or taking advantage of using |
| a tableless design, you should be using standards | | | | RSS / ATOM feeds from your site to develop a |
| compliant code. I think that anything that makes you | | | | base of regular readers. |
| get into the habit of always writing clean code is a | | | | Search Engine Optimization |
| good thing. | | | | Due to the fact that you can organize your most |
| Faster Loading Time | | | | important content at the top of your page, without |
| This is absolutely a benfit of a tableless layout, and | | | | affecting the layout, your page can be better |
| for several reasons. First, on a fundamental level - | | | | optimized for search engines. For instance, say that I |
| tables load slowly. For the most part, unless you set | | | | have a navigation bar on the left side of the page |
| the height and width of your table elements, all the | | | | that lists tons of parts of the site that are actually |
| text has to be loaded and rendered BEFORE the | | | | great keywords. I could move that navigation bar |
| table sizes itself to the page. Of course, this is what | | | | code higher up in my actual HTML, without changing |
| so many people loved about tables isn't it? The fact | | | | the layout, because I'm using the CSS to position the |
| that they were so easily sizeable. The downside is | | | | navigation where I want it. |
| how much more time they take to load. | | | | Those search engines can also more clearly find |
| Okay, so the solution to that loading time is to set all | | | | common words throughout your document without |
| the values explicitly, right? So now we see another | | | | having to filter through code. Search engines prioritize |
| downside. Code clutter that increases loading time. | | | | websites that have a higher content to code ratio, |
| First of all, just by themselves, tables take alot of | | | | so putting all your style elements into your external |
| code. How many td open and close tags does your | | | | CSS stylesheet makes your site highly content based |
| average table based layout have? Tons. Having to | | | | to a search engine. Tableless layouts, as previously |
| set all the values explicitly only adds to the page size | | | | mentioned, decrease page size and loading time - |
| and loading time. There are many experiments that | | | | another bonus to search engines. |
| have been done on this topic, There was one that | | | | Additionally, being able to take advantage of the RSS |
| StopDesign did on a remake of the Microsoft | | | | ATOM feeds (see the section directly above) will aid |
| website from a tablebased site to a tableless layout. | | | | you in some new technology for site indexing as |
| That remake showed a 62% file size reduction of | | | | used by all search engines called ROR. (ROR is an |
| the site, and using their average hits per month for | | | | XML format summary of your website, like a |
| the Microsoft site, calculated that Microsoft would be | | | | sitemap, that search engines can access for additional |
| saving 924 GIGS in bandwidth per day, and 329 | | | | information about your website.) |
| Terabytes of bandwidth per year. For any company | | | | Presentation Flexibility |
| that pays for bandwidth, these things are important. | | | | Making changes to a CSS based Tableless layout is |
| Easier to Read Code | | | | simple. You can alter the CSS file only, changing as |
| If you are using standard code, semantic document | | | | many styles and graphics as you want. The affects |
| conventions, and a tableless layout, your code can be | | | | cascade through all the pages on your website, and |
| so clean that it looks practically like just regular text | | | | eliminate the need for manually updating many pages. |
| with a few extra symbols. | | | | For one of the best known examples of how |
| That is a great benefit because it not only makes it | | | | powerful presentation can be, you can visit the CSS |
| easier for you to update, but it makes it easier for a | | | | Zen Garden (link at the end of article) and navigate |
| non-technical user to make small alterations to. | | | | through the 'Select a Design' links to see the |
| Additionally, if you work as a web developer in a | | | | differences. Each of the different designs uses |
| more freelance capacity, it is common for there to | | | | exactly the same HTML file content. The only thing |
| be a full-time web developer who has to maintain | | | | that changes is the CSS file for each one. |
| that site. Clean and simple to read code makes that a | | | | Selling Yourself On Standards |
| easy transition. We like it when people leave us easy | | | | Sometimes knowing how to code for standards, and |
| to understand code, right? Let's return the favor. | | | | create flexible tableless layouts is not enough. There |
| Print Alternate Views | | | | are some web designers who meet with difficulties |
| When you create a page using a table-layout, you | | | | from their management. Most often those difficulties |
| are rather unfortunately locked into a certain layout. | | | | are rooted in the management being unaware of the |
| Developers who have created table-based websites, | | | | benefits of using tableless content and CSS driven |
| as most of us have at some point - particularly if you | | | | layout. |
| were in the the industry before the big tableless | | | | If you want to design for standards, but you work |
| movement, know that you often have to create a | | | | for a company that is not very forward-thinking in |
| separate printable version of your pages. This can be, | | | | allowing you the time to work on the changes -- try |
| needless to say, quite tiresome. | | | | this: Make them think about their pocket-book. Point |
| Ease of printing style control is a huge benefit with a | | | | out the cost saving benefits. |
| tableless layout. You can easily create a single new | | | | For instance, try grabbing a single page of existing |
| printing style that applies to all your pages, instead of | | | | code. Clean it up to standards. Compare the page |
| making them individually. That alone is a huge time | | | | size to before (including image optimization), and |
| saver, but there is more. | | | | count the difference in bytes saved. Multiply that |
| While you can control all elements with this approach, | | | | across the number of site pages, and the number of |
| the biggest key is organization of information within | | | | days per month. Then explain to them the amount of |
| the page itself. Using the example, let's assume that | | | | bandwidth cost saved monthly if this was done |
| the display order we want all our pages to print using | | | | across the whole site. If that isn't enough, show |
| the following order: The page header first, the | | | | them how quickly you can make changes to a |
| content next, the special news after that, then the | | | | website once it is CSS driven, and push the idea that |
| link list, and then the footer. However! We still want it | | | | you will be able to change the site more rapidly when |
| to display as it would normally when viewing (meaning | | | | there are needed updates, and you will have more |
| the header at the top, the links on the left, content | | | | time to focus on adding in new functionality to the |
| in the middle, news on the right, and footer at the | | | | site - instead of spending your time doing |
| bottom). With a table-based layout, you would have | | | | maintenance. |
| to create a new page to do that special printing | | | | Summary |
| organization because the print style will read your | | | | Hopefully, this little article will serve as a way to get |
| columns left to right. With a table-less layout, you are | | | | you started on understanding why to use a tableless |
| not bound by this. You can order the content in your | | | | layout, what the benefits are, and you can easily |
| page however you like, and still control the way it | | | | take a look at Layout Gala (link below article) and |
| looks... all by using the CSS only! | | | | download just 1, or all 40 of the tableless layout |
| Additionally, because we can put the content in | | | | examples to get you started. However, the best |
| whatever order we want in the HTML, and then | | | | step toward moving to a tableless design is to slowly |
| move the content blocks around for website viewing | | | | move your website toward a standard compliant |
| using CSS - we can have ultimate control over | | | | version first, before you get rid of the tables. To get |
| presentation. | | | | to that point, study as much on CSS as you can, |
| That is very important because the clean code, and | | | | read through the articles here and elsewhere on the |
| ability to alter presentation, means that your site can | | | | web, and moving from table layouts to tableless will |
| be viewable by someone on a small mobile phone | | | | be just a matter of time. |
| screen, a PDA, in all text format can be perfect for | | | | |