在布局中使用表格 [关闭]

Question

最近我了解到，通常不鼓励在网页布局中使用表格 (source)

我已经制作了我的网络应用程序，它的一些部分是基于表格布局的。 例如，我的主页包含一个表格中的照片列表（类似于某些 Tumblr 布局）。该表有单列和多行，每行都有关于每张图片的信息。

我想知道是否应该尝试修复一些布局以使其符合标准。另外，除了表格问题，如果我制作整个网页布局的方式存在一些重大问题，我想听听您的意见。

更新：这就是我在网页中使用表格的方式。谁能帮我改一下？

<% posts.each do %>
  <div class="post">
    <table>
      <tr><!-- title, name, date -->
        <td><%= post.title %></td>
        <td><%= user.name %></td>
        <td><%= date %></td>
      </tr>
      <tr><!-- image -->
        <td><%= image %></td>
      </tr>
    </table>
   </div>
<% end %>

Answer 1

如果您已经使用表格构建了页面，请继续使用它。除了更好的可维护性之外，切换到基于非表格的布局将没有任何优势。

如果您建立一个新网站（或决定切换到无表格布局），只需使用以下内容：

<div class="container">
    <div class="row">Content of row 1</div>
    <div class="row">Content of row 2</div>
    <div class="row">Content of row 3</div>
</div>

使用一些类似的css：

div.container {
    width: 800px;
}

div.row {
    margin-bottom: 20px;
}

它将为您提供一个更清晰的 html 源代码，因为您丢失了所有 <tr><td></td></tr> 内容，并且由于您的内容不是表格数据，因此 div 是用于您正在做的事情的正确元素。