創建無表格網站的原因和原則 譯文_經驗交流

In a time of web developers who just like to say that 'Tables are Evil' and can't (or won't) 遠ople 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  as you will. 
讓我們先從表格佈局的好處開始講起。之所以把它列在其中是因為他對很多人是至關重要的。
Forces You To Write Well-Formed Code 
迫使你書寫格式嚴謹的程式碼
You cannot have a properly made tableless can (technically you can do it) but it defeats the whole purpose. When you are creating a tableless design,  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 rea》 , unless you set the height and width of your table elements, all the text has to be loaded and rendered BEFORE the table sizes itselfppageto 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 的頻寬。對於任何一家頻寬佔用擴大的公司來說，這樣做都是非常必要的。
Easier to Read Code 
增加程式碼的易讀性
If you are using standard code, semantic document conventions, and  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  easier to update, but it¢ 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  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 unfort鎠. most of us have at some point - particularly if you were in the the industry before the big tableless movement, k that 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 s dually. 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.theUsing. our pages to print using the following order: The page header first, the content next, the special news after that, content next, the special news after that, then the link list, and then the footer. However! We er 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  tocreate 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, 
當你使用這種方法控制所有元素時，那麼首先要考慮的一個關鍵點就是：如何將頁面本身的所有資訊有效地組織起來。讓我們設想一下下面的排序方式：首先是頁首，接下來是內容，然後是特定的新聞資訊和連結列表，最後是頁腳。然而，我們仍然希望它按照我們正常的瀏覽習慣進行顯示（即：頁首在最頂端；鏈接列表在中間左端；內容在中間；新聞在中間右端；頁腳在最底端）。如果你使用表格佈局的話，那麼你必須重新建立一個頁面，因為表格的讀取順序是從左到右的；但是，如果你使用了無表化佈局，那麼你就不會被這種形式所束縛。你可以隨心所欲的擺放內容的位置並且很好的對它進行控制。而只需要使用CSS便可以順利實現上述的目的。
Additionally, because we can put the content in whatever order we want in the HTML, and then move the  over presentation. 
另外，因為我們可以使用CSS將所有內容或部分內容放在HTML頁面中的任何地方，因此，我們可以對它的表現方式做出隨意的控制。
That is very important because the clean code, and ability to alter presentation, means that your site can be view遠The flexibilty and organization leads to being able to create a powerful website that takes advantage able to create a powerful website that takes advantage  some 即使是在一個手機螢幕上，也可以很輕鬆的展現你的網頁。我們可以利用XHTML的擴充性和組織性來創建優秀的網站。
搜尋timized for search engines. For instance, say that I have a navigation bar on the left side of the page that lists tons ) part 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卷 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 搜尋引擎會搜尋那些內容比例所佔頁面比例較多的頁面，因此，把樣式元素放到外部樣式表中，這樣可以使內容凸顯出來。上描提到的無表化佈局，明顯的減少了頁面尺寸和下載時間，可以更大限度的利用搜尋引擎。
Presentation Flexibility 
全方位適應力
Making changes to a CSS based Tableless layout is simple. You can alter 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 害 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 difficulties from their management . Most often those difficulties are rooted in the management being unaware of the benefits of using tableless content  CSS benefits of using tableless content 有些網站設計師還是遇到了許多網站管理上的困難。在大多數情況下，這都是由於忽略了無表化佈局的內容以及CSS佈局方式而導致的。
If you want to design for standards, but you work for a company that is not very forward-thinking in allow 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銠ved. 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 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 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 touse)  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  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  of time. 
寫這篇文章的目的在於，讓大家能夠大小使用無表化佈局的疑慮，並開始使用這種方式進行佈局。這裡有一條捷徑，你可以直接在Layout Gala網站下載現成的40個模版案例來進行佈局。在你放棄使用表格之前，你應該盡可能放慢網站的無表化進程。你應該充分學習CSS技術，讀完這篇文章以及網站上其他相關的文章之後，你製作無錶佈局的網站只是時間問題了。