Inatimeofwebdeveloperswhojustliketosaythat'TablesareEvil'andcan't(orwon't)explainwhy,thisarticlewillattempttogiveyousomesolidreasonsthatpeoplecreatetablelessdesigns.Includedaresixmajorbenefitsofcreatingtablelesssites,andhowtosellyourdesiretoalteryourwebsitetoaresistantmanager.
一时间，网页设计师们都在说：表格是魔鬼！但是他们并不能讲出其中的原因。那么在这里，我将给你一些具有说服力的理由，表明为什么人们不愿意使用表格来创建网页。其中包括创建无表格网站的四个好处，以及如何将网站转变为经久不衰的“统治者”，并将它推销出去。
Let'sbeginwiththebenefitsofatablelesslayout.TheseareonlyintheorderthatIfeeltheyshouldgoin,somethingsaremoreimportanttootherpeople,sorankthemasyouwill.
让我们先从表格布局的好处开始讲起。之所以把它列在其中是因为他对很多人是至关重要的。
ForcesYouToWriteWell-FormedCode
迫使你书写格式严谨的代码
Youcannothaveaproperlymadetablelesslayout,anduseimproperandnon-standardcode.Well,letmecorrectthat-youcan(technicallyyoucandoit)butitdefeatsthewholepurpose.Whenyouarecreatingatablelessdesign,youshouldbeusingstandardscompliantcode.Ithinkthatanythingthatmakesyougetintothehabitofalwayswritingcleancodeisagoodthing.
你不可能使用不合适的或不标准的代码来进行无表布局。让我更正一下——你可以（仅从技术角度来说），但是，这样做会使得所有目标落空。当你进行无表设计时，你必须使用一套合适的、标准的代码。我认为，能够让你养成一个好的编程习惯的所有事情都是好事情。
FasterLoadingTime
下载更快
Thisisabsolutelyabenfitofatablelesslayout,andforseveralreasons.First,onafundamentallevel-tablesloadslowly.Forthemostpart,unlessyousettheheightandwidthofyourtableelements,allthetexthastobeloadedandrenderedBEFOREthetablesizesitselftothepage.Ofcourse,thisiswhatsomanypeoplelovedabouttablesisn'tit?Thefactthattheyweresoeasilysizeable.Thedownsideishowmuchmoretimetheytaketoload.
无表布局非常有好处，其中包含下面这几个理由：1、从基本原理上讲，使用表格布局将减缓下载速度；更重要的一点，无论你怎样设置表格元素的高度和宽度，表格内的所有元素都将在加载表格之前加载，这可能是很多人热衷表格布局的原因吧！事实上，表格的尺寸一般都很大，所以它们反而会加载更长的时间。我们不能忽视它的下载时间。
Okay,sothesolutiontothatloadingtimeistosetallthevaluesexplicitly,right?Sonowweseeanotherdownside.Codeclutterthatincreasesloadingtime.Firstofall,justbythemselves,tablestakealotofcode.Howmanytdopenandclosetagsdoesyouraveragetablebasedlayouthave?Tons.Havingtosetallthevaluesexplicitlyonlyaddstothepagesizeandloadingtime.Therearemanyexperimentsthathavebeendoneonthistopic,I'llpointyoutowardthisonethatStopDesigndidonaremakeoftheMicrosoftwebsitefromatablebasedsitetoatablelesslayout.Thatremakeshoweda62%filesizereductionofthesite,andusingtheiraveragehitspermonthfortheMicrosoftsite,calculatedthatMicrosoftwouldbesaving924GIGSinbandwidthperday,and329Terabytesofbandwidthperyear.Foranycompanythatpaysforbandwidth,thesethingsareimportant.
因此，我们必须把所有的值设置清楚，从而减少下载的时间。接下来让我们看看其它的缺点吧：代码的混乱会增加加载的时间。首先，表格本身包含了大量的代码，你可以数数看其中包含了几个“td”开始和结束标签，我想应该是很多吧。为了把它们设置的清楚一点，必须增加网页的尺寸从而导致下载时间延长。关于这个主题，我们已进行了多次实验。尽量不要再使用表格进行布局了，看看微软的做法吧，他们原来是使用表格布局的已经开始使用非表格布局了。研究表明，这种做法为该网站节省了62%的空间大小；通过每月平均点击率计算，微软将每天节省924GIGS的带宽，一年将节省329Terabytes的带宽。对于任何一家带宽占用较大的公司，这样做都是非常必要的。
EasiertoReadCode
增加代码的易读性
Ifyouareusingstandardcode,semanticdocumentconventions,andatablelesslayout,yourcodecanbesocleanthatitlookspracticallylikejustregulartextwithafewextrasymbols.
如果使用的是标准代码，标准语义文档和非表格布局，那么你的代码将看上去非常清楚，简直就如同一个带有一些特殊符号的惯用文本。
Thatisagreatbenefitbecauseitnotonlymakesiteasierforyoutoupdate,butitmakesiteasierforanon-technicalusertomakesmallalterationsto.Additionally,ifyouworkasawebdeveloperinamorefreelancecapacity,itiscommonfortheretobeafull-timewebdeveloperwhohastomaintainthatsite.Cleanandsimpletoreadcodemakesthataeasytransition.Welikeitwhenpeopleleaveuseasytounderstandcode,right?Let'sreturnthefavor.
使用非表格布局的好处不仅在于方便你对网页进行更新，而且还可以使非转业的人对其进行细微地修改和转换。另外，如果你是一个自由职业的网页设计师，你也可以让专业网页设计师记住你的网站。代码的简明性可以使代码转化工作变得非常容易。我们都希望代码开发者们为我们留下的是简单的代码，所以，当我们书写代码时，也考虑考虑这点吧。
PrintAlternateViews
方便的样式定义
Whenyoucreateapageusingatable-layout,youareratherunfortunatelylockedintoacertainlayout.Developerswhohavecreatedtable-basedwebsites,asmostofushaveatsomepoint-particularlyifyouwereinthetheindustrybeforethebigtablelessmovement,knowthatyouoftenhavetocreateaseparateprintableversionofyourpages.Thiscanbe,needlesstosay,quitetiresome.
当我们使用表格布局创建网页时，你不应该拘泥于一种特定的布局方法。使用表格布局的开发者，如同我们当中的大多数人一样，必须要注意一点，如果你是在“网页设计无表格化”运动之前从事设计工作的，你必须为每张网页创建一种独立的样式，这样做非常繁琐。
Easeofprintingstylecontrolisahugebenefitwithatablelesslayout.Youcaneasilycreateasinglenewprintingstylethatappliestoallyourpages,insteadofmakingthemindividually.Thataloneisahugetimesaver,butthereismore.
简易的输出样式控制是无表化布局的一个巨大优势。你可以轻松地创建一种简单的全新布局，并将其运用到所有网页中，而无需对每个页面都设计一套样式。这无疑会节省巨大的时间。
Whileyoucancontrolallelementswiththisapproach,thebiggestkeyisorganizationofinformationwithinthepageitself.Usingtheexample,let'sassumethatthedisplayorderwewantallourpagestoprintusingthefollowingorder:Thepageheaderfirst,thecontentnext,thespecialnewsafterthat,thenthelinklist,andthenthefooter.However!Westillwantittodisplayasitwouldnormallywhenviewing(meaningtheheaderatthetop,thelinksontheleft,contentinthemiddle,newsontheright,andfooteratthebottom).Withatable-basedlayout,youwouldhavetocreateanewpagetodothatspecialprintingorganizationbecausetheprintstylewillreadyourcolumnslefttoright.Withatable-lesslayout,youarenotboundbythis.Youcanorderthecontentinyourpagehoweveryoulike,andstillcontrolthewayitlooks...allbyusingtheCSSonly!
当你使用这种方法控制所有元素时，那么首先要考虑的一个关键点就是：如何将页面本身的所有信息有效地组织起来。让我们设想一下下面的排序方式：首先是页首，接下来是内容，然后是特定的新闻信息和链接列表，最后是页脚。然而，我们仍然希望它按照我们正常的浏览习惯进行显示（即：页首在最顶端；链接列表在中间左端；内容在中间；新闻在中间右端；页脚在最底端）。如果你使用表格布局的话，那么你必须重新创建一个页面，因为表格的读取顺序是从左往右的；但是，如果你使用了无表化布局，那你就不会被这种形式所束缚。你可以随心所欲的摆放内容的位置并很好的对它进行控制。而只需要使用CSS便可以顺利实现上述的目的。
Additionally,becausewecanputthecontentinwhateverorderwewantintheHTML,andthenmovethecontentblocksaroundforwebsiteviewingusingCSS-wecanhaveultimatecontroloverpresentation.
另外，因为我们可以使用CSS将所有内容或部分内容放在HTML页面中的任何地方，因此，我们可以对它的表现方式做出随意的控制。
Thatisveryimportantbecausethecleancode,andabilitytoalterpresentation,meansthatyoursitecanbeviewablebysomeoneonasmallmobilephonescreen。TheflexibiltyandorganizationleadstobeingabletocreateapowerfulwebsitethattakesadvantageofsomeofthepossibilitieswithXHTML.
因为代码的精简是如此的重要，它可以随意的控制内容的表达方式和位置，因此，即使是在一个手机屏幕上，也可以很轻松的展现你的网页。我们可以利用XHTML的扩展性和组织性来创建优秀的网站。
SearchEngineOptimization
搜索引擎优化
Duetothefactthatyoucanorganizeyourmostimportantcontentatthetopofyourpage,withoutaffectingthelayout,yourpagecanbebetteroptimizedforsearchengines.Forinstance,saythatIhaveanavigationbarontheleftsideofthepagethatliststonsofpartsofthesitethatareactuallygreatkeywords.IcouldmovethatnavigationbarcodehigherupinmyactualHTML,withoutchangingthelayout,becauseI'musingtheCSStopositionthenavigationwhereIwantit.
因为你可以使用无表化布局将最重要的内容放在页面顶端，而这样做又不会影响整个布局，那么你的页面可以最大限度的执行搜索引擎优化。举个例子来说，我在页面的左边部分放置了导航条，上面写了一些关注率非常高的关键词。因此我可以把导航条代码写在HTML代码之前而不影响整个页面布局。因为我是使用CSS来调整它的位置的。
Thosesearchenginescanalsomoreclearlyfindcommonwordsthroughoutyourdocumentwithouthavingtofilterthroughcode.Searchenginesprioritizewebsitesthathaveahighercontenttocoderatio,soputtingallyourstyleelementsintoyourexternalCSSstylesheetmakesyoursitehighlycontentbasedtoasearchengine.Tablelesslayouts,aspreviouslymentioned,decreasepagesizeandloadingtime-anotherbonustosearchengines.
搜索引擎不需要过滤代码就可以找到将整个文档的通用关键字。搜索引擎会搜索那些内容比例所占页面比例较多的页面，因此，把样式元素放到外部样式表中，这样可以使内容凸显出来。上描提到的无表化布局，明显的减少了页面尺寸和下载时间，可以更大限度的利用搜索引擎。
PresentationFlexibility
全方位适应性
MakingchangestoaCSSbasedTablelesslayoutissimple.YoucanaltertheCSSfileonly,changingasmanystylesandgraphicsasyouwant.Theaffectscascadethroughallthepagesonyourwebsite,andeliminatetheneedformanuallyupdatingmanypages.
以CSS为基础的无表化布局是非常简易的一种方法。你可以通过转变CSS文件来更改你所希望的样式和图片。在整个网站中使用层叠样式表可以减少日常页面更新的工作量。
Foroneofthebestknownexamplesofhowpowerfulpresentationcanbe,youcanvisittheCSSZenGardenandnavigatethroughthe'SelectaDesign'linkstoseethedifferences.EachofthedifferentdesignsusesexactlythesameHTMLfilecontent.TheonlythingthatchangesistheCSSfileforeachone.
你可以访问一下著名的网站：CSSZenGarden，在整个页面布局上，它堪称经典。你可以通过点选导航条上的“SelectaDesign”来查看不同的布局风格。每个不同的设计风格都使用了完全一致的HTML内容。它仅通过使用不同的CSS来改变HTML的内容。
SellingYourselfOnStandards
用不同的标准来推销你自己
Sometimesknowinghowtocodeforstandards,andcreateflexibletablelesslayoutsisnotenough.Therearesomewebdesignerswhomeetwithdifficultiesfromtheirmanagement.MostoftenthosedifficultiesarerootedinthemanagementbeingunawareofthebenefitsofusingtablelesscontentandCSSdrivenlayout.
这里要说的是：使用标准的代码，创建可扩展的无表格布局还是不够的。一些网站设计师还是遇到了很多网站管理上的困难。在大多数情况下，这都是由于忽略了无表化布局的内容以及CSS布局方式而导致的。
Ifyouwanttodesignforstandards,butyouworkforacompanythatisnotveryforward-thinkinginallowingyouthetimetoworkonthechanges--trythis:Makethemthinkabouttheirpocket-book.Pointoutthecostsavingbenefits.
如果你希望进行标准化设计，但是你所在的公司不允许这么做，因为可能会耽误时间。那么你可以这样做：把它们记载袖珍笔记本中，并指出哪里可以节省成本。
Forinstance,trygrabbingasinglepageofexistingcode.Cleanituptostandards.Comparethepagesizetobefore(includingimageoptimization),andcountthedifferenceinbytessaved.Multiplythatacrossthenumberofsitepages,andthenumberofdayspermonth.Thenexplaintothemtheamountofbandwidthcostsavedmonthlyifthiswasdoneacrossthewholesite.Ifthatisn'tenough,showthemhowquicklyyoucanmakechangestoawebsiteonceitisCSSdriven,andpushtheideathatyouwillbeabletochangethesitemorerapidlywhenthereareneededupdates,andyouwillhavemoretimetofocusonaddinginnewfunctionalitytothesite-insteadofspendingyourtimedoingmaintenance.
举个例子来说，尽可能的抓取现有的代码页面，并将其中的代码以简明标准的代码格式重新书写。然后，比较前后两者页面的尺寸差异（包括对图片的优化），计算尺寸差值。然后，说明一下，如果按照新的布局方式，每个月可以省去多少带宽成本。如果这样还不够，你可以再具体说明一下，如果用CSS布局会提高多少下载速度；并且，在页面更新的时候，可以省去多少更新时间。这样一来，你就可以把时间省下来用于提升网站的功能性——这样就省去了大部分维护的时间。
Summary
总结
Hopefully,thislittlearticlewillserveasawaytogetyoustartedonunderstandingwhytouseatablelesslayout,whatthebenefitsare,andyoucaneasilytakealookatLayoutGalaanddownloadjust1,orall40ofthetablelesslayoutexamplestogetyoustarted.However,thebeststeptowardmovingtoatablelessdesignistoslowlymoveyourwebsitetowardastandardcompliantversionfirst,beforeyougetridofthetables.Togettothatpoint,studyasmuchonCSSasyoucan,readthroughthearticleshereandelsewhereontheweb,andmovingfromtablelayoutstotablelesswillbejustamatteroftime.
写这篇文章的目的在于，让大家能够大小使用无表化布局的疑虑，并开始使用这种方式进行布局。这里有一条捷径，你可以直接在LayoutGala网站上下载现成的40个模版案例来进行布局。在你放弃使用表格之前，你应该尽可能放慢网站的无表化进程。你应该充分学习CSS技术，读完这篇文章以及网站上其他相关的文章之后，你制作无表布局的网站只是时间问题了。