HTMLで列指向の表を作成する

Question

私は、列に行（図2）が含まれているWebページに別の方法（図1）ではなく表を配置する方法を見つけようとしています。

TRタグのために行が含まれているテーブルを作成するのは簡単ですが、テーブルを逆にするための対応するTCタグはありません。

私はをW3Cに見つけることができましたが、それは応答されず、どこにも行き渡っていないようです。

明らかに、W3Cは実装する価値があるとは思わなかったので、私は同じことを達成するための回避策または何かを見つけようとしています。

（汎用ソリューションが理想的であるが、私の現在のケースでは、私はへの効率的fit a bunch of images of constant widthしようとしている。）

図1：三行、いくつかの列を含む各：

図2： 3列、一部の行を含む各：

Answer 1

単一の行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> 

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を使用すると、 `div`sでそれをしないのはなぜ

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