66

[注意：对于那些可能将此问题与“为什么不使用表格进行 HTML 布局”混淆的人，我不是在问这个问题。我要问的问题是为什么网格布局与表格布局根本不同。]

我正在为一个项目研究 CSS 库（特别是 Bootstrap）。我是一名程序员而不是网页设计师，我觉得我可以从封装好的设计的库中受益。

我们都知道使用 HTML 表格来完成基本的站点布局是一种不好的做法，因为它将演示与内容混合在一起。像 Bootstrap 这样的 CSS 库提供的好处之一是它们提供了在不使用表格的情况下创建“网格”布局的能力。但是，我在理解它们的网格布局与等效的表格布局有何不同之处时遇到了一些麻烦。

换句话说，这两个 HTML 示例之间的根本区别是什么？我认为网格布局只是一个具有另一个名称的表，我错了吗？

<div class="row">
    <div class="span16"></div>
</div>

<div class="row">
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
    <div class="span4"></div>
</div>

和

<table>
  <tr>
    <td colspan=4></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
4

9 回答 9

33

不同之处在于第一个示例在语义上被标记，假设被标记的数据实际上不是表格的。<table>应该只用于表格数据，而不是碰巧以类似于表格的布局显示的任何数据。

尽管使用像 Bootstrap 这样的 CSS 包是正确的，它要求您将类分配给非语义但呈现的 HTML 元素，这减少了内容和呈现的分离，使得差异有些没有意义。您应该为元素分配语义上有意义的类，并使用lesscss mixins（或类似技术）将CSS框架中定义的表现行为分配给这些类，而不是直接将表现类分配给元素。

说：

<div class="products">
    <div class="product"></div>
</div>

.products {
    .row;
}

.products > .product {
    .span16;
}

请注意，我说应该。在实践中，这不一定总是更可行的选择，但它应该是理论上的目标。

于 2013-01-22T14:47:55.837 回答
20

我相信CBroe评论是最好的选择，所以我选择澄清它。

避免div's。Adiv应该是你最后的选择，而不是你的第一选择。相反，请尝试在实际元素上使用 Bootstrap 类。例如：

<form class="container">
    <fieldset class="row">
        <label class="span4" for"search">Type your search</label>
        <input class="span6" type="text" id="search" />
    </fieldset>
</form>

使用 fieldset 包含单个字段是一种耻辱，但它在语义上比div对同一事物使用 a 更好。HTML5 标准定义了许多新的容器元素，例如article、section、header等等。在某些情况下，您将不得不使用's，但如果您最小化它的使用，那么您的代码将更加语义化。footer div

于 2014-05-09T13:21:32.353 回答
12

根本区别在于，您可以使用 Bootstrap 为不同的显示尺寸“重排”布局，只需使用媒体查询即可，而无需更改标记。例如，我可以决定在台式机上，我希望您的 4 个 div 位于同一行，因为用户具有高分辨率宽显示屏，但在手机上，我希望在一行上进行 2 次潜水，在下一行进行下一个 div。因此，通过这种方式，我可以使用媒体查询来调整每行中的列数。如果您使用硬编码的 HTML 表格，则很难做到这一点。

话虽如此，我不太喜欢 bootstrap 实现，原因如下：

  1. 它具有以像素为单位硬编码的断点。这意味着，随着手机和桌子在显示分辨率方面的进步，您的网站可能会开始在这些设备上显示意想不到的布局。像素数不能很好地代表显示尺寸。
  2. 它将最大使用的显示区域限制为 1170 像素，这对于拥有漂亮宽屏的用户来说又是一个遗憾，他们实际上可以使用它们来查看应用程序中的更多内容。
  3. Bootstrap 的布局不是源独立的，也就是说，您不能更改在 HTML 中设置的列顺序。然而，这更像是一个迂腐的观点。
  4. 默认布局适用于非常小的分辨率，更高分辨率的布局仅在媒体查询触发时触发，考虑到手机将继续具有更好的分辨率，并且迟早您的网站将为过时的移动设备设置默认布局，IMO 是一个糟糕的选择。
  5. Bootstrap 布局并不是真正的“无忧无虑”，因为您必须阅读它们的细则才能看到他们认为不值得支持但您可能关心的所有错误和浏览器。例如，如果您针对的是韩国或中国的用户，您会感到惊讶。

因此，并非所有东西都是引导程序中的黄金，而且他们的方法不一定总是最好的（顺便说一句，我在引导程序中鄙视的另一件事是他们对所谓的“jumbotrones”的痴迷——那些浪费在你面前不方便的房地产标头-我希望社区不要开始将其视为“新标准”）。我个人现在使用 CSS 表格布局 ( display:table)，它与引导程序具有类似的好处，无需硬编码<table>在我的标记中。例如，我仍然可以使用媒体查询根据纵向或横向重新排列行。然而，最重要的好处是我的布局是真正的像素甚至百分比独立。例如，在 3 列布局中，我让内容决定第一列和最后一列应该占用多少空间。没有像素甚至百分比宽度。中心栏占据了所有剩余空间（这对我的应用程序来说是件好事，但对其他人来说可能不是）。此外，我在媒体查询断点中使用了 ems，而 bootstrap 出人意料地没有。

于 2013-11-13T12:29:29.823 回答
4

我使用 Bootstrap 网格进行页面布局，表格用于表格数据。

我认为 Bootstrap 中的网格，不是开发人员意义上的网格，如 gridview 控件，而是设计页面布局意义上的网格——作为包含页面内容的网格。尽管 Bootstrap 网格也可用于创建包含表格数据的常规网格，正如 deceze 指出的那样，这种网格更适合 HTML 表格 - 在这种情况下仍然可以使用。

于 2013-02-12T22:54:31.360 回答
3

如果您只使用表格，我认为您将错过为移动/平板电脑重新调整文档大小的很多灵活性，而无需为每个设备制作单独的页面。一旦定义了表格结构，您真正可以做的就是放大和缩小。

于 2013-01-23T00:15:54.580 回答
3

虽然这两组标记之间不一定有太大的语义差异（因为 Bootstrap 的网格系统使用的类确实是纯粹的表现形式），但一个非常重要的区别是网格系统更加灵活。

例如，让基于表格的布局响应不同的屏幕尺寸是非常困难的。没有办法告诉浏览器在同一行中将一个元素显示在另一个td元素的下方。td而对于这个div例子，这很容易做到，即使类是“展示性的”，也就是它们定义了页面上元素的相对比例和位置，同样的标记也可以以不同的方式呈现。

于 2014-11-24T04:00:39.830 回答
1

如果可以的话，我想总结一下我从其他评论中收集到的内容以及我在此页面上经历的链接爆炸：

使用表格的问题不在于网格布局，而是试图用 HTML 而不是 CSS 来表达它。

Bootstrap 允许通过（大部分）纯 CSS 进行网格布局，这就是它可以使用的原因。“大部分”部分的出现是因为您的 HTML 仍会受到布局数据的污染，但更微妙的是：

<nav class="span4"> ... </nav>
<article class="span8"> ... </article>

这肯定比旧的表格设计更具语义和可维护性，但“span4”和“span8”仍然是嵌入到我们 HTML 中的显示数据。然而，由于设计永远无法真正与我们的数据（例如，嵌套的 div）分离，因此这是一个合理的代价。

话虽如此，如果您使用由诸如LESS之类的预处理语言提供的一些更现代的 CSS 功能，即使这种耦合也可能被打破。同样的例子：

<nav id="secondary-nav"> ... </nav>
<article id="main-content"> ... </article>

再加上以下LESS：

#secondary-nav{
    .span4;
    // More styling (padding, etc) if needed
}
#main-content{
    .span8;
}

这将创建完全解耦的 HTML 和样式表，这是理想的，因为 HTML 更干净且更具可读性，并且可以通过更少的 HTML 修改来进行重新设计。但是，这仅在您使用 LESS 或其他一些 CSS 预处理器时才有效，因为 CSS 当前不支持 mixins (AFAIK)。

我们已经在我的工作场所使用 LESS，所以我知道我将推动使用这种类型的解决方案。我非常相信语义 HTML 和数据设计解耦。:)

于 2015-02-13T18:42:37.063 回答
0

基本上 DIV 是 DIV 和表格元素只是表格元素。表的问题通常只是跟踪所有的列和行，因为它最终是一个严格的数据结构。DIV 更加灵活和宽容。

例如，如果您想获取类等于“span4”的四个 DIV，并将它们更改为 2 列宽，您需要做的就是为外部类“行”调整一点 CSS也许还有“span4”类。事实上，在做这样的 DIV 时，我会避免将单个 DIV 称为“span4”或其他一些数字。

我的方法是创建一个称为“rowspan”的父包装器 DIV，内部 DIV 将具有一些通用 ID，例如“单元格”。

<div class="rowspan">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

例如，每个“单元”类的宽度可以是 100 像素，然后父“行跨度”可以是 400 像素。这相当于连续 4 列。想让它变成 2 列吗？没问题！只需将“rowspan”更改为 200 像素宽。此时，一切都在 CSS 中，因此无需在 DOM 中重新调整页面结构即可轻松完成。

但是有桌子吗？不容易。您基本上必须使用标签重新渲染表格</tr><tr>以创建新行。

于 2013-01-22T14:49:58.987 回答
0

带有 table、tr、td 的版本取决于浏览器算法 - 换行、动态宽度、边距、居中等。带有 div 的版本可以更容易地通过 css 和脚本进行调整。

于 2016-09-05T13:11:40.383 回答