有効なマークアップでこのテーブルデザインを使用するにはどうすればよいですか？

Question

私はテーブルを保持したいが、厳密なdoctypeで同じ位置決め結果を達成するためにCSSを使用したい。これは私が必要とするものを正確に行うデザインです。

は最後（下）<td>セルに<br>タグに注目してください。この領域が拡大するにつれて、その上にある他の2つのセル内のデータの位置は変化しません。

<table cellpadding="0" cellspacing="0" border="1" width="400" height="100%"> 
    <tr> 
    <td valign="top"> 
     <table cellpadding="0" cellspacing="0" border="0" height="100%"> 
     <tr> 
      <td valign="top">ds</td> <----- The position here is important 
     </tr> 
     <tr> 
      <td valign="bottom">ds</td> <----- The position here is important 
     </tr> 
     </table> 
    </td> 
    <td valign="top">ada adf ad<br><br><br><br><br><br><br><br><br></td> 
    </tr> 
</table> 

Answer 1

あなたがhereを望むすべてを見つけることができます。私自身は、私は常にDIVを見つけたテーブルワードから来る

Answer 2

は$$の痛みをレイアウト。 blue print cssは非常に使いやすいCSSフレームワークです。 "、コンテンツが短すぎるがあれば、「トップ」私は、あなたが「構造用のテーブルを維持する」と何を意味するかわからないんだけど、私はこのようなものを何かあなたを推測

Answer 3

あなたを整理してあります「ボトム」のテキストが重複します。 CSSスタイルのテーブルと

http://jsfiddle.net/HsmKA/

---

バリアント：

http://jsfiddle.net/JmQ55/

Answer 4

私はそれはdivタグやCSSでそのテーブルを複製することがいかに簡単であるかをお見せする例for you hereを作っ：

HTML：

<div id="main-div-wrap"> 
       <div class="left-content"> 
       <span class="top">ds</span> 
       <span class="bottom">ds</span> 
       </div> 
       <div class="right-content"> 
        ada adf ad 
       </div> 
</div> 

CSS：

#main-div-wrap 
{ 
    position: absolute; 
    width: 400px; 
    height: 200px; 
    border: 1px solid #000; 
} 

.left-content 
{ 
    width: 18%; 
    float: left; 
    height: 100%; 
} 

.right-content 
{ 
    margin-left; 18%; 
    width: auto; 
    float: left; 
    height: 100%; 
    border-left: 1px solid #000; 
} 

.top 
{ 
    position: absolute; 
    display: block; 
    top: 0; 
} 

.bottom 
{ 
    position: absolute; 
    display: block; 
    bottom: 0; 
} 

すべてのセマンティック、何のハッキングは、検証していないでしょうし、あなたがブラウザのためにそれを変更する必要がある場合、more thanenough toolsout there to help you theresの。