Making a Column-Oriented Table in HTML

Question

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).

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.

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

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.

(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.)

Figure 1: Three rows, each containing some columns:

Figure 2: Three columns, each containing some rows:

Answer 1

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.

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>

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

CSS is

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