写真ブロガーのための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入門をお楽しみに!