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

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

tableタグ(テーブルタグ)

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

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

ここにセル

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

1つ目のセル 2つ目のセル 3つ目のセル

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

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

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

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

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

あわせて読みたい


この記事をかいた人

ドレッド Webクリエイター、ライター

Webクリエイター&ライター。フリーランス目指していろいろと活動中。このブログではWeb制作やライティングでお役に立ちそうは知識から、ドレッドの雑記的な内容まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

HTML | Posted on 2016/11/09 19:19

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です