为什么_not_使用html表进行布局[重复]

时间：2022-09-19 06:05:56

This question already has an answer here:

这个问题在这里已有答案:

I have been pondering on this over the last couple of days. I'm currently writing a web application (actually adding a screen to an existing, extensive application). I know that using "tables" for layout is a big no-no. But in this app, all of the pages use tables for layout. I decided to do my new page using divs instead. But I came across 2 hurdles.

在过去的几天里,我一直在思考这个问题。我正在编写一个Web应用程序(实际上是在现有的广泛应用程序中添加一个屏幕)。我知道使用“表格”进行布局是一个很大的禁忌。但在这个应用程序中,所有页面都使用表格进行布局。我决定使用div来做我的新页面。但我遇到了2个障碍。

  1. A lot of the layout stuff that I need to do were already done on the other pages and if I use divs instead, I cant reuse any of that (CSS's and JS and that kinda stuff). That leads to more work and pushes out my completion date.

    我需要做的很多布局工作已经在其他页面上完成了,如果我改用div,我就无法重用其中任何一个(CSS和JS以及那种东西)。这导致了更多的工作并推迟了我的完成日期。

  2. Some of the more complex parts of the layout are really difficult to do using divs and are really easy to do using tables. Maybe its just me being "old-school"y as I am not much of a web/html kinda guy (I get by).

    布局的一些更复杂的部分使用div很难做到,并且使用表格很容易。也许它只是我“老派”,因为我不是一个web / html有点人(我过去了)。

So, why can't I use tables? I'm not trying to be argumentative, just want to see if there are any compelling arguments beyond the "Its the right thing to do" type stuff. I know it is the right thing to do. I'd like to know why?

那么,为什么我不能使用表格呢?我不是想争论,只是想看看是否有任何令人信服的论点超出了“它是正确的事情”类型的东西。我知道这是正确的做法。我想知道为什么?

16 个解决方案

#1

Implementing your layout with divs, spans, etc, offers a ton more flexibility over tables. Consider floating, auto wrapping of block content vs. horizontal scrolling, specifying where an element should exist on a page, etc. Content is just plain easier to manipulate via CSS when not using tables.

使用div,span等实现布局比表更灵活。考虑浮动,自动包装块内容与水平滚动,指定元素应该存在于页面上的位置等。当不使用表时,内容通过CSS更容易操作。

When using tables you're pretty locked in to a strict structure.

使用表格时,你们已经陷入了严格的结构。

Now that doesn't mean it's absolutely the wrong thing to do. From your information I'd likely stick with the theme of the application for consistency sake and implement using tables. Make the best choice for the situation vs. following "the rules" on what's popular right now.

现在,这并不意味着它完全是错误的。根据您的信息,我可能会坚持使用应用程序的主题,以保持一致性并使用表格实现。对于现状做出最好的选择,而不是现在流行的“规则”。

Hope that helps! Ian

希望有所帮助!伊恩

#2

Doing css layouts make it easier to change the layout of your page later on. Tables also make your html harder to read and edit.

执行css布局可以更轻松地在以后更改页面布局。表格也使您的HTML难以阅读和编辑。

According to this page..

根据这个页面..

  • make your redesigns more efficient and less expensive

    • 让您的重新设计更高效,更便宜

  • help you maintain visual consistency throughout your sites

    • 帮助您保持整个站点的视觉一致性

  • get you better search engine results when you minimize your markup and use header tags properly. This reduces ratio of code to content.

    • 在最小化标记并正确使用标题标记时,可以获得更好的搜索引擎结果。这降低了代码与内容的比率。

  • make your sites more accessible to all viewers and user agents.

    • 使您的网站更易于所有查看者和用户代理访问。

  • your pages load faster, file sizes will be smaller because table information isn't needed in every page.

    • 您的页面加载速度更快,文件大小会更小,因为每个页面都不需要表格信息。

  • and give you a competitive edge (that is, job security) as more of the world moves to using Web standards.

    • 随着世界越来越多地使用Web标准,您将获得竞争优势(即工作安全性)。

#3

I'm going to post a contrarian view, just so you have some ammo. I realize this doesn't answer your question (why not use tables) but it does address the other responses you will see.

我要发布逆向观点,只是你有一些弹药。我意识到这不能回答你的问题(为什么不使用表格),但它确实解决了你将看到的其他答案。

So be practical.

所以要切合实际。

That said, most of my designs use pure CSS. Nearly everything can be done in CSS just as easily as with tables (or even easier.) Start with the assumption that DIVs can do it, and maybe fall back on 1 table for a tricky multi-column layout. Even then, someone has probably found a solution for your layout so search first.

也就是说,我的大部分设计都使用纯CSS。几乎所有东西都可以在CSS中完成,就像使用表格一样容易(甚至更容易)。首先假设DIV可以做到这一点,并且可能会回到1个表格中以获得棘手的多列布局。即便如此,有人可能已经为您的布局找到了解决方案,因此请先搜索。

#4

They are also bad for accessibility reasons i.e. screen readers don't read them correctly, but this is only if the data you are representing is not tabular data.

它们也因可访问性原因而不好,即屏幕阅读器无法正确读取它们,但这仅在您表示的数据不是表格数据时才会出现。

Saying that, due to deadlines etc. (the real world) I've resorted to using them for form layout because it's just so much easier.

说,由于截止日期等(现实世界),我已经使用它们进行表单布局,因为它更容易。

#5

Because the tag <table> implies it should contain tabular data.

因为标签

意味着它应该包含表格数据。

Like Peter said, the universe won't implode if you do create table-based layout, but semantically, this should be avoided.

就像彼得所说,如果你创建基于表格的布局,宇宙不会崩溃,但从语义上讲,应该避免这种情况。

Semantics become increasingly important, since web pages are not always shown in a desktop browser anymore. Web standards are developing in a way that HTML describes the semantic structure of the document, not the markup; and as said: using <table> tags for tabular data is semantically correct.

语义变得越来越重要,因为网页不再总是在桌面浏览器中显示。 Web标准的发展方式是HTML描述文档的语义结构,而不是标记;并且如上所述:使用表格数据的

标签在语义上是正确的。

Interesting related reads:

有趣的相关读物:

#6

First, you can usually convert a table layout to divs without too much trouble once you know the necessary CSS.

首先,一旦您知道必要的CSS,通常可以将表格布局转换为div而不会有太多麻烦。

But more to the point, some of the reasons why tables are bad:

但更重要的是,表格不好的一些原因:

  • Not all your users are going to see the page using the browser's rendering engine. Some are going to use a screen reader, which may assume that when it encounters a table, it should actually read the contents out as tabular data. Essentially, you should think of it as a coincidence that tables have a certain layout "look" in a browser.

    • 并非所有用户都会使用浏览器的渲染引擎查看该页面。有些人会使用屏幕阅读器,它可能会假设当遇到表格时,它实际上应该将内容读取为表格数据。从本质上讲,您应该认为表格在浏览器中具有某种“外观”的巧合。

  • tables can't be rendered until the table and all its children have been parsed. A div can be rendered independently of its children, so you avoid the page contents jumping up and down on the page as the page is parsed, and get to show contents sooner.

    • 在解析表及其所有子项之前,无法呈现表。 div可以独立于子节点呈现,因此您可以避免页面内容在页面解析时在页面上上下跳动,并且可以更快地显示内容。

There are good and valid reasons to prefer tables, but when you're used to tables, there's also a certain learning curve, so if you're pressed for time, this might not be the time to make that switch.

有更好和有效的理由来选择表格,但是当你习惯于表格时,也会有一定的学习曲线,所以如果时间紧迫,可能不是进行这种转换的时候。

#7

If you have the kind of constraints you mentioned, deadline looming, large existing code base, then use tables, the universe won't implode, but in the long term using css and welformed markup will allow you to create a nicer, cleaner, more maintainable website.

如果你有你提到的那种约束,截止日期迫在眉睫,大量现有代码库,然后使用表格,宇宙不会崩溃,但从长远来看,使用css和welformed标记将允许你创建更好,更清洁,更多可维护的网站。

#8

Tables are pretty ugly if you want to support text to speech readers (if you've got any kind of accessibility requirements, you pretty much have to use tables for tables and nothing else).

如果你想支持文本到语音阅读器,表格是非常难看的(如果你有任何类型的可访问性要求,你几乎不得不使用表格来表示其他内容)。

There is an SEO aspect of this as well. For SEO, it's better to have your content at the top of the page than at the bottom. (Sadly, studies suggest appears that putting a menu first is actually a good idea for accessibility, so the two imperatives *.)

这也有SEO方面。对于SEO,最好将您的内容放在页面顶部而不是底部。 (可悲的是,研究表明,首先放置菜单实际上是可访问性的一个好主意,因此两个命令会发生冲突。)

If you are having trouble with cross-browser support, I can suggest that you develop using Firefox. Its support for CSS development is much better than other browsers, and it's more standards-compliant (and hence more predictable). Later on, you can patch up for down-level browsers.

如果您在跨浏览器支持方面遇到问题,我建议您使用Firefox进行开发。它对CSS开发的支持比其他浏览器好得多,并且它更符合标准(因此更具可预测性)。稍后,您可以修补低级浏览器。

And, as Peter says, the universe won't implode. But using CSS for layout is cleaner in the long term. Redesigning something with the layout hard-coded can be a real pain. Check out the CSS Zen Garden for examples of what you can do. Of course, in the future, we'll have CSS table layouts, the best of both worlds.

并且,正如彼得所说,宇宙不会崩溃。但从长远来看,使用CSS进行布局更加清晰。重新设计具有硬编码布局的东西可能是一个真正的痛苦。查看CSS Zen Garden,了解您可以做些什么。当然,在未来,我们将拥有CSS表格布局,两全其美。

#9

Tables also affect the behaviour of search engines. Using CSS instead of tables is actually an SEO technique as well. The reason I heard for this is that search engines stop indexing after a certain level of tags, and layout using tables can become very deeply nested.

表也​​会影响搜索引擎的行为。使用CSS而不是表格实际上也是一种SEO技术。我听到这个的原因是搜索引擎在一定级别的标签之后停止索引,并且使用表格的布局可以变得非常深层嵌套。

#10

Using CSS for layout, rather than HTML tables provides a level of separation between your page content and the layout of that content.

使用CSS进行布局,而不是使用HTML表格,可以在页面内容和内容布局之间实现一定程度的分离。

With tables, your HTML markup has both your content and layout intermingled within the HTML code. This means is you ever want to have a different layout for the same content, you'll need to edit the intermingled code heavily.

使用表格,您的HTML标记将您的内容和布局混合在HTML代码中。这意味着您希望为相同的内容设置不同的布局,您需要大量编辑混合代码。

By using a CSS stylesheet over your HTML markup you separate the code that provides the content (HTML) from the code that provides the layout (CSS). This makes it far easier to completely change the layout aspect of a web page without having to edit the content code.

通过在HTML标记上使用CSS样式表,可以将提供内容(HTML)的代码与提供布局(CSS)的代码分开。这使得完全更改网页的布局方面变得更加容易,而无需编辑内容代码。

The best example of this is the CSS Zen Garden website.

最好的例子是CSS Zen Garden网站。

All that said, it's still far easier to do some layout techniques in tables rather than CSS, so there's definitely a "balancing act" there. (For example, even Google uses tables in it's page layouts!)

总而言之,在表格而不是CSS中进行一些布局技术仍然要容易得多,因此肯定存在“平衡行为”。 (例如,即使Google在其页面布局中使用表格!)

#11

By using tables for layout you tie the content to the formatting, this is the main point that most of the disadvantages come from. It messes up the source, complicates site-wide formatting updates that could be easily done with CSS, etc. Using tables for layout also often means slicing images on weird places just to fit them in the cells, yuck.

通过使用表格进行布局,您可以将内容与格式相关联,这是大多数缺点的主要原因。它弄乱了源代码,使用CSS等方便地完成的站点范围的格式化更新变得复杂。使用表格进行布局也常常意味着在奇怪的地方切片图像只是为了让它们适合单元格,哎呀。

#12

you can use tables, but divs have more advantages. but it's all in perspective. Like you say, you are precious for time, so probably (on short notice) tables will be the choice to make. However, if you manage to make it div-wise, you will have a more maintable page, which you can use to refactor the other pages as well.

你可以使用表,但div有更多的优点。但这一切都是透视的。就像你说的那样,你是时间宝贵的,所以很可能(在短时间内)表格将是你的选择。但是,如果您设法使其成为div,那么您将拥有一个更易于维护的页面,您可以使用它来重构其他页面。

#13

Jeffrey Zeldman wrote a great book on this topic: Designing With Web Standards. This book should be mandatory reading for every web designer.

Jeffrey Zeldman写了一本关于这个主题的好书:使用Web标准进行设计。这本书应该是每个网页设计师的必读书。

Here are some reasons why tables for design are bad

以下是设计表不好的一些原因

  • Tables generate more markup -> More bandwidth usage

    • 表生成更多标记 - >更多带宽使用

  • Tables makes it harder for search engines to index your pages -> Your site becomes less "searchable"

    • 表格使搜索引擎难以为您的网页编制索引 - >您的网站变得不那么“可搜索”

  • Tables makes it harder to change and tweak the visible appearance of your site -> More costly redesigns

    • 表格更难以改变和调整网站的可见外观 - >更昂贵的重新设计

  • ...But most importantly: using tables for design adds presentation logic to your markup

    • ...但最重要的是:使用表格进行设计会为您的标记添加表示逻辑

That is bad because you want to separate your presentation from your content! HTML should only define WHAT your content is, not HOW it should look.

这很糟糕,因为您想要将您的演示文稿与您的内容分开! HTML应该只定义您的内容是什么,而不是它应该如何。

If you obtain this level of separation your site will...

如果您获得此级别的分离,您的网站将...

  • ...be more accessible by different kinds of browsers and other kinds of user agents.

    • ...更容易被不同类型的浏览器和其他类型的用户代理访问。

  • ...make redesigns much easier

    • ...使重新设计更容易

#14

The best you do not listen to the fanatics of CSS. These purists live in some imaginary world and will feed you the arguments of some abstract purity, semantics and the rest. You would not want to have this kind of people in your team. For now I've only seen yellow-mouth students to run around with "pure CSS design" ideas. They'll show you examples of very primitive CSS-designed sites, ignoring you whenever you ask them how you can accomplish some complex enterprise software design with it. Experienced developers already know this perfection is not possible.

最好不要听CSS的*分子。这些纯粹主义者生活在一些想象的世界中,并将为你提供一些抽象的纯度,语义和其他的论据。你不希望你的团队中有这样的人。现在我只见过黄嘴学生用“纯CSS设计”的想法。他们将向您展示非常原始的CSS设计网站的示例,无论何时您询问他们如何使用它完成一些复杂的企业软件设计,都会忽略它。经验丰富的开发人员已经知道这种完美是不可能的。

What should you do? Follow the KISS principle. If CSS can help you implement your particular design idea, fine, the problem is solved. If you need to resort to some relatively uncomplex hack, it may be okay. But when it comes to some huge piece of code with dozens of rules to make a basic thing, which you easily and naturally achieve with tables, drop it.

你该怎么办?遵循KISS原则。如果CSS可以帮助您实现您的特定设计理念,那么问题就解决了。如果你需要诉诸一些相对不复杂的黑客,它可能没问题。但是当涉及到一些代码的大量代码来制作一个基本的东西时,你可以轻松自然地用表格来实现这一点。

It serves no purpose to create an incredibly complex and sophisticated tricky CSS design that noone else (and yourself after a couple of months) will be able to understand and support.

创建一个令人难以置信的复杂而复杂的棘手CSS设计是没有用的,没有其他人(以及几个月后你自己)能够理解和支持。

As for the "easy redesign", unless you only want to change colors and fonts, you will enevitably have to restructure your markup whether it is done with tables or without them. In the latter case, a high portion of your markup will serve no purpose except implement CSS trickery which will be useless for you new redesign idea.

至于“轻松重新设计”,除非您只想更改颜色和字体,否则无论是使用表格还是不使用表格,您都必须重新构建标记。在后一种情况下,除了实现CSS技巧之外,标记的很大一部分没有用处,这对于你的新重新设计想法是没用的。

Honestly, it's not your fault that the people responsible for further development of HTML/CSS don't do their job properly. You should not waste your and other people's time trying to find workarounds for something that should have been there ages ago.

老实说,负责进一步开发HTML / CSS的人员不能正常工作,这不是你的错。你不应该浪费你和其他人的时间来寻找应该在很久以前就已存在的东西的变通办法。

HTML/CSS is a good example of how poorly some committee could do their job and brake the development of technology as compared to a single company with resources and commitment.

与具有资源和承诺的单一公司相比,HTML / CSS是一个很好的例子,说明一些委员会如何能够完成工作并制止技术发展。

#15

"The right thing to do" depends on your situation.

“正确的做法”取决于你的情况。

Yes, divs offer more flexibility, but at the end of the day, do you really need it? As far as the number of lines of code goes, I have found that a simple table is often quite a bit smaller that an equivalent div design.

是的,div提供了更多的灵活性,但在一天结束时,你真的需要吗?就代码行数而言,我发现一个简单的表通常比同等的div设计小得多。

It's faster to put together, and it works as reliably as possible in pretty much all browsers, which means you don't have to write a zillion hacks to make it work consistently AND it doesn't break down when a new display engine comes out.

它组合起来更快,并且它在几乎所有浏览器中都尽可能可靠地运行,这意味着您不必编写数十亿个黑客来使其一致地工作并且当新的显示引擎出现时它不会崩溃。

Using tables for display is technically a hack, but it does the job, is easy to understand and maintain and is to a large degree future proof, so for a simple layout, considering that the rest of the website already uses tables for layout, I would keep using tables.

使用表格进行显示在技术上是一个黑客,但它完成工作,易于理解和维护,并在很大程度上未来证明,所以对于一个简单的布局,考虑到网站的其余部分已经使用表格进行布局,我会继续使用表格。

Besides, turning a Table into a "div" table which uses the new "display=table" attributes can easily be done with a few regexes (if you rack your brains, you can probably even do it with a single pass). If you know your regexes, you can replace a table with divs through an entire website in a matter of minutes, so the whole issue of flexibility is really not that big: when (if) you actually need to use divs and CSS positioning, just run a few regex, and you are set. And if you need more control than what you can handle from regex, you can spend a couple hours to write a quick & dirty parser that will convert your tables to div exactly as you want them.

此外,将表格转换为使用新“display = table”属性的“div”表可以通过几个正则表达式轻松完成(如果你绞尽脑汁,你甚至可以通过一次通过来完成它)。如果你知道你的正则表达式,你可以在几分钟内通过一个整个网站替换一个表格,所以整个灵活性问题真的不是那么大:当(如果)你真的需要使用div和CSS定位时,运行一些正则表达式,你就定了。如果你需要比正则表达式更多的控制,你可以花几个小时来编写一个快速和脏的解析器,它将你的表格完全转换为div。

Bottom line is that despite the stigma, for simple layouts, tables still do the job, they do it fast and are reliable, and if you don't have to contend with CSS purists, you can save yourself a lot of work.

最重要的是,尽管存在耻辱,但对于简单的布局,表仍然可以完成工作,它们可以快速且可靠地运行,如果您不必与CSS纯粹主义者竞争,您可以节省大量的工作。

#16

CSS layouts make it easier to alter the layout through stylesheets (separation of data from display).

CSS布局使得通过样式表(从显示中分离数据)更容易改变布局。

Also, browsers often can't render a table until the </table> tag has been parsed. This can be a problem if you are using a table with a large amount of content. CSS layouts can often be rendered as they go.

此外,在解析 标记之前,浏览器通常无法呈现表。如果您使用的是包含大量内容的表,则可能会出现问题。 CSS布局通常可以随时进行渲染。

#1

Implementing your layout with divs, spans, etc, offers a ton more flexibility over tables. Consider floating, auto wrapping of block content vs. horizontal scrolling, specifying where an element should exist on a page, etc. Content is just plain easier to manipulate via CSS when not using tables.

使用div,span等实现布局比表更灵活。考虑浮动,自动包装块内容与水平滚动,指定元素应该存在于页面上的位置等。当不使用表时,内容通过CSS更容易操作。

When using tables you're pretty locked in to a strict structure.

使用表格时,你们已经陷入了严格的结构。

Now that doesn't mean it's absolutely the wrong thing to do. From your information I'd likely stick with the theme of the application for consistency sake and implement using tables. Make the best choice for the situation vs. following "the rules" on what's popular right now.

现在,这并不意味着它完全是错误的。根据您的信息,我可能会坚持使用应用程序的主题,以保持一致性并使用表格实现。对于现状做出最好的选择,而不是现在流行的“规则”。

Hope that helps! Ian

希望有所帮助!伊恩

#2

Doing css layouts make it easier to change the layout of your page later on. Tables also make your html harder to read and edit.

执行css布局可以更轻松地在以后更改页面布局。表格也使您的HTML难以阅读和编辑。

According to this page..

根据这个页面..

  • make your redesigns more efficient and less expensive

    • 让您的重新设计更高效,更便宜

  • help you maintain visual consistency throughout your sites

    • 帮助您保持整个站点的视觉一致性

  • get you better search engine results when you minimize your markup and use header tags properly. This reduces ratio of code to content.

    • 在最小化标记并正确使用标题标记时,可以获得更好的搜索引擎结果。这降低了代码与内容的比率。

  • make your sites more accessible to all viewers and user agents.

    • 使您的网站更易于所有查看者和用户代理访问。

  • your pages load faster, file sizes will be smaller because table information isn't needed in every page.

    • 您的页面加载速度更快,文件大小会更小,因为每个页面都不需要表格信息。

  • and give you a competitive edge (that is, job security) as more of the world moves to using Web standards.

    • 随着世界越来越多地使用Web标准,您将获得竞争优势(即工作安全性)。

#3

I'm going to post a contrarian view, just so you have some ammo. I realize this doesn't answer your question (why not use tables) but it does address the other responses you will see.

我要发布逆向观点,只是你有一些弹药。我意识到这不能回答你的问题(为什么不使用表格),但它确实解决了你将看到的其他答案。

So be practical.

所以要切合实际。

That said, most of my designs use pure CSS. Nearly everything can be done in CSS just as easily as with tables (or even easier.) Start with the assumption that DIVs can do it, and maybe fall back on 1 table for a tricky multi-column layout. Even then, someone has probably found a solution for your layout so search first.

也就是说,我的大部分设计都使用纯CSS。几乎所有东西都可以在CSS中完成,就像使用表格一样容易(甚至更容易)。首先假设DIV可以做到这一点,并且可能会回到1个表格中以获得棘手的多列布局。即便如此,有人可能已经为您的布局找到了解决方案,因此请先搜索。

#4

They are also bad for accessibility reasons i.e. screen readers don't read them correctly, but this is only if the data you are representing is not tabular data.

它们也因可访问性原因而不好,即屏幕阅读器无法正确读取它们,但这仅在您表示的数据不是表格数据时才会出现。

Saying that, due to deadlines etc. (the real world) I've resorted to using them for form layout because it's just so much easier.

说,由于截止日期等(现实世界),我已经使用它们进行表单布局,因为它更容易。

#5

Because the tag <table> implies it should contain tabular data.

因为标签

意味着它应该包含表格数据。

Like Peter said, the universe won't implode if you do create table-based layout, but semantically, this should be avoided.

就像彼得所说,如果你创建基于表格的布局,宇宙不会崩溃,但从语义上讲,应该避免这种情况。

Semantics become increasingly important, since web pages are not always shown in a desktop browser anymore. Web standards are developing in a way that HTML describes the semantic structure of the document, not the markup; and as said: using <table> tags for tabular data is semantically correct.

语义变得越来越重要,因为网页不再总是在桌面浏览器中显示。 Web标准的发展方式是HTML描述文档的语义结构,而不是标记;并且如上所述:使用表格数据的

标签在语义上是正确的。

Interesting related reads:

有趣的相关读物:

#6

First, you can usually convert a table layout to divs without too much trouble once you know the necessary CSS.

首先,一旦您知道必要的CSS,通常可以将表格布局转换为div而不会有太多麻烦。

But more to the point, some of the reasons why tables are bad:

但更重要的是,表格不好的一些原因:

  • Not all your users are going to see the page using the browser's rendering engine. Some are going to use a screen reader, which may assume that when it encounters a table, it should actually read the contents out as tabular data. Essentially, you should think of it as a coincidence that tables have a certain layout "look" in a browser.

    • 并非所有用户都会使用浏览器的渲染引擎查看该页面。有些人会使用屏幕阅读器,它可能会假设当遇到表格时,它实际上应该将内容读取为表格数据。从本质上讲,您应该认为表格在浏览器中具有某种“外观”的巧合。

  • tables can't be rendered until the table and all its children have been parsed. A div can be rendered independently of its children, so you avoid the page contents jumping up and down on the page as the page is parsed, and get to show contents sooner.

    • 在解析表及其所有子项之前,无法呈现表。 div可以独立于子节点呈现,因此您可以避免页面内容在页面解析时在页面上上下跳动,并且可以更快地显示内容。

There are good and valid reasons to prefer tables, but when you're used to tables, there's also a certain learning curve, so if you're pressed for time, this might not be the time to make that switch.

有更好和有效的理由来选择表格,但是当你习惯于表格时,也会有一定的学习曲线,所以如果时间紧迫,可能不是进行这种转换的时候。

#7

If you have the kind of constraints you mentioned, deadline looming, large existing code base, then use tables, the universe won't implode, but in the long term using css and welformed markup will allow you to create a nicer, cleaner, more maintainable website.

如果你有你提到的那种约束,截止日期迫在眉睫,大量现有代码库,然后使用表格,宇宙不会崩溃,但从长远来看,使用css和welformed标记将允许你创建更好,更清洁,更多可维护的网站。

#8

Tables are pretty ugly if you want to support text to speech readers (if you've got any kind of accessibility requirements, you pretty much have to use tables for tables and nothing else).

如果你想支持文本到语音阅读器,表格是非常难看的(如果你有任何类型的可访问性要求,你几乎不得不使用表格来表示其他内容)。

There is an SEO aspect of this as well. For SEO, it's better to have your content at the top of the page than at the bottom. (Sadly, studies suggest appears that putting a menu first is actually a good idea for accessibility, so the two imperatives *.)

这也有SEO方面。对于SEO,最好将您的内容放在页面顶部而不是底部。 (可悲的是,研究表明,首先放置菜单实际上是可访问性的一个好主意,因此两个命令会发生冲突。)

If you are having trouble with cross-browser support, I can suggest that you develop using Firefox. Its support for CSS development is much better than other browsers, and it's more standards-compliant (and hence more predictable). Later on, you can patch up for down-level browsers.

如果您在跨浏览器支持方面遇到问题,我建议您使用Firefox进行开发。它对CSS开发的支持比其他浏览器好得多,并且它更符合标准(因此更具可预测性)。稍后,您可以修补低级浏览器。

And, as Peter says, the universe won't implode. But using CSS for layout is cleaner in the long term. Redesigning something with the layout hard-coded can be a real pain. Check out the CSS Zen Garden for examples of what you can do. Of course, in the future, we'll have CSS table layouts, the best of both worlds.

并且,正如彼得所说,宇宙不会崩溃。但从长远来看,使用CSS进行布局更加清晰。重新设计具有硬编码布局的东西可能是一个真正的痛苦。查看CSS Zen Garden,了解您可以做些什么。当然,在未来,我们将拥有CSS表格布局,两全其美。

#9

Tables also affect the behaviour of search engines. Using CSS instead of tables is actually an SEO technique as well. The reason I heard for this is that search engines stop indexing after a certain level of tags, and layout using tables can become very deeply nested.

表也​​会影响搜索引擎的行为。使用CSS而不是表格实际上也是一种SEO技术。我听到这个的原因是搜索引擎在一定级别的标签之后停止索引,并且使用表格的布局可以变得非常深层嵌套。

#10

Using CSS for layout, rather than HTML tables provides a level of separation between your page content and the layout of that content.

使用CSS进行布局,而不是使用HTML表格,可以在页面内容和内容布局之间实现一定程度的分离。

With tables, your HTML markup has both your content and layout intermingled within the HTML code. This means is you ever want to have a different layout for the same content, you'll need to edit the intermingled code heavily.

使用表格,您的HTML标记将您的内容和布局混合在HTML代码中。这意味着您希望为相同的内容设置不同的布局,您需要大量编辑混合代码。

By using a CSS stylesheet over your HTML markup you separate the code that provides the content (HTML) from the code that provides the layout (CSS). This makes it far easier to completely change the layout aspect of a web page without having to edit the content code.

通过在HTML标记上使用CSS样式表,可以将提供内容(HTML)的代码与提供布局(CSS)的代码分开。这使得完全更改网页的布局方面变得更加容易,而无需编辑内容代码。

The best example of this is the CSS Zen Garden website.

最好的例子是CSS Zen Garden网站。

All that said, it's still far easier to do some layout techniques in tables rather than CSS, so there's definitely a "balancing act" there. (For example, even Google uses tables in it's page layouts!)

总而言之,在表格而不是CSS中进行一些布局技术仍然要容易得多,因此肯定存在“平衡行为”。 (例如,即使Google在其页面布局中使用表格!)

#11

By using tables for layout you tie the content to the formatting, this is the main point that most of the disadvantages come from. It messes up the source, complicates site-wide formatting updates that could be easily done with CSS, etc. Using tables for layout also often means slicing images on weird places just to fit them in the cells, yuck.

通过使用表格进行布局,您可以将内容与格式相关联,这是大多数缺点的主要原因。它弄乱了源代码,使用CSS等方便地完成的站点范围的格式化更新变得复杂。使用表格进行布局也常常意味着在奇怪的地方切片图像只是为了让它们适合单元格,哎呀。

#12

you can use tables, but divs have more advantages. but it's all in perspective. Like you say, you are precious for time, so probably (on short notice) tables will be the choice to make. However, if you manage to make it div-wise, you will have a more maintable page, which you can use to refactor the other pages as well.

你可以使用表,但div有更多的优点。但这一切都是透视的。就像你说的那样,你是时间宝贵的,所以很可能(在短时间内)表格将是你的选择。但是,如果您设法使其成为div,那么您将拥有一个更易于维护的页面,您可以使用它来重构其他页面。

#13

Jeffrey Zeldman wrote a great book on this topic: Designing With Web Standards. This book should be mandatory reading for every web designer.

Jeffrey Zeldman写了一本关于这个主题的好书:使用Web标准进行设计。这本书应该是每个网页设计师的必读书。

Here are some reasons why tables for design are bad

以下是设计表不好的一些原因

  • Tables generate more markup -> More bandwidth usage

    • 表生成更多标记 - >更多带宽使用

  • Tables makes it harder for search engines to index your pages -> Your site becomes less "searchable"

    • 表格使搜索引擎难以为您的网页编制索引 - >您的网站变得不那么“可搜索”

  • Tables makes it harder to change and tweak the visible appearance of your site -> More costly redesigns

    • 表格更难以改变和调整网站的可见外观 - >更昂贵的重新设计

  • ...But most importantly: using tables for design adds presentation logic to your markup

    • ...但最重要的是:使用表格进行设计会为您的标记添加表示逻辑

That is bad because you want to separate your presentation from your content! HTML should only define WHAT your content is, not HOW it should look.

这很糟糕,因为您想要将您的演示文稿与您的内容分开! HTML应该只定义您的内容是什么,而不是它应该如何。

If you obtain this level of separation your site will...

如果您获得此级别的分离,您的网站将...

  • ...be more accessible by different kinds of browsers and other kinds of user agents.

    • ...更容易被不同类型的浏览器和其他类型的用户代理访问。

  • ...make redesigns much easier

    • ...使重新设计更容易

#14

The best you do not listen to the fanatics of CSS. These purists live in some imaginary world and will feed you the arguments of some abstract purity, semantics and the rest. You would not want to have this kind of people in your team. For now I've only seen yellow-mouth students to run around with "pure CSS design" ideas. They'll show you examples of very primitive CSS-designed sites, ignoring you whenever you ask them how you can accomplish some complex enterprise software design with it. Experienced developers already know this perfection is not possible.

最好不要听CSS的*分子。这些纯粹主义者生活在一些想象的世界中,并将为你提供一些抽象的纯度,语义和其他的论据。你不希望你的团队中有这样的人。现在我只见过黄嘴学生用“纯CSS设计”的想法。他们将向您展示非常原始的CSS设计网站的示例,无论何时您询问他们如何使用它完成一些复杂的企业软件设计,都会忽略它。经验丰富的开发人员已经知道这种完美是不可能的。

What should you do? Follow the KISS principle. If CSS can help you implement your particular design idea, fine, the problem is solved. If you need to resort to some relatively uncomplex hack, it may be okay. But when it comes to some huge piece of code with dozens of rules to make a basic thing, which you easily and naturally achieve with tables, drop it.

你该怎么办?遵循KISS原则。如果CSS可以帮助您实现您的特定设计理念,那么问题就解决了。如果你需要诉诸一些相对不复杂的黑客,它可能没问题。但是当涉及到一些代码的大量代码来制作一个基本的东西时,你可以轻松自然地用表格来实现这一点。

It serves no purpose to create an incredibly complex and sophisticated tricky CSS design that noone else (and yourself after a couple of months) will be able to understand and support.

创建一个令人难以置信的复杂而复杂的棘手CSS设计是没有用的,没有其他人(以及几个月后你自己)能够理解和支持。

As for the "easy redesign", unless you only want to change colors and fonts, you will enevitably have to restructure your markup whether it is done with tables or without them. In the latter case, a high portion of your markup will serve no purpose except implement CSS trickery which will be useless for you new redesign idea.

至于“轻松重新设计”,除非您只想更改颜色和字体,否则无论是使用表格还是不使用表格,您都必须重新构建标记。在后一种情况下,除了实现CSS技巧之外,标记的很大一部分没有用处,这对于你的新重新设计想法是没用的。

Honestly, it's not your fault that the people responsible for further development of HTML/CSS don't do their job properly. You should not waste your and other people's time trying to find workarounds for something that should have been there ages ago.

老实说,负责进一步开发HTML / CSS的人员不能正常工作,这不是你的错。你不应该浪费你和其他人的时间来寻找应该在很久以前就已存在的东西的变通办法。

HTML/CSS is a good example of how poorly some committee could do their job and brake the development of technology as compared to a single company with resources and commitment.

与具有资源和承诺的单一公司相比,HTML / CSS是一个很好的例子,说明一些委员会如何能够完成工作并制止技术发展。

#15

"The right thing to do" depends on your situation.

“正确的做法”取决于你的情况。

Yes, divs offer more flexibility, but at the end of the day, do you really need it? As far as the number of lines of code goes, I have found that a simple table is often quite a bit smaller that an equivalent div design.

是的,div提供了更多的灵活性,但在一天结束时,你真的需要吗?就代码行数而言,我发现一个简单的表通常比同等的div设计小得多。

It's faster to put together, and it works as reliably as possible in pretty much all browsers, which means you don't have to write a zillion hacks to make it work consistently AND it doesn't break down when a new display engine comes out.

它组合起来更快,并且它在几乎所有浏览器中都尽可能可靠地运行,这意味着您不必编写数十亿个黑客来使其一致地工作并且当新的显示引擎出现时它不会崩溃。

Using tables for display is technically a hack, but it does the job, is easy to understand and maintain and is to a large degree future proof, so for a simple layout, considering that the rest of the website already uses tables for layout, I would keep using tables.

使用表格进行显示在技术上是一个黑客,但它完成工作,易于理解和维护,并在很大程度上未来证明,所以对于一个简单的布局,考虑到网站的其余部分已经使用表格进行布局,我会继续使用表格。

Besides, turning a Table into a "div" table which uses the new "display=table" attributes can easily be done with a few regexes (if you rack your brains, you can probably even do it with a single pass). If you know your regexes, you can replace a table with divs through an entire website in a matter of minutes, so the whole issue of flexibility is really not that big: when (if) you actually need to use divs and CSS positioning, just run a few regex, and you are set. And if you need more control than what you can handle from regex, you can spend a couple hours to write a quick & dirty parser that will convert your tables to div exactly as you want them.

此外,将表格转换为使用新“display = table”属性的“div”表可以通过几个正则表达式轻松完成(如果你绞尽脑汁,你甚至可以通过一次通过来完成它)。如果你知道你的正则表达式,你可以在几分钟内通过一个整个网站替换一个表格,所以整个灵活性问题真的不是那么大:当(如果)你真的需要使用div和CSS定位时,运行一些正则表达式,你就定了。如果你需要比正则表达式更多的控制,你可以花几个小时来编写一个快速和脏的解析器,它将你的表格完全转换为div。

Bottom line is that despite the stigma, for simple layouts, tables still do the job, they do it fast and are reliable, and if you don't have to contend with CSS purists, you can save yourself a lot of work.

最重要的是,尽管存在耻辱,但对于简单的布局,表仍然可以完成工作,它们可以快速且可靠地运行,如果您不必与CSS纯粹主义者竞争,您可以节省大量的工作。

#16

CSS layouts make it easier to alter the layout through stylesheets (separation of data from display).

CSS布局使得通过样式表(从显示中分离数据)更容易改变布局。

Also, browsers often can't render a table until the </table> tag has been parsed. This can be a problem if you are using a table with a large amount of content. CSS layouts can often be rendered as they go.

此外,在解析 标记之前,浏览器通常无法呈现表。如果您使用的是包含大量内容的表,则可能会出现问题。 CSS布局通常可以随时进行渲染。

标签：

相关文章