写真ブロガーのためのHTML入門 Vol.3

写真ブロガーのためのHTML入門の第3弾です。
今日はテーブルタグについて説明します。

tableタグ（テーブルタグ）

このタグは少し使い方がややこしいです。
ちゃんと伝わるかどうかわかりませんが、がんばります！

まずこのtableタグで作ることができるのは、Excelの表のようなものだとお考え下さい。
横に行があって、縦に列があるような感じですね。行と列が交わるところが、1つのセルです。これをテーブルタグで表現するとこうなります。

<table>
     <tr>
          <td>ここにセル</td>
     </tr>
</table>

ここにセル

このように書くと、1行1列の1つのセルが表示されます。
あれれ、tableの他にも、「tr」とか「td」というタグが出てきたぞ、と思いますよね。これらはそれぞれ、
「table row」
「table data cell」
の略です。rowというのは行のことですよね。1つのrowの中に、data cellが1つ入っていますよ、というのが上で取り上げたサンプルです。さて、それではセルの数を増やしてみましょう。セルを表現するのはtdタグでした、ですので、

<table>
     <tr>
          <td>1つ目のセル</td>
          <td>2つ目のセル</td>
          <td>3つ目のセル</td>
     </tr>
</table>

1つ目のセル

2つ目のセル

3つ目のセル

このように書くことで、1つの行に、横方向に3つのセルが追加されます。
それじゃあ行を増やすのは、どうしたらよいでしょうか。勘のいい方はわかると思いますが、trタグを増やします。

<table>
     <tr>
          <td>1つ目のセル</td>
          <td>2つ目のセル</td>
          <td>3つ目のセル</td>
     </tr>
     <tr>
          <td>4つ目のセル</td>
          <td>5つ目のセル</td>
          <td>6つ目のセル</td>
     </tr>
</table>

1つ目のセル	2つ目のセル	3つ目のセル
4つ目のセル	5つ目のセル	6つ目のセル

このように2つめのtrタグのセットを追加しました。これで2行3列の表を表現することができました。

今日はこの辺にしておきましょう。tableタグにはExcelと同じように隣り合うセルを結合する、ということができます。これはかなり複雑な書き方になっていまして、Webデザイナーの私でも駆け出しのころはいまいちわかりにくかったくらいです。興味がありましたら、自分で調べてみてくださいね。それでは、また次回のHTML入門をお楽しみに！