テーブルタグ表示が上手くいかない（html・CSS

質問

下のタグを使うと、ブログに下記画像上部のように表示されているのですが
理想としては画像の下部分のように綺麗に表示したいです。
自分なりに何度かタグを弄っているのですが何度やっても画像上部のように乱れて表示されてしまい
ムキー！っとなってます。
大変申し訳ないのですが、画像の下部分のように表示できるタグを教えてください。
何卒お願いします。

画像内のピンクの部分は実際には<img src="で指定された画像になります。

使ったタグ

<table border="1">
<td><table id="table-03">
<colgroup>

</colgroup><tr>
<td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td>
<td><table id="table-03">
<colgroup>

</colgroup>
<tr>
<tr><td>あああ名</td>
<td>いいい</td>

</tr>
<tr>
<td>ううう</td>
<td>えええ</td>
</tr>
<tr>
<td>おおお</td>
<td>かかかかか~</td>
</tr>
</table></td>
</tr>
</table>
</DIV>

</colgroup><tr>
<td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td>
<td><table id="table-03">
<colgroup>

</colgroup>
<tr>
<tr><td>あああ名</td>
<td>いいい</td>

</tr>
<tr>
<td>ううう</td>
<td>えええ</td>
</tr>
<tr>
<td>おおお</td>
<td>かかかかか~</td>
</tr>
</table></td>
</tr>
</table>
</DIV>

回答No.1

chie65536（@chie65535） · ベストアンサー

タグを「インデント」してみましょう。

すると「タグがちゃんと閉じられてない」のが判ります。

<table border="1">　/*このタグが閉じてない*/
　<td>　/*このタグが閉じてない*/
　　<table id="table-03">
　　　<colgroup>

　　　</colgroup>
　　　<tr>
　　　　<td><a href="jpg"><img src="i.jpg" alt="" width="150" height="220" class="aligncenter size-full wp-image-227" /></a></td>
　　　　<td>
　　　　　<table id="table-03">
　　　　　　<colgroup>

　　　　　　</colgroup>
　　　　　　<tr>　/*このタグが閉じてない*/
　　　　　　　<tr>
　　　　　　　　<td>あああ名</td>
　　　　　　　　<td>いいい</td>

　　　　　　　</tr>
　　　　　　　<tr>
　　　　　　　　<td>ううう</td>
　　　　　　　　<td>えええ</td>
　　　　　　　</tr>
　　　　　　　<tr>
　　　　　　　　<td>おおお</td>
　　　　　　　　<td>かかかかか~</td>
　　　　　　　</tr>
　　　　　　/*ここに</tr>の閉じタグが必要なのでは？*/
　　　　　</table>
　　　　</td>
　　　</tr>
　　</table>
　/*ここに</td>の閉じタグが必要なのでは？*/
/*ここに</table>の閉じタグが必要なのでは？*/
</DIV>/*開始タグがない*/

ちゃんとインデントして、使ったタグがちゃんと閉じてるか確認しましょう。

タグがちゃんと閉じてなければ、ムキーッ！となるのが当たり前です。

なお、ムキーッ！って思ってるのは貴方じゃなく、タグがちゃんと閉じられてない変なページを表示させられている「ブラウザさん」ですよ。

お礼

なんかすごく滅茶苦茶な書き方してたみたいでお恥ずかしいです。
そしてブラウザさんごめんなさい(__)
教えていただいたとおりにもう一回書きなおしてみます。ありがとうございました。