在 HTML 中制作面向列的表格答案

【问题标题】：Making a Column-Oriented Table in HTML在 HTML 中制作面向列的表格
【发布时间】：2012-03-01 14:58:57
【问题描述】：

我正在尝试找出一种方法，将表格放入包含行的网页中（图 2），而不是相反（图 1）。

由于TR 标记，制作行包含列的表很简单，但没有对应的TC 标记允许表以相反的方式工作。

我确实设法找到了 W3C 的this one, single, proposal，但没有得到回应，似乎无处可去。

显然 W3C 认为它不值得实施，所以我正在尝试找出解决方法或完成相同的事情。

（通用解决方案是理想的，但在我目前的情况下，我正在尝试有效地fit a bunch of images of constant width。）

图 1： 三行，每行包含一些列：

图 2：三列，每列包含一些行：

【问题讨论】：

你为什么不用divs 做呢？
您是否尝试进行 Pinterest 类型的布局？因为如果是这样，我们在我们的网站stylesaint.com 上解决了同样的问题一段时间，并在确定内部 JS 解决方案之前尝试了几种不同的方法。你可能想看看masonry.desandro.com。我们几乎用过那个。我认为在一天结束时，您可能想走绝对定位的图像路线。我知道这听起来很糟糕，但是对于 div，你仍然需要协调浮动和定位。
无需定位或JS。只有 3 个浮动的 uls 或 divs（就像这里的一个答案）里面有物品。就是这样！
对不起，让我澄清一下。 Joseph 是对的，您可以使用 uls 或 divs。我们使用 abs-positioned 元素的原因是因为我们在布局中还有很多其他动态的东西——其中之一是根据窗口大小动态添加和删除列，所以我们不能单独依赖静态容器。

标签： css alignment tablelayout

【解决方案1】：

当然，您可以使用通常的标记来实现此布局。但我不认为那是你所追求的。您想以不同的方式嵌套元素。

您可以使用 div 来实现这一点，最后的标记与表格标记一样经济。

<div class="table">
    <div class="column">
        <div class="row colspan2">

        </div>
        <div class="row"></div>
    </div>
    <div class="column">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column">
        <div class="row"></div>
        <div class="row colspan2"></div>
    </div>
</div>

不过，CSS 类需要一些处理才能正确处理。编辑：我尝试了jsfiddle，但尺寸是静态的，所以它不是很灵活。

CSS 是

.row{
    background-color:red;
    height: 50px;
    border: 1px black solid;
}
.column{
    width: 100px;
    height: 100px;
    text-align:left;
    float:left;
}
.table{
    height: 200px;
    float:left;
}

.colspan2{
    height: 100px;
}

【讨论】：

你可以使用uls 来表示这些项目有些相关
我认为你是对的，ul 方法可能更容易、更灵活。但就语义而言，我认为 div 是令人满意的。

【解决方案2】：

我有点同意 husbas 的主表想法，但我会用列表而不是嵌套表来做一些不同的事情。我认为这取决于您尝试表示的数据类型，或者您是否只是将表格用作页面布局的一种方式。

<table>
  <tr>
    <td>
      <ul>
        <li>Row 1</li>
        <li>Row 2</li>
        <li>Row 3</li>
      </ul>
    </td>
    <td>
      <ul>
        <li>Row 1</li>
        <li>Row 2</li>
        <li>Row 3</li>
      </ul>
    </td>
    <td>
      <ul>
        <li>Row 1</li>
        <li>Row 2</li>
        <li>Row 3</li>
      </ul>
    </td>
  </tr>
</table>

【讨论】：

【解决方案3】：

您可以定义一个单行三列的主表。然后主表中的每一列都可以包含一个表（或任何其他 HTML 容器）。像这样的：

<table>
  <tr><td>
        <table>This is your first columns</table>
  </td></tr>
  <tr><td>
        <table>This is your second columns</table>
  </td></tr>
  <tr><td>
        <table>This is your third columns</table>
  </td></tr>

【讨论】：