似乎普遍认为表不应该用于HTML中的布局.

为什么？

我从来没有(或很少诚实地)看到这方面的好论据.通常的答案是:

• 将内容与布局分开是件好事
  但这是一个错误的论点; 陈词滥调.我想使用表格元素进行布局与表格数据几乎没有关系.所以呢？我的老板在乎吗？我的用户在乎吗？
  
  也许我或我的开发人员必须维护一个网页关注......一个表不易维护吗？我认为使用表比使用div和CSS 更容易.
  
  顺便说一下...为什么使用div或span将内容与布局和表格分开？只使用div来获得一个好的布局通常需要很多嵌套的div.

• 代码的可读性
  我认为这是另一种方式.大多数人都懂HTML,很少有人理解CSS.

• SEO最好不要使用表格
  为什么？任何人都可以证明它是有证据的吗？或谷歌发表的声明表示,从SEO的角度来看,表格是不受欢迎的？

• 表格较慢.
  必须插入额外的tbody元素.这是现代网络浏览器的花生.向我展示一些基准,其中使用表会显着减慢页面的速度.

• 如果没有桌子,布局检修会更容易,请参阅css Zen Garden.
  大多数需要升级的网站也需要新内容(HTML).新版本的网站只需要新的CSS文件的情况不太可能发生.Zen Garden是一个不错的网站,但有点理论上.更不用说它滥用 CSS了.

我真的对使用divs + CSS而不是表格的好参数感兴趣.

好吧,我一两周前有一个简单的布局问题.即页面的部分需要标题:

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

非常简单的东西.桌面仇恨似乎已经在Web世界中占据了,当我问为什么使用HTML表单的定义列表(DL,DD,DT)标签而不是表格时,我被提醒了？ 现在已经讨论过表vs divs/CSS的一般主题,例如:

• DIV vs Table ; 和
• 表而不是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不应该用于布局 …

建议在HTML页面中使用表格(现在我们有CSS)？

表的应用是什么？表中有哪些功能/能力不在CSS中？

相关问题

• 表而不是DIV
• DIV vs TABLE
  • DIVs和TABLE请反驳

可能重复:
为什么不在HTML中使用表格进行布局？

为什么使用带有div的标记来定义比使用表更好的所有内容(容器,标题,内容等)？我理解当你使用表格构建你的页面时:看起来很丑陋,在嵌套时看起来甚至是UGLIER,因为废话量较高 - 页面加载时间略高,代码可读性较差.

但.使用表格非常简单,并且可以节省大量时间来完成看似简单的事情,但需要注意的是使其适用于所有浏览器.

我要问的是,不是一个有点复杂的布局(或任何通常不容易用div和css完成的布局)最好用表和css的混合来解决,其中一些div包含所需的元素(处理嵌套性)所以你可以快速开发你的应用程序而不用担心它看起来像不受支持的浏览器上的垃圾？

*!编辑!*我也完全同意是的,表格是表格数据,只是语义上我觉得我应该使用无操作标签,然后命名它们并设计样式,但对于我来说,我发誓这么多次以快速建立一些东西快速,使用表BEATS试图完美地设计它适用于所有浏览器.

我注意到大多数人都在谈论使用DIV和CSS作为标签,文本框对.如何转换表格如下:

<table>
   <tr>
      <td><some Label1> </td>
      <td><some TextBox1> </td>
   </tr>
   <tr>
      <td><some Label2> </td>
      <td><some TextBox2> </td>
   </tr>
   ...
</table>

从使用表到使用CSS说div,样本会有所帮助!目前我正在使用一个表来做这样的事情,想象一下只显示一些用户信息的网站.如何使用DIV而不是表格格式显示对(标签,文本框)？

假设标签/文本框是ASP.net标签和文本框.

可能重复:
为什么不在HTML中使用表格进行布局？

这些天,我正在阅读很多我们应该编写无表格的HTML.我相信这需要很多CSS知识.我的问题是:

• 无桌面设计有哪些好处？
• 应该使用表格的条件是什么？
• 怎么开始？

我理解<div>从标签转向的目标是<table>有意义的,因为它更具语义性.但是,如果您仍需要清除块来使基于列的布局工作,我不明白所获得的好处.例如:

<!-- Note: location-info & personal-info both float left. -->
<div class="contact"> 
    <div class="personal-info">
        <p>
           Shawn, etc, etc
        </p>
    </div>
    <div class="location-info">
        <p><address>etc</address></p>
    </div>
    <br style="clear:both" /> <!-- clearing block -->
 </div>

外部<br>标记用于严格描述样式,并且需要使布局工作.这是否会破坏从删除表中获得的所有好处？

我想知道哪种结构更好div或者table性能更好.很难使用divs而不是表格.那么为什么要使用divs而不是tables 告诉我应该tables在哪里使用以及在哪里使用divs

webservice将一些数据返回给我.数据实际上只是原始HTML(因此没有XML标头或其周围的标签,只是一段html).

<div class="Workorders">
    <div id="woo_9142" class="Workorder">
        <span class="Workorder">S1005</span>
        <span class="Pn">30-2</span>
        <span class="Description">Cooling Fan</span>
        <span class="Shortages">3616-1 (SV)</span>
        <span class="Company">xxx</span>
    </div>
    <div id="woo_9143" class="Workorder">
        <span class="Workorder">S1006</span>
        <span class="Pn">30-2</span>
        <span class="Description">Cooling Fan</span>
        <span class="Shortages">3616-1 (SV)</span>
        <span class="Company">xxx</span>
    </div>
</div>

如果是这样的XML:

<workorders>
    <workorder id="woo_9142">
        <partnumber>30-2</partnumber>
    </workorder>
</workorders>

我可以在jQuery中这样做:

$('/workorders/workorder', data).each(function() {
    //This would give every partnumber $('partnumber', this).text();
});

如何解析返回的HTML(如开头所述)？

myNamespace.onSuccess = function(request) {
    //request contains the raw html string returned from the server

    //How can I make this possible:
    $(request).find('div.Workorders div.Workorder').each(function() {
       //Do …

我正在研究一个django应用程序,它将返回历史上的信息表:

ISSUE  DESCRIPTION  INITIATOR  INITIATEDDATE  ASSIGNEE  FORECASTDATE  STATUS  REMARKS

这将成为用户排序/过滤等问题列表的入口点.
像ISSUE,DATES,NAMES这样的列具有相对固定的宽度,但是其他列可以是段落或更多.

在HTML中呈现此内容的最佳方法是什么？作为HTML表,列表还是有很多CSS跨度/ div？

我最终希望通过javascript使问题列表可排序或可过滤.