在HTML中創建一個面向列的表格

Question

我試圖找出一種方法來將一個表放入一個網頁中，其中的列包含行（圖2）而不是其他方式（圖1）。

由於TR標記使得一個表格中的行包含列很簡單，但沒有對應的TC標記來允許表格反過來工作。

我確實設法找到了W3C的this one, single, proposal，但它沒有迴應，似乎也沒有去過。

很明顯，W3C並不認爲它值得實施，所以我試圖找出一個解決方法或某件事來完成同樣的事情。

（通用的解決方案將是理想的，但在我目前的情況下，我想有效地fit a bunch of images of constant width）

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

圖2：三列，每列含有一些行：

Answer 1

可以定義與單排和三列的主表。然後主表中的每一列都可以包含一個表格（或任何其他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> 

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

你可以用通常的標記來實現這個佈局。但我不認爲這就是你想要的。你想以不同的方式嵌套元素。

您可以使用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; 
}