divでtable表現

質問

<table>
<tr>
<td>左の要素</td>
</td>右の要素１<br>右の要素２</td>
</tr>
左の要素は、真ん中（高さ）にあります。

このtableをdivで表現するためには、どうすれば良いですか？

以下、自分が考えたものです。（左の要素の下に右の要素が割り込んでしまいます）
<div style="float:left; margin:50%">
左の要素
</div>
<div>
右の要素１<br>右の要素２
</div>

回答No.1

outbrave · ベストアンサー

div は、横幅が100%なので、そのままでは横並びにはなりません。
横幅を指定してください。

回答No.2

ORUKA1951

＞このtableをdivで表現するためには、どうすれば良いですか？

　意味不明なのですが？？？
div(グループ化のための汎用のブロック)で、table(表)表現とは？
　それが表でしたら、tableでマークアップすべきです。表でないものを、デザインのためにtableでマークアップするのと同じく、それ以上に誤ったマークアップです。

＞右の要素１<br>右の要素２
　HTMLは、タグで囲まれた要素で構成されます。その要素にはブロック要素と行内要素という明確な区別があります。どの入門書にも「まっとうなものなら」最初にとことん説明してある。右の要素がブロック要素でしたらその間に<br>という行内要素は入ってはなりません。これも基本・・・

　ブロック要素1の右側に、ブロック要素を２個縦に並べたいなら
ブロック要素
　　 |-- ブロック要素
　　 |-- ブロック要素
　　　　　　|-- ブロック要素
　　　　　　|-- ブロック要素
という木構造になるはずです。