w3pop.com :: 网络学院 :: 设计理念 :: 创建无表格网站的原因和原则
创建无表格网站的原因和原则
作者:作者：Nicole Hernandez / 翻译：W3POP.COM 翻译/整理:w3pop.com 发布:2007-04-28 浏览:4616 ::
::
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、从基本原理上讲，使用表格布局将减缓下载速度；更重要的一点，无论你怎样设置表格元素的高度和宽度，表格内的所有元素都将在加载表格之前加载，这可能是很多人热衷表格布局的原因吧！事实上，表格的尺寸一般都很大，所以它们反而会加载更长的时间。我们不能忽视它的下载时间。
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
增加代码的易读性
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.
如果使用的是标准代码，标准语义文档和非表格布局，那么你的代码将看上去非常清楚，简直就如同一个带有一些特殊符号的惯用文本。
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 favor.
使用非表格布局的好处不仅在于方便你对网页进行更新，而且还可以使非转业的人对其进行细微地修改和转换。另外，如果你是一个自由职业的网页设计师，你也可以让专业网页设计师记住你的网站。代码的简明性可以使代码转化工作变得非常容易。我们都希望代码开发者们为我们留下的是简单的代码，所以，当我们书写代码时，也考虑考虑这点吧。
Print Alternate Views
方便的样式定义
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.
当我们使用表格布局创建网页时，你不应该拘泥于一种特定的布局方法。使用表格布局的开发者，如同我们当中的大多数人一样，必须要注意一点，如果你是在“网页设计无表格化”运动之前从事设计工作的，你必须为每张网页创建一种独立的样式，这样做非常繁琐。
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.
简易的输出样式控制是无表化布局的一个巨大优势。你可以轻松地创建一种简单的全新布局，并将其运用到所有网页中，而无需对每个页面都设计一套样式。这无疑会节省巨大的时间。
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 !
当你使用这种方法控制所有元素时，那么首先要考虑的一个关键点就是：如何将页面本身的所有信息有效地组织起来。让我们设想一下下面的排序方式：首先是页首，接下来是内容，然后是特定的新闻信息和链接列表，最后是页脚。然而，我们仍然希望它按照我们正常的浏览习惯进行显示（即：页首在最顶端；链接列表在中间左端；内容在中间；新闻在中间右端；页脚在最底端）。如果你使用表格布局的话，那么你必须重新创建一个页面，因为表格的读取顺序是从左往右的；但是，如果你使用了无表化布局，那你就不会被这种形式所束缚。你可以随心所欲的摆放内容的位置并很好的对它进行控制。而只需要使用CSS便可以顺利实现上述的目的。
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.
另外，因为我们可以使用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技术，读完这篇文章以及网站上其他相关的文章之后，你制作无表布局的网站只是时间问题了。
评论 (0)
All
