Table-Free 홈페이지를 만드는 이유와 원칙 번역_체험교류

'테이블은 악마'라고 말하고 싶어하지만 그 이유를 설명할 수 없는(또는 설명하지 않는) 웹 개발자 시대에 이 기사에서는 사람들이 테이블 없는 디자인을 만드는 몇 가지 확실한 이유를 제공하려고 시도할 것입니다. 테이블 없는 사이트를 만드는 것의 이점과 웹 사이트를 저항하는 관리자에게 변경하려는 욕구를 판매하는 방법
한동안 웹 디자이너는 다음과 같이 말했습니다. 테이블은 악마입니다! 그러나 그들은 그 이유를 알 수 없었습니다. 그래서 여기에서는 사람들이 웹 페이지를 만드는 데 테이블을 사용하는 것을 꺼리는 몇 가지 설득력 있는 이유를 설명하겠습니다. 형식 없는 웹사이트를 만들 때 얻을 수 있는 네 가지 이점과 웹사이트를 지속적인 "지배자"로 전환하고 마케팅하는 방법이 포함되어 있습니다.
테이블 없는 레이아웃의 장점부터 시작해 보겠습니다. 이는 제가 생각하는 순서일 뿐이고 일부 사항은 다른 사람들에게 더 중요하므로 원하는 대로 순위를 매기세요. 테이블 레이아웃의 이점부터 시작해 보세요. 이는 많은 사람들에게 매우 중요하기 때문에 여기에 포함되었습니다.
잘 구성된 코드를 작성하도록 강요합니다
잘 구성된 코드를 작성하도록 강요합니다
테이블 없는 레이아웃을 제대로 만들 수 없고 부적절하고 비표준적인 코드를 사용할 수 없습니다. (기술적으로는 할 수 있지만) 테이블 없는 디자인을 만들 때 항상 깨끗한 코드를 작성하는 습관을 갖게 만드는 것은 표준을 준수하는 코드를 사용해야 한다고 생각합니다. 다행이네요.
테이블 없는 레이아웃에는 부적절하거나 비표준적인 코드를 사용할 수 없습니다. 정정하겠습니다. (기술적으로만 말하면) 가능하지만 그렇게 하면 모든 목표가 무산됩니다. 테이블 없는 설계를 수행할 때는 적합한 표준 코드 세트를 사용해야 합니다. 좋은 프로그래밍 습관을 기르는 데 도움이 되는 것은 무엇이든 좋은 것이라고 생각합니다.
빠른 로딩 시간
더 빠른 다운로드
이것은 테이블 없는 레이아웃의 장점이며, 첫째, 기본적으로 높이를 설정하지 않는 한 테이블이 느리게 로드됩니다. 그리고 테이블 요소의 너비를 고려하면 테이블 크기가 페이지에 맞게 조정되기 전에 모든 텍스트를 로드하고 렌더링해야 합니다. 물론 이것이 바로 테이블에 대해 많은 사람들이 좋아하는 점입니다. 테이블의 크기를 쉽게 조정할 수 있다는 사실이 아닌가요? 단점은 로드하는 데 시간이 더 많이 걸린다는 것입니다.
테이블 없는 레이아웃은 다음과 같은 이유를 포함하여 매우 유용합니다. 1. 기본 원칙에서 테이블 레이아웃을 사용하면 다운로드 속도가 더 느려집니다. 테이블 요소의 높이와 너비를 어떻게 설정하든 테이블을 로드하기 전에 테이블의 모든 요소가 로드됩니다. 이것이 많은 사람들이 테이블 레이아웃에 관심을 갖는 이유일 수 있습니다. 실제로 테이블은 크기가 큰 경향이 있으므로 실제로 로드하는 데 더 오랜 시간이 걸립니다. 다운로드 시간을 무시할 수 없습니다.
그럼 로드 시간에 대한 해결책은 모든 값을 명시적으로 설정하는 것입니다. 그렇죠? 이제 또 다른 단점이 보입니다. 로드 시간을 늘리는 코드 혼란. 우선, 테이블 자체만으로도 많은 코드가 필요합니다. 테이블 기반 레이아웃에는 평균 열기 및 닫기 태그가 몇 개 있나요? 톤. 모든 값을 명시적으로 설정하면 페이지 크기와 로드 시간만 늘어납니다. 이 주제에 대해 많은 실험이 수행되었습니다. 저는 StopDesign이 Microsoft 웹사이트를 테이블 기반 사이트에서 테이블 없는 레이아웃으로 리메이크한 실험에 대해 알려드리겠습니다. 해당 리메이크에서는 사이트의 파일 크기가 62% 감소했으며 Microsoft 사이트의 월별 평균 조회수를 사용하여 Microsoft가 일일 대역폭에서 924GIGS, 연간 329테라바이트의 대역폭을 절약할 것으로 계산했습니다. 대역폭 비용을 지불하는 회사의 경우 이러한 사항이 중요합니다. 
저희는 당신의 회사에 대해 매우 만족하고 있습니다.增加加载的时间。首先，表格本身包含了大weightative码，你可以数数看其中包含了几个“td”开始和结束标签，我想应该是很多吧。为了把它们设置的清楚一点，必须增加网页的尺寸从而导致下载时间延长。关于这个主题，我们已进行了多次实验。尽weight不要再使用表格进行布局了，看看微软的做法吧， 他们原来是使用表格布局的已经开始使用不表格布局了。研究表明，这种做法为该网站节省了62%过每月平均点击率计算，微软将每天节省924 GIGS的带宽，一年将节省329Terabytes的带宽。对于任何一家带宽较大的公하십시오，这样做city是不常必要的。
더 읽기 쉬운 코드

표준 코드, 의미론적 문서 규칙 및 테이블 없는 레이아웃을 사용하는 경우 코드가 매우 깔끔하여 몇 가지 추가 사항을 추가하면 실제적으로 일반 텍스트처럼 보일 수 있습니다. 기호. 
如果使用 是标准代码, 标准语义文档和不表格布局, 那么你的代码将看上去不常清楚, 简直就如同一並有一亪特殊符号的惯用文本。
이것은 매우 큰 이점입니다. 왜냐하면 이를 통해 업데이트가 더 쉬워질 뿐만 아니라 기술적 지식이 없는 사용자도 작은 변경 작업을 더 쉽게 수행할 수 있습니다. 또한, 프리랜서 자격으로 웹 개발자로 일하는 경우 해당 사이트를 유지 관리하는 정규 웹 개발자가 있는 것이 일반적입니다. 깔끔하고 읽기 쉬운 코드를 사용하면 쉽게 전환할 수 있습니다. 우리는 사람들이 코드를 이해하기 쉽게 떠나는 것을 좋아합니다. 그렇죠? 부탁을 갚읍시다. 
이용자는 그렇지 않은 사람들에게 적합하지 않습니다.另외，如果你是一个自由职业的网页设计师，你也可以让专业网页设计师记住你的网站 .为我们留下的是简单的代码，所以，当我们书写代码时，也考虑考虑这点吧。
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技术，读完这篇文章以及网站上其他相关的文章之后，你制作无表布局的网站只是时间问题了。