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

標(biāo)簽：海東邯鄲南充濱州遼源喀什陽(yáng)泉東莞

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《創(chuàng)建無(wú)表格網(wǎng)站的原因和原則譯文》，本文關(guān)鍵詞創(chuàng)建,無(wú),表格,網(wǎng),站的,原因,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。

濮阳杆衣贸易有限公司

創(chuàng)建無(wú)表格網(wǎng)站的原因和原則 譯文

創(chuàng)建無(wú)表格網(wǎng)站的原因和原則譯文