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. 一時間，網(wǎng)頁設計師們都在說：表格是魔鬼！但是他們并不能講出其中的原因。那么在這里，我將給你一些具有說服力的理由，表明為什么人們不愿意使用表格來創(chuàng)建網(wǎng)頁。其中包括創(chuàng)建無表格網(wǎng)站的四個好處，以及如何將網(wǎng)站轉(zhuǎn)變?yōu)榻?jīng)久不衰的“統(tǒng)治者”，并將它推銷出去。 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 迫使你書寫格式嚴謹?shù)拇a 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. 你不可能使用不合適的或不標準的代碼來進行無表布局。讓我更正一下——你可以（僅從技術角度來說），但是，這樣做會使得所有目標落空。當你進行無表設計時，你必須使用一套合適的、標準的代碼。我認為，能夠讓你養(yǎng)成一個好的編程習慣的所有事情都是好事情。 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、從基本原理上講，使用表格布局將減緩下載速度；更重要的一點，無論你怎樣設置表格元素的高度和寬度，表格內(nèi)的所有元素都將在加載表格之前加載，這可能是很多人熱衷表格布局的原因吧！事實上，表格的尺寸一般都很大，所以它們反而會加載更長的時間。我們不能忽視它的下載時間。 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. 因此，我們必須把所有的值設置清楚，從而減少下載的時間。接下來讓我們看看其它的缺點吧：代碼的混亂會增加加載的時間。首先，表格本身包含了大量的代碼，你可以數(shù)數(shù)看其中包含了幾個“td”開始和結(jié)束標簽，我想應該是很多吧。為了把它們設置的清楚一點，必須增加網(wǎng)頁的尺寸從而導致下載時間延長。關于這個主題，我們已進行了多次實驗。盡量不要再使用表格進行布局了，看看微軟的做法吧，他們原來是使用表格布局的已經(jīng)開始使用非表格布局了。研究表明，這種做法為該網(wǎng)站節(jié)省了62%的空間大??；通過每月平均點擊率計算，微軟將每天節(jié)省924 GIGS的帶寬，一年將節(jié)省329Terabytes的帶寬。對于任何一家?guī)捳加幂^大的公司，這樣做都是非常必要的。 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. 使用非表格布局的好處不僅在于方便你對網(wǎng)頁進行更新，而且還可以使非轉(zhuǎn)業(yè)的人對其進行細微地修改和轉(zhuǎn)換。另外，如果你是一個自由職業(yè)的網(wǎng)頁設計師，你也可以讓專業(yè)網(wǎng)頁設計師記住你的網(wǎng)站。代碼的簡明性可以使代碼轉(zhuǎn)化工作變得非常容易。我們都希望代碼開發(fā)者們?yōu)槲覀兞粝碌氖呛唵蔚拇a，所以，當我們書寫代碼時，也考慮考慮這點吧。 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. 當我們使用表格布局創(chuàng)建網(wǎng)頁時，你不應該拘泥于一種特定的布局方法。使用表格布局的開發(fā)者，如同我們當中的大多數(shù)人一樣，必須要注意一點，如果你是在“網(wǎng)頁設計無表格化”運動之前從事設計工作的，你必須為每張網(wǎng)頁創(chuàng)建一種獨立的樣式，這樣做非常繁瑣。 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. 簡易的輸出樣式控制是無表化布局的一個巨大優(yōu)勢。你可以輕松地創(chuàng)建一種簡單的全新布局，并將其運用到所有網(wǎng)頁中，而無需對每個頁面都設計一套樣式。這無疑會節(jié)省巨大的時間。 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 ! 當你使用這種方法控制所有元素時，那么首先要考慮的一個關鍵點就是：如何將頁面本身的所有信息有效地組織起來。讓我們設想一下下面的排序方式：首先是頁首，接下來是內(nèi)容，然后是特定的新聞信息和鏈接列表，最后是頁腳。然而，我們?nèi)匀幌Ｍ凑瘴覀冋５臑g覽習慣進行顯示（即：頁首在最頂端；鏈接列表在中間左端；內(nèi)容在中間；新聞在中間右端；頁腳在最底端）。如果你使用表格布局的話，那么你必須重新創(chuàng)建一個頁面，因為表格的讀取順序是從左往右的；但是，如果你使用了無表化布局，那你就不會被這種形式所束縛。你可以隨心所欲的擺放內(nèi)容的位置并很好的對它進行控制。而只需要使用CSS便可以順利實現(xiàn)上述的目的。 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將所有內(nèi)容或部分內(nèi)容放在HTML頁面中的任何地方，因此，我們可以對它的表現(xiàn)方式做出隨意的控制。 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. 因為代碼的精簡是如此的重要，它可以隨意的控制內(nèi)容的表達方式和位置，因此，即使是在一個手機屏幕上，也可以很輕松的展現(xiàn)你的網(wǎng)頁。我們可以利用XHTML的擴展性和組織性來創(chuàng)建優(yōu)秀的網(wǎng)站。 Search Engine Optimization 搜索引擎優(yōu)化 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. 因為你可以使用無表化布局將最重要的內(nèi)容放在頁面頂端，而這樣做又不會影響整個布局，那么你的頁面可以最大限度的執(zhí)行搜索引擎優(yōu)化。舉個例子來說，我在頁面的左邊部分放置了導航條，上面寫了一些關注率非常高的關鍵詞。因此我可以把導航條代碼寫在HTML代碼之前而不影響整個頁面布局。因為我是使用CSS來調(diào)整它的位置的。 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. 搜索引擎不需要過濾代碼就可以找到將整個文檔的通用關鍵字。搜索引擎會搜索那些內(nèi)容比例所占頁面比例較多的頁面，因此，把樣式元素放到外部樣式表中，這樣可以使內(nèi)容凸顯出來。上描提到的無表化布局，明顯的減少了頁面尺寸和下載時間，可以更大限度的利用搜索引擎。 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為基礎的無表化布局是非常簡易的一種方法。你可以通過轉(zhuǎn)變CSS文件來更改你所希望的樣式和圖片。在整個網(wǎng)站中使用層疊樣式表可以減少日常頁面更新的工作量。 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. 你可以訪問一下著名的網(wǎng)站：CSS Zen Garden，在整個頁面布局上，它堪稱經(jīng)典。你可以通過點選導航條上的“Select a Design”來查看不同的布局風格。每個不同的設計風格都使用了完全一致的HTML內(nèi)容。它僅通過使用不同的CSS來改變HTML的內(nèi)容。 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. 這里要說的是：使用標準的代碼，創(chuàng)建可擴展的無表格布局還是不夠的。一些網(wǎng)站設計師還是遇到了很多網(wǎng)站管理上的困難。在大多數(shù)情況下，這都是由于忽略了無表化布局的內(nèi)容以及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. 如果你希望進行標準化設計，但是你所在的公司不允許這么做，因為可能會耽誤時間。那么你可以這樣做：把它們記載袖珍筆記本中，并指出哪里可以節(jié)省成本。 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. 舉個例子來說，盡可能的抓取現(xiàn)有的代碼頁面，并將其中的代碼以簡明標準的代碼格式重新書寫。然后，比較前后兩者頁面的尺寸差異（包括對圖片的優(yōu)化），計算尺寸差值。然后，說明一下，如果按照新的布局方式，每個月可以省去多少帶寬成本。如果這樣還不夠，你可以再具體說明一下，如果用CSS布局會提高多少下載速度；并且，在頁面更新的時候，可以省去多少更新時間。這樣一來，你就可以把時間省下來用于提升網(wǎng)站的功能性——這樣就省去了大部分維護的時間。 Summary 總結(jié) 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網(wǎng)站上下載現(xiàn)成的40個模版案例來進行布局。在你放棄使用表格之前，你應該盡可能放慢網(wǎng)站的無表化進程。你應該充分學習CSS技術，讀完這篇文章以及網(wǎng)站上其他相關的文章之后，你制作無表布局的網(wǎng)站只是時間問題了。
