你能不用表格来做这个HTML布局吗？

2018-05-29 20:13:34

好的，一两周前我有一个简单的布局问题。即一个页面的部分需要一个标题：

+---------------------------------------------------------+
| Title                                            Button |
+---------------------------------------------------------+

很简单的东西。事情是表仇恨似乎已经接管了网络世界，当我问及为什么使用定义列表（DL，DD，DT）标签为HTML表单而不是表格时，我提醒了这一点。现在已经讨论过表格vs div / CSS的一般主题，例如：

DIV与表; 和

表格而不是DIV。

所以这并不是要讨论关于CSS和表格布局的一般性讨论。这只是解决一个问题的方法。我尝试过使用CSS的上述各种解决方案，其中包括：

为按钮浮动或包含按钮的div;

相对于按钮的位置; 和

相对位置+绝对位置。

由于不同原因，这些解决方案都不令人满意。例如，相对定位导致z-index问题，其中我的下拉菜单出现在内容下。

所以我最终回到：

<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
  <td class="group-title">Title</td>
  <td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>

它完美的作品。这很简单，因为它具有向后兼容性（即使在IE5上也可能工作），并且它正常工作。没有搞乱定位或漂浮。

那么任何人都可以做没有表格的等价物？

要求是：

向后兼容：到FF2和IE6;

合理一致：跨越不同的浏览器;

垂直居中：按钮和标题的高度不同; 和

灵活：允许对定位（填充和/或边距）和造型进行合理精确的控制。

在附注中，我今天遇到了一些有趣的文章：

为什么CSS不应该用于布局; 和

表与CSS：CSS巨魔粗心大意

编辑：让我详细解释浮动问题。这类作品：

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { float: left; padding: 8px; }
      .group-buttons { float: right; padding: 8px; }
    </style>
  </head>
  <body>
    <div class="group-header">
      <div class="group-title">This is my title</div>
      <div class="group-buttons"><input type="button" value="Collapse"></div>
    </div>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

感谢Ant P的overflow: hidden部分（尽管如此，仍然不明白）。这就是问题出现的地方。假设我想让标题和按钮垂直居中。这是有问题的，因为元素的高度不同。比较这个：

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-header td { vertical-align: middle; }
      .group-title { padding: 8px; }
      .group-buttons { text-align: right; }
    </style>
  </head>
  <body>
    <table class="group-header">
    <tr>
      <td class="group-title">This is my title</td>
      <td class="group-buttons"><input type="button" value="Collapse"></td>
    </tr>
    </table>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

这完美地工作。

使用可用的工具快速正确地完成工作没有任何问题。

在这种情况下，桌子完美地工作。

我个人会为此使用一张桌子。

我认为应该避免嵌套表，事情可能会变得混乱。

只是左右浮动，并设置清除，你就完成了。不需要桌子。

编辑：我知道我为此得到了很多赞扬，我相信我是对的。但有些情况下你只需要有表格。你可以尝试用CSS做所有事情，它可以在现代浏览器中使用，但是如果你希望支持更老的......不要重复自己，这里是相关的堆栈溢出线程和我的博客上的咆哮。

编辑2：由于旧版浏览器不再那么有趣，我正在使用Twitter引导进行新项目。这对大多数布局需求都很好，并且使用CSS。

这是一个狡猾的问题：在你到达之前，它看起来非常简单

假设我想让标题和按钮垂直居中。

我想陈述的是，在CSS中垂直居中困难。当人们发帖时，看起来似乎没完没了，“你能用CSS做X吗？”答案几乎总是“是”，他们的wh seems似乎是不合理的。在这种情况下，是的，这是一件特别的事情。

有人应该将整个问题编辑为“在CSS中垂直居中问题？”。

链接地址: http://www.djcxy.com/p/2543.html

上一篇: Can you do this HTML layout without using tables?

下一篇: Make a div fill the height of the remaining screen space