Reasons and Principles for Creating a Table-Free Website Translation_Experience Exchange

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.
For a time, web designers were saying: Tables are the devil! But they couldn't tell why. Well here I will give you some convincing reasons why people are reluctant to use tables to create web pages. Included are four benefits of creating a form-free website, as well as how to transform your website into a lasting "domerator" and market it.
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.
Let's start with Let’s start with the benefits of table layout. It's included here because it's vital to so many people.
Forces You To Write Well-Formed Code
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.
You cannot use inappropriate or non-standard code for tableless layout. Let me correct you - you can (only technically speaking), but doing so defeats all goals. When you do tableless design, you must use a suitable, standard set of code. I think anything that helps you develop good programming habits is a good thing.
Faster Loading Time
Download faster
This is absolutely a benefit 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.
The tableless layout is very beneficial, including the following reasons: 1. From a basic principle, using the table layout will slow down the download speed; more importantly One point, no matter how you set the height and width of the table element, all elements in the table will be loaded before loading the table. This may be the reason why many people are keen on table layout! In fact, tables tend to be large in size, so they actually take longer to load. We cannot ignore its download time.
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 a lot 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. 
因此，我们必须把所有的值设置清楚，从而减少下载的时间。接下来让我们看看其它的缺点吧：代码的混乱会增加加载的时间。首先，表格本身包含了大量的代码，你可以数数看其中包含了几个“td”开始和结束标签，我想应该是很多吧。为了把它们设置的清楚一点，必须增加网页的尺寸从而导致下载时间延长。关于这个主题，我们已进行了多次实验。尽量不要再使用表格进行布局了，看看微软的做法吧，他们原来是使用表格布局的已经开始使用非表格布局了。研究表明，这种做法为该网站节省了62%的空间大小；通过每月平均点击率计算，微软将每天节省924 GIGS的带宽，一年将节省329Terabytes的带宽。对于任何一家带宽占用较大的公司，这样做都是非常必要的。
Easier to Read Code
Increase the readability of 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.
If you use standard code, standard semantic documentation, and a non-tabular layout, your code will look very clear, just like idiomatic text with some special 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 favorite.
The advantage of using a non-table layout is not only that it makes it easier for you to update the web page, but also allows people who have not changed jobs to make subtle modifications and conversions. In addition, if you are a freelance web designer, you can also ask professional web designers to remember your website. The simplicity of the code can make code transformation very easy. We all want code developers to leave us with simple code, so when we write code, we should also consider this.
Print Alternate Views
Convenient style definition
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.
When we When creating a web page using table layout, you should not stick to one specific layout method.Developers who use table layouts, like most of us, must be aware that if you were designing before the "tables-less" movement, you had to create a separate layout for each page. style, it is very tedious to do so.
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.
Simple output style control is a huge advantage of tableless layout. You can easily create a simple new layout and apply it to all your web pages without having to design a style for each page. This will undoubtedly be a huge time saver.
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!
When you use this When controlling all elements in this way, the first key point to consider is: how to effectively organize all the information on the page itself. Let's imagine the following sorting: first the top of the page, then the content, then specific news information and a list of links, and finally the footer.However, we still want it to be displayed according to our normal browsing habits (ie: header at the top; link list at the center left; content in the middle; news at the center right; footer at the bottom). If you use a table layout, you have to create a new page because tables are read from left to right; however, if you use a tableless layout, you are not bound by this form. . You can place content wherever you want and have great control over it. You only need to use CSS to achieve the above purpose smoothly.
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.
Additionally, because we can use CSS places all or part of the content anywhere in the HTML page, so we can have arbitrary control over how it appears.
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. The flexibilty and organization leads to being able to create a powerful website that takes advantage of some of the possibilities with XHTML.
Because code simplification is so important, it can control the expression and location of content at will, therefore, Even on a mobile phone screen, you can easily display your web page. We can use XHTML's extensibility and organization to create excellent websites.
Search Engine Optimization
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.
Because you can use tableless layout to put the most important content at the top of the page without affecting the entire layout, then your page Can perform search engine optimization to the maximum extent. For example, I placed a navigation bar on the left side of the page and wrote some keywords with very high attention rates on it. Therefore, 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 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 style sheet 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 can find common keywords throughout the document without filtering code. Search engines will search for pages where the proportion of content accounts for a larger proportion of the page. Therefore, placing style elements in an external style sheet can make the content stand out. The table-less layout mentioned above significantly reduces the page size and download time, and can make greater use of search engines.
Presentation Flexibility
Full Adaptability
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 effects cascade through all the pages on your website, and eliminate the need for manually updating many pages.
Tableless layout based on CSS is a very simple method. You can change the styles and images you want by transforming the CSS files. Using cascading style sheets throughout your website can reduce the workload of daily page updates.
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.
You can visit the famous website: CSS Zen Garden, which is a classic in terms of the entire page layout. You can view different layout styles by clicking "Select a Design" on the navigation bar. Each different design style uses exactly the same HTML content. It only changes the content of the HTML by using different CSS.
Selling Yourself On Standards
Selling Yourself On Different 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.
The point here is: using standard code to create scalable tableless layouts is not enough. Some website designers still encounter many difficulties in website management. In most cases, this is caused by ignoring the content of the tableless layout and the CSS layout method.
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.
If you want to carry out standardized design, but your company does not allow it because it may delay time. So here's what you do: write them down 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 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.
For example, grab as many existing code pages as possible and rewrite the code in a concise and standard code format. Then, compare the size difference between the two pages before and after (including the optimization of the image), and calculate the size difference. Then, explain how much bandwidth costs can be saved every month if you follow the new layout. If this is not enough, you can explain in detail how much download speed will be improved if CSS layout is used; and how much update time can be saved when the page is updated. This way, you can use your time to improve the functionality of your website - thus eliminating most of the maintenance time.
Summary
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 moving to a tableless design is to slowly move your website towards 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.
The purpose of writing this article is , so that everyone can overcome their concerns about using tableless layout and start using this method for layout. Here is a shortcut, you can directly download the 40 ready-made template cases on the Layout Gala website for layout. Before you give up on using tables, you should slow down the process of making your site tableless as much as possible. You should fully learn CSS technology. After reading this article and other related articles on the website, it is only a matter of time before you create a website with a tableless layout.