对于 CSS，如果我们将 display 设置为 table、table-row 或 table-cell，那么我们为什么不直接使用 <table><tr><td> 来做呢？ [复制]

Question

这是针对响应式网页设计的，我正在查看一些现有代码以了解表单是如何完成的。

一位同事使用 CSS display: table 和 display: table-cell 设置了 First Name 标签的容器 div 和 <input> 以及输入框下方的“错误消息”。他提到它在 Chrome 和 Firefox 上运行良好，但在 IE 8 上有些奇怪。请参阅http://jsfiddle.net/DzEww/7/ 上的简化版本

这样表单可以在任何桌面浏览器和可能只有 320 像素宽的移动设备上很好地显示。

1. 首先，我想知道，这是进行响应式网页设计的首选方法吗？

2. 我想知道如果我们使用 CSS table 和 table-cell，那么我们为什么不直接使用 HTML <table>、<tr> 和 <td> 来实现呢？ （例：http://jsfiddle.net/DzEww/12/） 用 CSS 表格显示来显示它，并期望它是一个表格的结构而不是将其标记为表格，感觉有点奇怪。如果我们确实希望这个结构是一个表格，那为什么不直接用<table><tr><td>来标记呢？

（请注意，这个表单确实是一个很好的表单标签和表单字段的表格，所以使用<table><tr><td> 可能实际上很有意义。）

Answer 1

HTML 中的table 元素 是一种语义结构，用来描述什么是数据。如果数据是表格的（通常是可以存储在电子表格中的数据），则应该使用 table 元素，它可能需要在 HTML 中标记为表格。

虽然display 属性的table 值 只是一个在浏览器中设置类似表格的外观的工具，但它没有语义意义。这种技术具有轻松创建复杂网格布局的潜力。

使用表格元素进行布局告诉用户代理，“这些数据是表格的。”使用一堆将 display 属性设置为 table 和 table-cell 的 div 对用户代理没有任何意义，只是要求它以某种方式在视觉上呈现它们，如果它能够这样做的话。

当然，当我们真正拥有的是表格数据时，我们还应该注意不要在一堆 div 元素上使用display: table;！