ＴＡＢＬＥのwidth設定について

質問

<table width="100%">
<colgroup width="50%" />
<colgroup width="50%" />
<tr>
<td>あ</td>
<td>い</td>
</tr>
<tr>
<td><image src="image/***.jpg" width="100%" align=" center" /></td>
<td><image src="image/****.jpg" width="100%" align=" center" /></td>
</tr>
</table>

widthの％定義について質問です。
直近の親要素に対して設定した％で表示されると思うのですが、

上記のようなタグで表示した場合、image（画像）が元々の大きさ目一杯に表示されてしまいます。
（firefoxなどでは正常に直近のtd50%のwidthで表示されましたが、ＩＥでは変に表示されるようです）
何が原因なのでしょうか？よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

IMG要素は、置換要素でありインライン要素です。
ブロック要素は、それが所属する直近の親コンテナブロックの内寸を参照しますが、置換インライン要素は内容サイズを参照します。
　この処理は、ブラウザによって異なりますのでスタイルシートで記述しましょう。スタイルシートでブロック要素に変更してから、コンテナブロックサイズを参照させます。
<table width="100%">
<colgroup width="50%" />
<colgroup width="50%" />
<tr>
<td>あ</td>
<td>い</td>
</tr>
<tr>
<td><image src="image/***.jpg" style="display:block;width:100%" width="200" height="60" /></td>
<td><image src="image/****.jpg" style="display:block;width:100%" width="200" height="60" /></td>
</tr>
</table>

　strictで作成するようにしましょう。HTML1.1,HTML5では使えません。HTML4.01でもブラウザはサポートしなければならないが、著者が使うのは非推奨です。align属性はありません。

お礼

ありがとうございます。
ご教示いただいた方法でできそうです。
早速確認してみます。

回答No.2

ORUKA1951

こちらのサンプルを参考にしてください。
画像ははみ出すけど文字ははみ出さないtable - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q6982218.html )