Over the last several years, developers have moved from table-based website structures to div-based structures. Hey, that’s great. But wait! Do developers know the reasons for moving to div-based structures, and do they know
Often it seems that people are moving away from table hell only to wind up in div hell.This article covers common problems with layout structure in web design
The first part goes through what table and div hells are, including lots of examples. The next section shows how to write cleaner and more readable code. The final part looks at what features await in future.
Please join us on this journey from hell to heaven.
1)Table Hell
MAMA(Metadata Analysis and Mining Application) is a structural Web page search engine from Opera Software
The table element is found on over 80% of the pages whose URLs were crawled by MAMA.
Semantically speaking, the table tag is meant for listing tabular data It is not optimized to build structure.（从语义上讲，table就是用来列出表格样式的数据，它没有用来针对结构布局进行优化。） Ease of use Using tables to build structure is quite
We see tabular data every day, and the concept is well known.
And the existence of table attributes makes for a rather flat learning curve because the developer doesn’t have to use a separate style sheet. With divs, the developer must use the style attribute or an external style sheet, because the div tag doesn’t have any attributes attached to it.
Also, tables don’t break when the content is too wide. Columns are not squeezed under other columns as they are in a div-based structure. This adds to the feeling that using tables is safe.
MaintainabilityTable contains different tags: the table
the table-based layout contains more code than the div-based version.（table布局比div布局需要更多的代码）
Imagine now if this difference in size stays consistent as the code base grows (by a ratio as much as 2:1). In a div-based structure, it is also possible to skip the menu div and use an unordered list (ul
Nested tables are code smell
The number of lines of code is endless, and the
Tables are far from clean code and don’t bring anything semantic to the content unless you’re dealing with actual tabular data. And if you’ve happened to inherit the maintenance of a website that has poor readability, it’s a nightmare. Nested tables are a poor substitution for semantically meaningful, block-level elements.
Another drawback to tables is that they make it harder to separate content from design. （table布局的另一个缺点是其很难将内容从设计中分离出来） The border
More lines of code mean larger file sizes, which mean longer download times. （更多的代码意味着更多的下载时间） Developers should keep in mind new media, such as mobile devices, which usually have low bandwidth. Websites will have to support media other than traditional monitors in future, and bad code limits the possibilities. A large code base has more bugs than a small one. Developers tend to produce a certain number of bugs per line of code. Because tables increase the code base, such structures likely contain more bugs than layouts with less code lines.Flexibility with media In an ideal world,
the same markup would be used for printers, mobile devices, screens and other media. Using tables for structure provides less flexibility in moving columns around and hiding entire columns. Your user may want to put the side column at the bottom or view a printer-friendly version. With tables, this would require
Div Hell
Websites in div hell have more div tags than are necessary. （如果web网站使用了过多的DIV，也是不恰当的）This is also known as “divitis.”
The div tag is a block-level element that defines
Divs are thus suitable for building the structure of Web pages. （div主要适用于页面结构布局）The div tag is also used to describe content that cannot be properly described by other more semantic tags. When developers do not understand the semantic(语义) meaning of other block-level elements,
they often add more div tags than are needed.
Ease of useDiv-based structures have a much steeper learning curve（陡峭学习曲线） than table-based structures.（div布局比table布局更难学习）
The developer must know CSS and understand the difference between block-level
elements and inline elements, when to use floats and when to use absolute positioning and how to solve browser bugs. The div element isn’t visual like the table element.
Everyone knows what a table looks like, but divs are not as obvious. The good thing about a div, though, is that it’s only one element. It’s not wrapped in a parent element the way td
The container, then, is
Using a div for structure can make a page more fragile（脆弱）
when content is pushing the div to its limit. It can also force columns to fall under each other. But this is usually only true for older browsers (particularly IE6); newer browsers make content flow to the next column.
Dealing with browser bugs can be a little tricky at first, but with experience developers can identify and fix them. Browser support for W3C
With the growing popularity of Firefox
MaintainabilityThe biggest problem with div tags is that
Nesting div tags deeply is a sure path to maintenance hell（深层次的div嵌套肯定也是大麻烦）, and the code will make developers think twice before touching it, simply because it’s so unreadable. True, using descriptive class and structure names makes the code more understandable, but using them for nested div tags is not always easy.
Too many div tags is code smell that content isn’t being described as it should. It means divs are being used when
for instance, headings should be wrapped in h1
Writing semantic code usually reduces the code base; and less divs with floats helps keep browser bugs away.(例如标题应该使用h标签，使用有语义的标签使代码更少，并且更少的带有浮动属性的div意味着能远离浏览器bug）
Of course, ids and classes can carry semantic values that no other tags have. The problem is that these values are not standardized. For example, div id="banner"
One interesting technology is microformats, which are built on the idea of semantic classes. With the help of special standardized formats, content can be automatically processed by microformat-aware software.
53.54% of all websites indexed by MAMA contain a style
Classes and ids would also facilitate access to elements in the document object model
While humans are capable of finding the Norwegian word for “monkey” using the Web, computers cannot do this without human direction. That’s why it’s very important to use tags that describe content properly.
Here are a couple more reasons why machines need to be able to understand website content:
- Spiders crawl websites, indexing pages for search engines. Adding semantic meaning to content probably makes websites rank higher. (给内容增加语义，可以使为搜索引擎索引页的网络爬虫将网页排名更靠前）
- Screen readers are used by people with visual impairments. They read content out loud to the user or send it to a braille display that the user reads with his or her fingers. Also, visually impaired people use the keyboard to navigate and use a wide range of keyboard commands. They can also get lists of all headings and links on a page, and each of those lists has meta information on how many elements it contains. Setting the language attribute is also important so that screen readers read content in the correct language. The importance of semantic markup is illustrated by comparing the strong
and b tags. The strong tag adds semantic meaning to the content; and b tag adds only visual meaning. As a result, people using screen readers won’t get the same information from that content as people seeing it visually（语义标签的重要性可以通过如下例子阐述，比较strong标签和b标签，两者都用于加粗文本，strong给内容增加了语义，但b标签只是是增加了视觉效果。因此，有视力力障碍使用屏幕阅读器的人无法得到和能看见这段加粗文字的人一样的信息。）. Many countries have laws that prescribe accessibility support for government websites. Others will follow. Every extra div the developer adds makes the code harder to read. More lines of code lead to longer download times, and so on. This all rings of the code smell we get from table-based layouts. Overusing div tags is as bad as having a table-based layout , except that it is more flexible with media.
Headings
Headings created like this add only visual effect to the content. Their semantic value is lost, and screen readers and web spiders can’t tell they’re headings.(This is the same as what we see when b
is used instead of strong .)
News list developers who don’t see the potential of list elements often use divs instead.Lists save some class definitions and help screen readers know how many items there are.
Different widths for containersWhen every column on a website is given its own container, many unnecessary div ids are created. This can easily be rectified by adding a class to the bodytag. Let each container simply inherit the class of the body tag and then give each page its own layout in the style sheet. This makes it easy to read the content and page. The improved readability of both the HTML and style sheet simplifies maintenance.
Flexibility with mediaEven a website in div hell can be flexible with different media as long as the design is separated from the content and put in the style sheet. Read the excellent article “Going to Print” on A List Apart for guidelines on building a printer-friendly version of your website. This is beyond the scope of this article, but it’s important to point out that a div-based structure is more flexible in supporting different media than a table-based structure.
Not having to maintain separate pages for each media saves maintenance and development costs(需要指出的是，div布局比table布局，对不同的媒体终端具有更大的灵活性，不需要针对每一终端开发一个独立页面，因此节省了开发和维护成本）. A div-based structure allows you to move columns around and
even hide columns using display: none
in the style sheet.
When a website is in div hell and has a lot of floats, finding out whichfloats to disable to avoid printing bugs on Gecko-based browsers like Netscape 6.x and Mozilla ’s is very hard. These browsers do not print long floating elements well. If a floating element runs past the bottom of a printed page, the rest of the float effectively disappears and is not printed on the next page.
From Hell To Heaven Using divs correctly
Before creating a div, the developer should consider, “Do I really need this, or can I do this with a block-level element?” Liberal use of h1to h5 for headings and ul and dl for lists helps a lot, and don’t forget the paragraph tag. Another element that doesn’t need div wrapping is form . For more flexibility with forms, try combining the fieldset element with a list:（在使用div之前，开发者需要考虑是否真的需要它。是否别的块级元素也能完成任务。使用h1到h5，对列表使用ul以及dl能够有很大帮助，并且不要忘了使用段落标签。另一个不需要用div包含的元素是表单，为了更大的灵活性，试着在列表中使用fieldset元素来完成。） that way, the content has semantic value, and the developer has block-level elements to design with.
Because a div element marks up only one block at a time, thecode base is much smaller than that of a table-based structure. Less code is code that is more readable, easier to maintain, faster to develop, less buggy, smaller in size, you get the point. You want as little code as possible to do the job right.
When a structure is tagged correctly, more divs are needed only for graphics. When we can’t put background-color, border , background-image , etc. on a block-level element, introducing a div is okay.（当正确使用标签时，更多的div标签用于图形。当我们不能在块级元素上使用背景色，边框，背景图片等时，引入div是好的。） Clean code shouldn’t stand in the way of a good graphic design .
See how many block-level elements Yahoo has on its home page. This screenshot, with tables and block-level elements outlined, was taken with the [url=https://addons.mozilla.org/en-US/firefox/addon/60]Web Developer [/url] plug-in for Firefox. Could Yahoo have used fewer containers?
Tips and tricksLet’s go through some basic examples. The examples below should inspire developers to dig deeper into the subject of clean code and ways to avoid divitis. Notice how the semantics in the code help keep the code readable.
A menu as a list is easier to use than as a div and saves many lines of codes. The li tag is a block-level element that can have background properties attached to it, as it is the anchor tag if its display attribute is set to block in the style sheet（用list元素实现菜单比用div更能节省代码，li标签做为块级元素来说，如果display属性被设置为block，就能够对其包含的内容使用背景属性。）. Two block-level elements exist to contain the beginning and end of each menu item’s layout. Using a list also makes the page more accessible for people with disabilities and allows you to nest lists for sub-menus. Use headings where possible. They add semantic value to content and boost website rankings in search engines（可能时使用标题，它们给内容增加了语义，能够提升在搜索引擎中的排名）. They also help people who use screen readers access and understand content.News list Group similar pieces of content together and put them in lists（类似新闻列表的内容应该放在list标签中）. It’s amazing how much of the web is in lists. Lists are perfect containers. They save many lines of code and make code much more understandable than it would be with tables or a mess of divs. And lists let people with screen readers know how many elements they contain. So many main pages of websites already contain lists of news.
Different widths for containers With a class for body, there is no need for contentSmall , contentNormal , contentWider and so on. Simply refer to the container through the body parent class and then control the width in the style sheet（这段还不太理解，好像意思是说，针对不同宽度的容器，使用类来修饰body元素，不需要针对每个容器各自实现很多类。让容器从body这个父类中继承属性，然后在style sheet样式表中控制宽度）. The style sheet will be more readable, and the developer won’t need to refer to so many bad classes. The page type (body class) will tell you which one to refer to.
List post dataUse the dltag when listing key value pairs. Many people would probably use a table for this purpose. But using the dl tag saves code and makes it possible to float the dt and dd tags and set their widths for a nice layout. （当列出键值对数据时，使用dl标签。更多的人喜欢用table标签来实现，但使用dl节省了代码，使用dt和dd更容易浮动，为了好的布局设置它们的宽度。）The dl tag semantically links the dd to the dt tag. Both dt and dd are block-level elements.
Simple formGetting a nice layout with forms can often be quite messy. Nested tables are often used for this purpose. But using lists instead tells screen readers how many elements a form contains. The fieldsetis a block-level element that groups related data and can be nicely designed using CSS.（嵌套表格经常用于实现表单，但是使用list代替，能够告诉屏幕阅读器表单包含了多少元素。filedset（是啥东东？input这样的标签？）是块级元素，能够分组相关数据，并使用CSS来很好的进行设计。）
Usingdivs to manage structure (header, menu, footer and so on)使用div来管理结构，头部，菜单，尾部等） and using other block elements, like p , ul , dl and form , where appropriate would make the world a much easier place to live. Lists are already widely used and perfect as containers. And don’t forget to include a class with your body tag（不要忘了给body加上类标签，这个主要用来干嘛？）. When developers start coding cleanly and semantically, they never look back.
Tips on Moving From a Table- to Div-Based Structure（从table布局向div布局迁移时注意的要点） - Work your way
from the outer table to the inner table. Remove tables one by one and replace them with proper markup that describes their content. Perhaps table aren’t even needed. Starting with the outer table will make the rest of the code more readable. If the outer tables are part of a framework, removing them may affect multiple pages. It’s also a good idea to work on the most important or popular pages first. - Don’t introduce new tables unless they are used for tabular data. （除非用于表格样式的数据，不要引入新的table标签）
- Separate design and content. Put layout-specific code in the style sheet, and let the markup tell the browser what kind of content it is. （将设计从内容中分离，并将布局代码放入样式表，让标签只告诉浏览器是哪类内容）
- Every time someone works on a page, she or he should check if the code can improved a bit, whether by making it more semantic, more readable or cleaner.
- It would probably cost more to replace the whole system than fix it bit by bit, especially if it’s a large website.
- Don’t continue writing bad code if the website already contains bad code. Write good semantic code and remind yourself that the bad code will eventually be replaced. Writing
good code saves time in the end. Make a difference now, right away by writing only clean, semantic code. original post in，there are lots of details:
http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
