Why creating tableless sites, and some foundations

Why creating tableless sites, and some foundations Both? S start with the benefits of a tableless layout. These are just so that I have the feeling that they should in a couple of things that are important to other people, as you wrote will.Forces rank well trained CodeYou can not be adequately tableless layout and improper use and not -- - code standard. Well, that let me correct - you can (technically you can), but it defeats the purpose. If you have a tableless design, you should use the standard code. I believe that everything that makes a habit of always writing clean code is a good thing.Faster Loading Time   This is absolutely an advantage of a tableless layout, and for different reasons. First, on a fundamental level - tables to load slowly. In most cases, unless the height and width of the table of elements, the entire text must be loaded and benefits of the table size of the page. Of course, this is what many people is not popular on the tables? T? The fact that they are so easy high. The disadvantage is, how long will load.Okay, so that the solution to that loading time is to take all the values explicitly, right? Now we see another downside. Code clutter that increases loading time. Initially only for himself, tables, a lot of code. How many td open and close tags is your average table based layout? Tonnes. According to all the values explicitly only on the page size and loading time. There are many attempts have been made on this issue that there was a design that has to stop a remake from the Microsoft Web site from one place to a table based layout tableless. The remake showed a 62% reduction in the size of the page, and their average hits per month for the Microsoft website, Microsoft has calculated that the savings would be 924 GIGS of bandwidth per day, and 329 terabytes of bandwidth per year. For each company, which pays for the bandwidth, these things are important.Easier code reading   If you are using standard code, semantic conventions in this document, and tableless layout, the code is so clean that it almost seems as plain text, with some symbols.That is a great advantage, because not only makes it easier for you to update but makes it easier for a non-technical users, small changes. Also, if you are a web developer in greater capacity, it is usual to make a full-time web developers, which in this locality. Clean and easy to read the code that makes it a simple transition. We like when people leave us very easy to understand code, right? Let the retu of favor.Print Alteative Views   If you have a page with the table, it was not in any particular order. Developers who have created the table, on websites, as most of us have at some point - especially if you have in this area before the big tableless movement, which often refer to a printed page. This can be, needless to say, very tiresome.Ease print style is a great benefit with a tableless layout. You can easily create a new style of printing, for all parties, rather than individually. This is just a huge time saver, but there are more.While you can use all elements of this approach, the key is the largest organization of information within the page itself. By example, we assume that the order we want all our pages to help with the following order: The first page, the contents of the neighbor, special messages and then the link and then the footer. Anyway! We want, as usual, if you (the header at the top, links on the left side, content in the middle, news on the right side, and the foot down). With a table-based layout, you need a new page for that particular pressure, because the print style organization to read the columns from left to right. With a table less layout, you are not bound. You can edit the content of your page, but you still want to control and as it seems ... all using only CSS! Moreover, as we are able to make the content of what we want in HTML code, and then move the content blocks to display the site with CSS - we have the most control over presentation.That is very important because the clean code, and the ability to change the presentation, it means that your site can be viewed by clicking on a small screen of a phone, a PDA, in full text format may be ideal for someone with a text-to - speech reader, or a Braille device, and because the code is clean, it is also compatible (with older browsers usually only see the text) and continue with the new technologies to come. The flexibility and the organization can lead to a powerful Web site using some of the possibilities with XHTML, and is used in the support pages for your microarray format, or use of RSS and Atom feeds on your website to a basis of Regular readers.Search Engine Optimization   Due to the fact that its most important content at the top of the page, without affecting the structure, the page can be improved and optimized for search engines. For example, say I have a navigation bar on the left of the page, tons of parts of the site, really great keywords. I did that the code navigation bar at the top of my current HTML, without changing the layout, because I am familiar with the CSS to position the navigation where I want it.Those search engines can also significantly more common words in the document, without having to go through the code of the filter. Search engines priority websites that have a higher content ratio of code, so that all your items in style exteal CSS style sheets, your site based on high for a search engine. Tableless layout as mentioned above, decrease the size and page loading time - another bonus engines.Additionally to seek, to be able to use RSS and Atom feeds (see above) will help you in some of new technologies for the site such as indexing by all search engines called ROR. (ROR is an XML-format summary of your website, like a sitemap, search engines can be used for additional information about your site.) Presentation Flexibility   The changes to a CSS-based tableless layout is simple. You can change the CSS file only, changing the number of styles and graphics as you like. This applies to cascade through all the pages on your site, and the need to update manually many pages.For one of the best known examples show, however powerful they may be, you can use the CSS Zen Garden (link at the end of this article) and navigate through? Choose a theme? Link to see the differences. Each of the different models used exactly the same HTML file content. The only thing that changes is the CSS file for each one.Selling up to standards   Sometimes knowing how to code to standards and create flexible tableless layouts is not enough. There are some web designers who are in difficulty of managing them. Most cases, they are in difficulty the administration has the advantages of using tableless content and CSS driven layout.If standards for you, but you work for a company that is not very future-oriented, so that Time to work on change? Try this: Make them think pocket book. Emphasize the cost savings benefits.For example, try to capture a single page of existing code. Clean them up to standards. Compare the page size (including the optimization of images), and count the difference in bytes saved. Multiply that over the number of pages, and number of days per month. Then explain to them the amount of bandwidth saved monthly if this happens all over the site. If this is not it? T enough to show them how fast you can make changes to a Web site if it is CSS driven, and push the idea that you will be able to display the page faster if it needed updating, and you have more time to add new features to the website - instead of wasting your time doing maintenance.Summary   I hope this little article as a way to begin to understand why the use of a tableless layout, what are the advantages, and you can take a look at Layout Gala (article link below) and invite only 1, or all 40 of the tableless layout examples to get started. However, the best step towards the transition to a tableless design is to move your website slowly toward a standard, first to get rid of tables. To get to this point, study as much on CSS as you can read the article here and elsewhere on the network, and tableless layout table is just a matter of time.Note: See the original, including all 9 photos examples.Links in this article: CSS Zen Garden, the layout Gala.Nicole Heandez is a web developer specializing in web standards and accessibility. Are you the site owner & Style magazine article published on his blog called Beyond Caffeine.