创建无表格网站的原因和原则 译文_经验交流

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. 
一时间，网页设计师们都在说：表格是魔鬼！但是他们并不能讲出其中的原因。那么在这里，我将给你一些具有说服力的理由，表明为什么人们不愿意使用表格来创建网页。其中包括创建无表格网站的四个好处，以及如何将网站转变为经久不衰的“统治者”，并将它推销出去。
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. 
让我们先从表格布局的好处开始讲起。之所以把它列在其中是因为他对很多人是至关重要的。
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. 
你不可能使用不合适的或不标准的代码来进行无表布局。让我更正一下——你可以（仅从技术角度来说），但是，这样做会使得所有目标落空。当你进行无表设计时，你必须使用一套合适的、标准的代码。我认为，能够让你养成一个好的编程习惯的所有事情都是好事情。
Faster Loading Time 
下载更快
This is absolutely a benfit 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. 
无表布局非常有好处，其中包含下面这几个理由：1、从基本原理上讲，使用表格布局将减缓下载速度；更重要的一点，无论你怎样设置表格元素的高度和宽度，表格内的所有元素都将在加载表格之前加载，这可能是很多人热衷表格布局的原因吧！事实上，表格的尺寸一般都很大，所以它们反而会加载更长的时间。我们不能忽视它的下载时间。
好的，那么解决加载时间的方法就是显式设置所有值，对吧？ 所以现在我们看到了另一个缺点。 代码混乱会增加加载时间。 首先，表格本身就需要大量代码。 您的基于表格的布局平均有多少个 td 打开和关闭标签？ 吨。 必须显式设置所有值只会增加页面大小和加载时间。 关于这个主题已经做了很多实验，我将向您介绍 StopDesign 所做的一个实验，该实验将 Microsoft 网站从基于表格的网站改造成无表格的布局。 重制版显示网站文件大小减少了 62%，并使用 Microsoft 网站每月的平均点击量计算出 Microsoft 每天将节省 924 GIGS 的带宽，每年将节省 329 TB 的带宽。 对于任何支付带宽费用的公司来说，这些事情都很重要。 
因此，我们必须把所有的值设置清楚，从而减少下载的时间。接下来让我们看看其他的缺点吧：代码的混乱会增加加载的时间。首先，表格本身包含了大量的代码，你可以数数看其中包含了几个“td”开始和结束标签，我想应该是很多吧。为了把它们设置的清楚一点，必须增加网页的尺寸从而导致下载时间延长。关于这个主题，我们已进行了多次实验。尽量不要再使用表格进行布局了，微软的做法吧，他们原来是使用表格表格布局的已经开始使用非布局了。研究证明，这种做法为该网站节省了62%的空间大小；通过每月平均点击率计算，微软每天将节省 924 GIGS 的带宽，一年将节省 329Terabytes 的带宽。对于任何一家带宽占用扩大的公司来说，这样做都是非常必要的。
更容易阅读代码
增加代码的易读性
如果您使用标准代码、语义文档约定和无表格布局，您的代码可以非常干净，看起来实际上就像只是带有一些额外内容的常规文本符号。 
如果使用的是标准代码，标准的语义文档和非表格布局，那么你的代码将会显得非常清晰，简直就像一个带有特殊符号的惯用文本。
这是一个很大的好处，因为它不仅使您更容易更新，而且使非技术用户更容易进行小改动。 此外，如果您是一名网络开发人员，具有更多的自由职业能力，那么通常需要一名全职网络开发人员来维护该网站。 干净且易于阅读的代码使过渡变得轻松。 我们喜欢人们给我们留下易于理解的代码，对吗？ 让我们报答吧。 
使用非表格布局的好处不仅方便你对网页进行更新，而且还可以使非转业的人对其进行重视地修改和转换。另外，如果你是一个自由职业的网页设计师，你也让专业的网页设计师记住你的网站。代码的简洁性可以使代码转化工作变得非常容易。我们都希望代码开发者为我们留下简单的代码，所以，当我们书写时代码，也考虑考虑一下吧。
대체 보기 인쇄
편리한 스타일 정의
테이블 레이아웃을 사용하여 페이지를 만들면 불행하게도 우리 대부분처럼 테이블 기반 웹사이트를 만든 개발자는 특정 레이아웃에 갇히게 됩니다. 특히 대규모 테이블리스 운동 이전에 업계에 종사했다면 별도의 인쇄 가능한 페이지를 만들어야 하는 경우가 많다는 점은 말할 필요도 없이 매우 번거로울 수 있습니다.
테이블 레이아웃을 사용하여 웹 페이지를 만들 때 특정 레이아웃 방법을 고수해서는 안 됩니다. 우리 대부분처럼 테이블 레이아웃을 사용하는 개발자는 "테이블 없는" 움직임 이전에 디자인을 하고 있었다면 각 페이지마다 별도의 레이아웃을 만들어야 했고 그렇게 하는 것이 매우 지루하다는 점을 알아야 합니다.
테이블 없는 레이아웃의 큰 이점은 인쇄 스타일을 개별적으로 만드는 대신 모든 페이지에 적용되는 새로운 인쇄 스타일을 쉽게 만들 수 있다는 것입니다.
간단한 출력 스타일 제어는 테이블리스 레이아웃의 큰 장점입니다. 페이지마다 스타일을 디자인할 필요 없이 간단하고 새로운 레이아웃을 쉽게 만들고 모든 웹 페이지에 적용할 수 있습니다. 이는 의심할 여지 없이 시간을 크게 절약해 줄 것입니다.
이 접근 방식을 사용하면 모든 요소를 ​​제어할 수 있지만 가장 큰 핵심은 페이지 자체 내에서 정보를 구성하는 것입니다. 예를 사용하여 모든 페이지를 인쇄할 표시 순서를 다음 순서로 가정해 보겠습니다. 먼저 콘텐츠, 그 다음에는 특별 뉴스, 링크 목록, 바닥글 순으로 표시됩니다. 내용은 중앙에, 뉴스는 오른쪽에, 바닥글은 하단에 있음) 테이블 기반 레이아웃을 사용하면 인쇄 스타일이 열을 왼쪽에서 오른쪽으로 읽기 때문에 특별한 인쇄 구성을 수행하려면 새 페이지를 만들어야 합니다. 표가 없는 레이아웃을 사용하면 이에 얽매이지 않고 원하는 대로 페이지의 콘텐츠를 정렬할 수 있으며 CSS만 사용하여 모양을 제어할 수 있습니다. 이러한 방식으로 모든 요소를 ​​제어할 때 고려해야 할 첫 번째 핵심 사항은 페이지 자체의 모든 정보를 효과적으로 구성하는 방법입니다. 먼저 페이지 상단, 콘텐츠, 특정 뉴스 정보 및 링크 목록, 바닥글 순으로 정렬한다고 가정해 보겠습니다. 그러나 우리는 여전히 일반적인 탐색 습관(예: 상단에 헤더, 왼쪽 중앙에 링크 목록, 중앙에 콘텐츠, 중앙 오른쪽에 뉴스, 하단에 바닥글)에 따라 표시되기를 원합니다. 테이블 레이아웃을 사용하면 테이블을 왼쪽에서 오른쪽으로 읽기 때문에 새 페이지를 만들어야 하지만, 테이블 없는 레이아웃을 사용하면 이 양식에 구속되지 않습니다. 원하는 대로 콘텐츠를 배치하고 효과적으로 제어할 수 있습니다. 위의 목적을 원활하게 달성하려면 CSS만 사용하면 됩니다.
게다가 HTML에 원하는 순서대로 콘텐츠를 배치한 다음 CSS를 사용하여 웹사이트 보기를 위해 콘텐츠 블록을 이동할 수 있기 때문에 CSS가 콘텐츠의 전부 또는 일부를 어디에 배치하든 궁극적으로 제어할 수 있습니다. HTML 페이지에서 표시되는 방식을 임의로 제어할 수 있습니다.
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. 
因为代码的精简是如此的重要，它可以随意的控制内容的表达方式和位置，因此，即使是在一个手机屏幕上，也可以很轻松的展现你的网页。我们可以利用XHTML的扩展性和组织性来创建优秀的网站。
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. 
因为你可以使用无表化布局将最重要的内容放在页面顶端，而这样做又不会影响整个布局，那么你的页面可以最大限度的执行搜索引擎优化。举个例子来说，我在页面的左边部分放置了导航条，上面写了一些关注率非常高的关键词。因此我可以把导航条代码写在HTML代码之前而不影响整个页面布局。因为我是使用CSS来调整它的位置的。
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 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. 
搜索引擎不需要过滤代码就可以找到将整个文档的通用关键字。搜索引擎会搜索那些内容比例所占页面比例较多的页面，因此，把样式元素放到外部样式表中，这样可以使内容凸显出来。上描提到的无表化布局，明显的减少了页面尺寸和下载时间，可以更大限度的利用搜索引擎。
Presentation Flexibility 
全方位适应性
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 affects cascade through all the pages on your website, and eliminate the need for manually updating many pages. 
以CSS为基础的无表化布局是非常简易的一种方法。你可以通过转变CSS文件来更改你所希望的样式和图片。在整个网站中使用层叠样式表可以减少日常页面更新的工作量。
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. 
你可以访问一下著名的网站：CSS Zen Garden，在整个页面布局上，它堪称经典。你可以通过点选导航条上的“Select a Design”来查看不同的布局风格。每个不同的设计风格都使用了完全一致的HTML内容。它仅通过使用不同的CSS来改变HTML的内容。
Selling Yourself On 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. 
这里要说的是：使用标准的代码，创建可扩展的无表格布局还是不够的。一些网站设计师还是遇到了很多网站管理上的困难。在大多数情况下，这都是由于忽略了无表化布局的内容以及CSS布局方式而导致的。
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. 
如果你希望进行标准化设计，但是你所在的公司不允许这么做，因为可能会耽误时间。那么你可以这样做：把它们记载袖珍笔记本中，并指出哪里可以节省成本。
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. 
举个例子来说，尽可能的抓取现有的代码页面，并将其中的代码以简明标准的代码格式重新书写。然后，比较前后两者页面的尺寸差异（包括对图片的优化），计算尺寸差值。然后，说明一下，如果按照新的布局方式，每个月可以省去多少带宽成本。如果这样还不够，你可以再具体说明一下，如果用CSS布局会提高多少下载速度；并且，在页面更新的时候，可以省去多少更新时间。这样一来，你就可以把时间省下来用于提升网站的功能性——这样就省去了大部分维护的时间。
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 toward moving to a tableless design is to slowly move your website toward 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. 
写这篇文章的目的在于，让大家能够大小使用无表化布局的疑虑，并开始使用这种方式进行布局。这里有一条捷径，你可以直接在Layout Gala网站上下载现成的40个模版案例来进行布局。在你放弃使用表格之前，你应该尽可能放慢网站的无表化进程。你应该充分学习CSS技术，读完这篇文章以及网站上其他相关的文章之后，你制作无表布局的网站只是时间问题了。