<div>元素而不是<table>？

Question

重复:

• 为什么不在HTML中使用表格进行布局？
• DIV的vs表或CSS与愚蠢

---

最近有很多关于使用div而不是表格标签的讨论,以使您的网页更加灵活.为什么div更好？

Answer 1

这里的关键是使用它们进行布局.表格数据的表格没有任何问题,请注意.这就是他们的目的.

但是,当您使用表格进行布局时,您会创建一个非常严格的页面结构,通常不适合不同的屏幕尺寸,用户代理(想想移动浏览器或盲人的屏幕阅读器.特别是在后一种情况下,您正在销毁任何订单其中应该向用户读取内容).不幸的是,表格仍然是布局页面最强大的机制之一,因为几乎没有不同的实现,它们完美地工作了十多年 - CSS在这里完全不同.

但基本上归结为:

表

• 违反内容和表达的区别
• 从长远来看,它是笨拙且不可维护的,特别是在尝试以类似方式更改多个页面的布局时
• 没有强烈的语义含义,这对于可能只依赖于朗读文本的受损人群非常重要.这里逐列逐行读取表格,这在基于表格的布局中几乎总是没有用

CSS布局

• 更难做到(至少是为了演示)
• 允许(有时)清晰分离内容和演示文稿.请注意有时因为您经常必须在HTML中使用多个容器元素以允许某些布局和样式正常工作,因为CSS有一些限制
• 如果您不盲目使用<div>和,则允许底层标记的更好的语义含义<span>.有许多标签具有意义,应该这样使用.例如,请勿<div class="heading1">在可以使用时使用<h1>.

Answer 2

原因如下:

1)在大多数情况下,div在语义上更正确.在表结构中对其站点进行编码的人不使用表来表示它们的用途,这是表格数据.div表示页面的"分区"或部分,因此将项目放在div中更正确.

2)div更灵活,更容易风格和维护.你不必在<table><tr><td>Text here</td></tr></table>每次想要说什么时都要写,<div>Text here</div>而只能写.你可以为表和div添加css钩子(即类或元素),但是使用div它可以更加灵活.

3)表结构化的网站只是简单的丑陋:)

Answer 3

因为表格传达了语义含义 - 正如您当前正在显示表格数据,就像h1意味着您有一个标题.因此,如果您使用表格来格式化输出,则会误导您对代码语义的解释.

例如,这可能导致使用屏幕阅读器的人的可访问性问题.