Reasons and principles for creating a non-tabular site translation _ Experience Exchange

In a time of the Web developers who just like to say that ' Tables is Evil ' and can ' t (or won ' t) explain why, this article wil L attempt to give-some solid reasons that people create tableless designs. Included is six major benefits of creating tableless sites, and how to sell your desire to alter your website to a resist Ant Manager.
For a time, web designers are saying: The table is the devil! But they are not able to tell the reason. So here, I'll give you some convincing reasons why people don't want to use tables to create Web pages. These include four benefits of creating a web-free site, and how to turn the site into an enduring "ruler" and sell it.
Let's begin with the benefits of a tableless layout. These is only in the order that I feel they should go in, some things is more important to other people, so rank them as You'll.
Let's start with the benefits of table layout. It was listed because he was vital to a lot of people.
Forces you to Write well-formed Code
Forcing you to write code that is in strict format
You cannot has a properly made tableless layout, and use improper and non-standard code. Well, let me correct that-you can (technically-can do it) but it defeats the whole purpose. When you were creating a tableless design, you should be using standards compliant code. I think that anything this makes you get into the habit of always writing clean code is a good thing.
You cannot use inappropriate or nonstandard code to make a layout without a table. Let me make a correction--you can (technically), but doing so will frustrate all goals. When you do a no-table design, you must use a set of appropriate, standard code. I think all the things that make you a good programming habit are good things.
Faster Loading Time
Faster Downloads
This was absolutely a benfit of a tableless layout, and for several reasons. First, on a fundamental level-tables load slowly. For the more, unless you set the height and width of your table elements, all the text have to be loaded and rendered Before the table sizes itself to the page. Of course, this is the so-many people loved about tables isn ' t it? The fact that they were so easily sizeable. The downside is what much more time they take to load.
No table layout is very good, including the following reasons: 1, from the basic principle, the use of table layout will slow down the download speed; More importantly, regardless of how you set the height and width of the table elements, all the elements in the table will be loaded before the table is loaded, which is probably why many people are keen on table layout! In fact, tables are generally large in size, so they load longer. We can't ignore its download time.
Okay, so the solution to that loading time are to set all the values explicitly, right? So, we see another downside. Code clutter that increases loading time. First of all, just by themselves, tables take a lot of code. How many TD open and close tags does your average table based layout has? Tons. Have to set all the values explicitly only adds to the page size and loading time. There is many experiments that has been done on the this topic, I'll point to you toward this one then stopdesign did on a Rema Ke of the Microsoft website from a tablebased site to a tableless layout. That is remake showed a 62% file size reduction of the site, and using their average hits per month for the Microsoft site, c Alculated that Microsoft would is saving 924 GIGS in bandwidth per day, and 329 terabytes of bandwidth per year. For all company, the pays for bandwidth, these things is important.
Therefore, we must set all the values clearly, thus reducing the time to download. Let's look at the other drawbacks: the clutter in the code increases the load time. First of all, the table itself contains a lot of code, you can count to see that it contains a few "TD" Start and end tags, I think it should be a lot of it. In order to set them up clearly, you must increase the size of your Web page to allow for longer download times. We have done many experiments on this subject. Try not to use the table layout again, look at the Microsoft approach, they used to use the table layout has started using non-tabular layout. Research shows that this approach saves the site 62% of space, and by averaging monthly CTR, Microsoft will save 924 gigs bandwidth per day, saving 329Terabytes of bandwidth a year. This is necessary for any company with a large bandwidth footprint.
Easier to Read Code
Increase the readability of your code
If you is using standard Code, semantic document conventions, and a tableless layout, your code can is so clean that it l Ooks practically like just regular text with a few extra symbols.
If you are using standard code, standard semantic documents, and non-tabular layouts, your code will look very clear, just like a idiomatic text with some special symbols.
That's a great benefit because it's not the only makes it easier for your 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's common for there to BES a full-time web de Veloper who had to maintain that site. Clean and simple to read code makes, a easy transition. We like it when people leave us easy to understand code, right? Let ' s return the favor.
The benefit of using non-tabular layouts is not only to make it easier for you to update your Web pages, but also to allow non-displaced people to modify and transform them in a subtle way. In addition, if you are a freelance web designer, you can also let professional Web designers remember your website. The simplicity of the code makes it very easy to convert your code. We all want the code developers to leave a simple code for us, so when we write the code, consider that as well.
Print Alternate views
Convenient style definition
When you create a page using a table-layout, you is rather unfortunately locked into a certain layout. Developers who has created table-based websites, as most of us has at some point-particularly if you were in the the I Ndustry before the big tableless movement, know that you often has to create a separate printable version of your pages. This can is, needless to say, quite tiresome.
When we create a Web page using a table layout, you should not be stuck with a particular layout method. Developers using table layouts, like most of us, have to be aware that if you are working on a design before the "web design is not tabular" campaign, you must create a separate style for each page, which is tedious.
Ease of printing style control is a huge benefit with a tableless layout. You can easily create a single new printing style This applies to all your pages, instead of making them individually. That alone was a huge time saver, but there was more.
The simple output style control is a great advantage of the non-table layout. You can easily create a new, simple layout and apply it to all pages without having to design a set of styles for each page. This will undoubtedly save a great deal of time.
While you can control all elements with this approach, the biggest key is organization of information within the page Itse Lf. 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 this, then the link list, and then the footer. however! We still want it to display as it would normally if viewing (meaning the header at the top, the links on the left, conte NT in the middle, news on the right, and footer at the bottom). With a table-based layout, you would has to create a new page to does that special printing organization because the print Style would read your columns left to right. With a table-less layout, your is not bound by this. You can order the content in your page however your like, and still control the the-the-it looks ... all by using the CSS only!
When you use this method to control all elements, one of the first things to consider is how to organize all the information in the page itself effectively. Let's imagine the following sort: First the top of the page, then the content, then the specific news message and link list, and finally the footer. However, we still want it to be displayed according to our normal browsing habits (that is, the top of the page; the link list is left in the middle; the content is in the middle; The news is in the middle right; the footer is at the bottom). If you use a table layout, then you must recreate a page because the table reads from left to right, but if you use a table-less layout, you will not be bound by this form. You can position the content as you want and control it well. And just use CSS to achieve the above purposes.
Additionally, because we can put the content in whatever order we want in the HTML, and then move the content blocks Aroun D for website viewing using Css-we can has ultimate control over presentation.
Also, because we can use CSS to place all or part of the content anywhere on the HTML page, we can control the way it behaves.
That's very important because the clean code, and ability to alter presentation, means this your site can be viewable by Someone on a small mobile phone screen. The flexibilty and organization leads to being able to create a powerful website that takes advantage of some of the Possi Bilities with XHTML.
Because the simplification of the code is so important, it can control the expression and location of the content, so even on a mobile phone screen, you can easily display your page. We can use the extensibility and organization of XHTML to create good websites.
Search Engine Optimization
Search Engine Optimization
Due to the fact so can organize your most important content at the top of the your page, without affecting the layout, Y Our page can is better optimized for search engines. For instance, say that I had a navigation bar on the left side of the page that lists tons of parts of the the site that is 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.
Because you can use the non-table layout to put the most important content at the top of the page, and this does not affect the entire layout, then your page can maximize the execution of search engine optimization. For example, I placed a navigation bar on the left side of the page, which wrote some keywords with very high interest rates. So I can write the navigation bar code before the HTML code without affecting the entire page layout. Because I am using CSS to adjust its position.
Those search engines can also more clearly find common words throughout your document without have to filter through cod E. Search engines prioritize websites that has a higher content to code ratio, so putting all your style elements into yo ur 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.
Search engines do not need to filter the code to find generic keywords that will be the entire document. The search engine searches for pages that have a larger proportion of the content, so put the style elements in an external style sheet so that the content can be highlighted. The no-table layout mentioned above significantly reduces page size and download time, and allows for greater use of search engines.
Presentation flexibility
Full adaptability
Making changes to a CSS based tableless layout are simple. You can alter the CSS file only, changing as many styles and graphics as you want. The affects cascade through all the pages in your website, and eliminate the need for manually updating many pages.
The non-table layout based on CSS is a very simple method. You can change the style and picture you want by changing the CSS file. Using cascading style sheets throughout your site can reduce the amount of daily page updates.
For one's known examples of how powerful presentation can is, you can visit the CSS Zen Garden and navigate thro Ugh 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 are the CSS file for each one.
You can visit the famous website: CSS Zen Garden, which is a classic on the entire page layout. You can view different layout styles by clicking "Select a Design" on the navigation bar. Each of the different design styles uses exactly the same HTML content. It changes the content of HTML only by using different CSS.
Selling yourself on standards
Use different standards to promote yourself.
Sometimes knowing how to code for standards, and create flexible tableless layouts are not enough. There is some web designers who meet with difficulties from their management. Most often those difficulties is rooted in the management being unaware of the benefits of using tableless content and CS S driven layout.
Here's the point: Using standard code, it's not enough to create an extensible, no-table layout. Some web designers still encounter a lot of site management difficulties. In most cases, this is due to ignoring the contents of the table-free layout and the way the CSS is laid out.
If you are want to design for standards, but do work for a company, which 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 of the cost saving benefits.
If you want to standardize the design, but your company is not allowed to do so, because it may delay time. So you can do this: record them in a pocket notebook and point out where you can save money.
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 is done across the whole site. If that isn ' t enough, show them how quickly can make changes to a website once it's CSS driven, and push the idea tha T you'll be able to change the site more rapidly when there is needed updates, and you'll have more time to focus on Adding in new functionality to the site-instead of spending your time doing maintenance.
As an example, crawl the existing code page as much as possible and rewrite the code in a concise standard code format. Then, compare the size differences between the two pages (including the optimization of the picture) and calculate the difference in size. Then, explain how much bandwidth costs can be saved per month If you follow the new layout. If this is not enough, you can specify how much download speed will be increased if you use CSS layouts, and how much time you can save when updating the page. In this way, you can save time to improve the functionality of your site-saving you time for most maintenance.
Summary
Summarize
Hopefully, this little article would serve as a a-from-get-you-started on-Understanding why-use-a tableless layout, what The benefits is, and you can easily take a look at Layout Gala and download just 1, or all of the tableless Layout ex Amples to get started. However, the best step toward moving to a tableless design are to slowly move your website toward a standard compliant vers Ion first, before you get rid of the tables. To study as much on CSS as can, read through the articles here and elsewhere on the web, and moving From table layouts to tableless would be just a matter of time.
The purpose of this article is to make it possible to use the uncertainty of the layout without a table, and begin to use this method of layout. Here's a short cut, you can download a ready-made 40 template case to layout directly on the Layout Gala website. Before you give up the use of the form, you should try to slow down the process of the website without the table. You should be fully learning CSS technology, after reading this article and other related articles on the site, you make no table layout of the site is only a matter of time.

