您可以在不使用表格的情况下进行HTML布局吗？
好的，我在一两个星期前遇到了一个简单的布局问题。即页面的各个部分需要一个标题：
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
很简单的东西。在网络世界中，表仇恨似乎已经接管了一切，当我问[为什么对HTML表单而不是表使用定义列表（DL，DD，DT）标签]时，我想起了这件事。现在，前面已经讨论了表vsdivs / CSS的一般主题
因此，这并不是要对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；
- 合理一致： 跨不同的浏览器；
- 垂直居中： 按钮和标题的高度不同；和
- 灵活： 可以对定位（填充和/或边距）和样式进行合理精确的控制。
编辑： 让我详细说明浮动问题。这类作品：
<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>
完美地运作。
问题答案：
使用可用的工具快速正确地完成工作没有任何问题。
在这种情况下，一张桌子工作完美。
我个人会为此使用一张桌子。
我认为应避免使用嵌套表，否则可能会导致混乱。
-
问题内容： 我从来没有（或者说实话很少）对此有很好的论据。通常的答案是： 将内容与布局分开是很好的，但这是一个谬误的论点。陈词滥调思维。我想这是真的，使用表格元素进行布局与表格数据关系不大。所以呢？我的老板在乎吗？我的用户在乎吗？ 也许是我或我的同伴开发人员，他们必须维护网页……表的维护性较差吗？我认为使用表格比使用div和CSS更容易。 顺便说一句…为什么使用div或span不能很好地将内容与布
-
如何用套接字中的数据填充RecycerView？
-
HttpServletRequest请求,HttpServletResponse响应 但是在典型的JSF项目中，我根本没有看到这些类的使用，相反，我看到的只是托管bean和Facelet页面。 但是，在web.xml中，我看到：
-
问题内容： 是否可以在不实现Comparable类的情况下使用Comparator？例如，如果我有以下内容： 然后可以使用comp比较两个对象吗？如果是这样，我将如何去做？ 谢谢… 问题答案： 你不用。您使用。 是由对象实现的接口，用于指定它们与相同类型的其他对象的排序顺序。 是一个通用接口，只需要两个对象并告诉您它们的排序顺序。因此，您可以执行以下操作： 与： 和：
-
问题内容： 我当前正在使用subprocess.call（）来调用另一个程序，但是它将阻塞正在执行的线程，直到该程序完成。有没有一种方法可以简单地启动该程序而无需等待返回？ 问题答案： 使用代替：
-
问题内容： 我正在阅读Java 8的使用，作者说如果您有一个覆盖toString方法的类，则在执行collect（joining（））时不需要将流映射到String。一个例子： 但是，这不起作用，仅此： 可行，所以这本书是错误的呢？此外，他为什么这么说（我的措词有所改变）： 还要注意，如果类具有返回字符串的toString方法，则无需使用提取名称的函数在原始流上进行映射即可获得相同的结果。 当每个