在 HTML 中制作面向列的表格

Question

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

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

我确实找到了这个单一的提案< /a> 到 W3C，但没有得到回应，似乎没有任何进展。

显然，W3C 认为它不值得实施，因此我正在尝试找出解决方法或其他方法来完成同样的事情。

（通用解决方案是理想的，但在我目前的情况下，我试图有效适合一堆宽度恒定的图像。）

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