Question

我知道有很多关于这个主题的文章。我的任务是实现具有粘性页眉和页脚的固定流体2列布局。在阅读了几篇文章后，人们声称div更适合构建页面布局。在某些情况下我同意这一点。任何人都可以告诉我，如果我想要完成的事情，div会比桌子更好。任何人都可以使用DIV比使用TABLE的附加代码给我一个更简单的解决方案。

CSS

   html,body{
     height:100%;
     width:100%;
     margin : 0;
   }

   table{
    height:100%;
    width:100%;
    border-collapse: collapse;
    border-spacing: 0
   }

   #top{
     height:100px;
     background-color:black;
   }

   #bottom{
     height:100px;
     background-color:blue;
   }

   #left{
     width:250px;
     background-color:blue;
   }

HTML

<html>
  <head>
  </head>
  <body>
    <table >
      <tr id="top">
        <td colspan="2"></td>
      </tr>
      <tr id="mid">
        <td id="left">
        </td>
        <td id="right">
       </td>
      </tr>
      <tr id="bottom">
        <td  colspan="2">
        </td>
      </tr>
    </table>
  </body>
</html>

Answer 1

如果您的代码是针对非表格数据的，那么在不查看代码的情况下，我可以告诉您，div元素的布局优于table。

有关更多信息，这篇SO文章非常有用：

Why not use tables for layout in HTML?

任何人都可以给我一个比附件更简单的DIV解决方案代码使用TABLE

这不是什么是最简单的代码。加div布局更具可扩展性。从长远来看，你会遇到更少的障碍路障。

Answer 2

在我看来，表格应该只用于表格数据 - 但那是我的意见。使用div的关键在于它们更容易使用CSS进行操作，并且没有内置格式，您需要覆盖它们。对于流体布局，这是一种蜂巢意见，即div更好，因为它们本身就是流动的，而表格却不是。但是，实际上，这取决于个人偏好;在你的情况下，你可以按照你的心愿做到这一点！

表格与页面布局的Div

2 个答案: