在HTML中创建面向列的表

Question

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

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

我确实设法找到了this one, single, proposal给W3C，但它没有得到回复，似乎没有任何结果。

显然，W3C并不认为值得实施，所以我试图找出解决办法或其他事情来完成同样的事情。

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

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

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

Answer 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;
}

Answer 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>

Answer 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>