【HTML】tableその②：こんな書き方していませんか？よくある３つのNG例

皆さんこんにちは！
プログラミング初心者さんがつまずきやすいポイントを丁寧に解説、解消していく「初心者つまずき解消ブログ」です。

引き続きHTMLのtable要素について解説していきたいと思います。
前回の記事ではtableそのものや各要素の意味について解説しました。
今回はよくあるNGな書き方例を解説付きで紹介していきます。

NG例1：不要なbr要素（改行要素）を入れている

<table border="1">
  <br>
  <tr>
    <td>名前</td>
    <td>味</td>
    <td>色</td>
  </tr>
  <br>
  <tr>
    <br>
    <td>レモン</td>
    <td>酸っぱい</td>
    <td>黄色</td>
  </tr>
  <br>
  <tr>
    <td>メロン</td>
    <td>緑</td>
    <td>あまい</td>
  </tr>
</table>

〈 解説 〉
不要なbr要素（改行要素）を入れています。tr要素は行を表現しているので改行要素を入れる必要はありません。
また、構造上この位置にbr要素やp要素を入れてもブラウザ上ではテーブルの外の要素として表示されます。つまり意図しない動きになってしまうのでやめましょう。caption要素など、table要素とtr要素の間に入れることができる要素はありますが、わからないうちはtable直下にtr、tr直下にtdのルールを守って書きましょう。

NG例２：tdとtrが逆

<table border="1">
  <td>
    <tr>名前</tr>
    <tr>味</tr>
    <tr>色</tr>
  </td>
  <td>
    <tr>レモン</tr>
    <tr>酸っぱい</tr>
    <tr>黄色</tr>
  </td>
  <td>
    <tr>メロン</tr>
    <tr>緑</tr>
    <tr>あまい</tr>
  </td>
</table>

〈 解説 〉
見直しの際になかなか気付きにくい間違いです。tdとtrが逆になっています。
これは、要素の意味をしっかり理解していない為に起こるミスです。
trは「table row」の略。「row」とは真っ直ぐ横に並んだ列のことです。このように、使う要素がどんな意味を持っているか考えながら書くことはとても大事になってくるので気をつけましょう。
因みに、tdは「table data」の略です。「data」はデータ、つまり内容のことです。

NG例３：formとの併用

<table>
  <form action="">
    <tr>
      <td>名前:</td>
      <input type="text">
    </tr>
    <tr>
      <td>住所</td>
      <input type="text">
    </tr>
  </form>
</table>

〈 解説 〉
この書き方には２点の誤りがあります。
１点目はform要素の記述箇所です。先程のbr要素の例でもありましたが、ここにformタグを書くのはNGです。うまく動かなくなります。
tableと併用したいときはformを外に（親に）して、その中にtableを書きましょう。
２点目はinput要素の部分です。テーブル内にinput要素を書き込みたい場合はtdの中に書きましょう。でないと表示の際にtableの外に追いやられてしまいます。

以上の修正を加えると次のようなコードになります。　

<form action="">
  <table>
    <tr>
      <td>名前:</td>
      <td><input type="text"></td>
    </tr>
    <tr>
      <td>住所</td>
      <td><input type="text"></td>
    </tr>
  </table>
</form>

これらのパターンのように、構造や意味を理解して書かないとなかなかうまくいきませんし、技術も上達しません。
CSSやJavaScript等のプログラミング言語でも同じです。上達のためには焦らず一歩一歩、理解してから次のステップへ進んでいくことが大切です。