エンジニアのひよこ_level10

【毎日更新!】新卒3年目エンジニアブログです!

【うっかり】tableタグの罠。要素が足りなかった【764日目】

うっかり

うっかり簡単なミスをしてしまう。

誤字、かっこの数、閉じタグ忘れ等々・・・

ケアレスミスこそ、間違いに気が付きにくい。
故に修正に時間がかかる。

そんなケアレスミスも、パターンを覚えておくと、比較的気づきやすい。

ってことで、ケアレスミスの共有をしようという記事です。

うっかり文字列

私『おかしい、なんどやっても画像が表示されない。プログラムの理論的には正しいはずなんだ』

そんなふうに何度も頭を捻ってた。

ふっと、わからーん、ってぼーっと画面を見たら、想定外の場所、画面の左端に小さく画像が表示されている。

<table>
  <tr>
    <img>
  </tr>
</table>

こうだったのである。

<table>
  <tr>
    <td>
      <img>
    </td>
  </tr>
</table>

を書き忘れて、要素がテーブル外に吹っ飛んでいただけなのである。

これ気がつくのに30分かかった・・・(´;ω;`)

どういうこと?

table tr td

というふうに、各要素は出来ていて、そこに入れれるのは基本的にインライン要素。
使えないタグは、tableタグの外側に強制配置されます。

また、tableタグの中には、divは扱えません。
各要素をグループ化したいときには、などを使いましょう。