タグ内での改行について

質問

初歩的な質問ですが、教えて下さい。
テーブルタグを使って以下のように記述しました。
<table>
<tr>
<td><img src="a.jpg">
</td>
</tr>
</table>
すると、画像の下部と罫線との間に隙間があいてしまって見栄えが悪かったのです。
そこで試行錯誤して以下のように訂正し、<td>～</td>間の改行をなくしたところ、隙間がなくなりました。
<table>
<tr>
<td><img src="a.jpg"></td>
</tr>
</table>

なぜこのように改行が影響する場合があるのでしょうか？
教科書的な説明で「改行は影響しない」と聞いていたので・・・。
ブラウザはIEを使っています。

回答No.3

ORUKA1951 · ベストアンサー

＞古い書き方だから改行による崩れもおきる、ということなのでしょうか？？
　正確に言うと「IEの互換モードでは」と言う事です。IEは以前、他のブラウザを追い落とすために、独自仕様でユーザーの囲い込みをしてきました。そのために、IEでないと表示できないページがたくさん増えました。HTML4.01(1999)以降「Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」の反省から、ウェブ標準が浸透して、やっと最近になってIEもウェブ標準に従うことになりました。
　ところが、過去のIEの仕様に合わせたページもたくさん残っていますから、それらを表示するために互換モードがあります。そのためです。IEだけの問題で、他のブラウザではそのようなことは置きません。
　HTMLでは、『本仕様は、・・・【中略】・・・スペース文字類については、レンダリングその他の挙動を示すことはない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )』
　と明記されています。よって<img src="" width="" height="" alt="">(改行)(水平タブ)</td>の(改行)(水平タブ)は無視されなければならないのです。!!

　いずれにしても検証には他のウェブ標準なfirefoxなどの他のブラウザを使用するのが良いです。firefoxとfirebugで、何処がどう影響しているかはすぐ分かるはず。

★tableを使ってはいけない・・
「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」
「ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」
　これは、最も重要な基本です。

回答No.2

ORUKA1951

tableに画像を入れることはあまりないですよ。tableをデザインのために使用するのはダメですから・・・
ちゃんと仕様どおりに書いて
<table border="1">
　　<tbody><!-- tbodyは必須だよ -->
　　　　<tr>
　　　　　　<td>
　　　　　　　　<img src="./images/abc2.jpg" width="200" height="200" alt="" style="margin:0;">
　　　　　　</td>
　　　　</tr>
　　</tbody>
</table>
としてみましたが、--タブは　　に置換してある。
<table border="1">
　　<tbody>
　　　　<tr>
　　　　　　<td><img src="./images/abc2.jpg" width="200" height="200" alt="" style="margin:0;"></td>
　　　　</tr>
　　</tbody>
</table>
と比較して差はありません。firefox,Opera,Chrome,safari,IE
　唯一、差が出るのはIEが互換モードで動作しているときですね。
　　いまどき、互換モードでページを作成することはないですから、ちょっと気がつきませんでした。
　⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml )
※教科書的な説明で「改行は影響しない」と聞いていたので・・・。
　そりゃそうでしょう。教科書には標準モードでしか説明しないはず。

★ただし標準モードだと、わずかに隙間が開くはずです。
　画像をデザイン目的で配置するなら、それはやめてスタイルシートできちんと配置しましょう。
　また、必要があってtableにしても
＿<table border="1" class="test" summary="てすと"><!-- html4.01ならsummaryは必須 -->
＿＿<tbody>
＿＿＿<tr>
＿＿＿＿<td>
＿＿＿＿＿<img src="./images/abc2.jpg" width="200" height="200" alt="" style="margin:0;">
＿＿＿＿</td>
＿＿＿</tr>
＿＿</tbody>
＿</table>
※タブは＿に置換してあるので戻す。

スタイルシートで
table.test{
border-collapse:collapse;
border:none;
table.test tr td{
border:1 solid 1px;
}
きちんと指定すれば、余白はないはずです。どのブラウザも全く同じになるはず!!もちろん標準モードであること。

お礼

丁寧にタグまで書いていただきありがとうございます。

実は必要があって高校の教科書の問題を解いているのですが、
HTMLのバージョンがかなり古いものを使っているようで、ORUKAさんが必須と書いておられた
<tbody>やimgタグの中の<style="margin:0;">も出てこないのです。
（教科書ではtableをまさにデザインのために使っていました汗）

現在はこんな書き方はもうされていないのでしょうが、教科書内から回答しなくてはいけないため困っていました・・・。
再び質問で申し訳ないのですが、古い書き方だから改行による崩れもおきる、ということなのでしょうか？？

回答No.1

yambejp

多くのブラウザで改行はブランクとして表示されます
ただし複数の改行をいれてもブランクは一つです

お礼

早速のご回答ありがとうございます。

すみません・・・再び質問なのですが、先ほどの例ですとたとえば
<tr>
<td><img src="a.jpg"></td>
</tr>
<tr>
の<tr>前後の改行のように、改行が影響しない（ブランクとして表示されない）場合もありますよね。
そのあたりがよくわからないのですが・・・
お時間ありましたら教えて下さい。