css - 对于 CSS,如果我们将显示设置为表格、表格行或表格单元格,那么我们为什么不直接使用 <table><tr><td> 来做呢?

标签 css forms responsive-design

<分区>

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

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

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

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

  2. 我想知道我们是否使用 CSS tabletable-cell ,那我们为什么不直接使用 HTML <table> , <tr> , 和 <td>去做吧? (例如: http://jsfiddle.net/DzEww/12/ ) 用CSS table display来显示它并期望它是一个表格的结构而不是将其标记为表格感觉有点奇怪。如果我们确实希望该结构是一个表,那我们为什么不直接使用 <table><tr><td> 呢?标记它?

(请注意,此表单实际上是一个很好的表单标签和表单字段表格,因此使用 <table><tr><td> 实际上可能很有意义。)

最佳答案

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

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

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

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

关于css - 对于 CSS,如果我们将显示设置为表格、表格行或表格单元格,那么我们为什么不直接使用 <table><tr><td> 来做呢?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23262405/

上一篇:css - 在我的 css 中添加文本并将其显示在 html 页面电子邮件中

下一篇:html - 图标 .ico 扩展名在 IE 或 Chrome 中不显示

相关文章:

php - 规范 : How to save HTML form data into MySQL database

html - 从移动设备的文本框中删除占位符

html - 我的响应式网站的一页在 Firefox 中定位/缩放不正确,但在 Chrome、Opera 和 Safari 中正常

html - 如何以百分比指定行高,就像指定高度一样?

html - div 属性的行为

javascript - 纯 javascript 只切换一次使用 data-getAttribute 来比较

javascript - 带有单选按钮过滤的 PHP + MYSQL 即时搜索

javascript - JavaScript/jQuery 中的长表单验证

html - 响应式布局文本不调整大小

javascript - 如何在 <div> 标签内 .append() 用户输入?