在HTML制作一个面向列的表 [英] Making a Column-Oriented Table in HTML

问题描述

我想弄清楚，而不是周围的其他方式（图1）想办法把一个表中的某个网页，其中列中包含行（图2）。

I’m trying to figure out a way to put a table in a web page in which the columns contain rows (figure 2) instead of the other way around (figure 1).

制作中，行包含列的表是因为 TR 标签的简单，但是没有相应的 TC 标签，允许表的其他方式使用。

Making a table in which rows contain columns is simple because of the TR tag, but there is no corresponding TC tag to allow tables to work the other way around.

我还是设法找到这一个，单一的，建议的W3C的，但它并没有回应，似乎毫无进展。

I did manage to find this one, single, proposal to the W3C, but it was not responded to and seems to have gone nowhere.

显然，W3C认为没有值得推行，所以我想弄清楚，围绕工作什么的来完成同样的事情。

Obviously the W3C did not deem it worth implementing, so I am trying to figure out a work-around or something to accomplish the same thing.

（一通用的解决方案将是理想的，但在我目前的情况下，我想能够有效地<一href="http://superuser.com/questions/387760/simplifying-tightly-packing-multiple-images/387782#387782">fit一帮固定的宽度图像。）

(A general-purpose solution would be ideal, but in my current case, I'm trying to efficiently fit a bunch of images of constant width.)

图1：三排，每片含某些列：

Figure 1: Three rows, each containing some columns:

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

Figure 2: Three columns, each containing some rows:

推荐答案

您可以实现这一布局，当然通常的标记。但我不认为这就是你追求的是什么。要嵌套的元素不同。

You can achieve this layout with the usual markup of course. But I don't think that's what you're after. You want to nest the elements differently.

您可以使用div来实现这一目标，并标记​​在最后只是因为经济的表格标记。

You can use div to achieve this, and the markup at the end is just as economical as table markup.

<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 一展身手，但大小是静态的，所以它不是很灵活。

The CSS classes would need some mucking around to get right though. I had a go with jsfiddle, but the sizes are static, so it's not very flexible.

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

这篇关于在HTML制作一个面向列的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！