【HTML】tableで良くわからない空行が挿入されレイアウトが崩れる

IT

原因が分からなくてしばらく悩んだためメモ。

 

【現象】

単なるtable。説明のコメントが付いている。

<html>
　<head>
　</head>
　<body>
　　<table border="1">
　　　<tr>
　　　　<td>hoge</td>
　　　</tr>
　　　<tr>
　　　　<!-- コメント -->　
　　　　<td>hoge</td>
　　　</tr>
　　</table>
　</body>
</html>

 ブラウザで見てみると謎の空行が発生する。

ソースをいくら見ても原因が分からない。

 

【原因】

レイアウトが崩れていなかった頃のソースとよーく見比べてみたらある部分に違いを発見した。それは「コメントの後ろに空白があるかないか」だった。早速修正。

<html>
　<head>
　</head>
　<body>
　　<table border="1">
　　　<tr>
　　　　<td>hoge</td>
　　　</tr>
　　　<tr>
　　　　<!-- コメント -->　←ここに空白があったので削除
　　　　<td>hoge</td>
　　　</tr>
　　</table>
　</body>
</html> 

 すると空行は無くなった。

 

他のIDEでは分からないがEclipseで編集した時は保存時にコメントの後ろにある空白は削除してくれていた。テキストエディタなどで開いて編集してその時に空白が入ったのだろうか。覚えがないけどな…。