Lesson7: 表を作ってみよう


 今のままでは文章の箇条書きなどしかできません。
 文章をすっきりと、見やすくするには?
 数字やものごとをキレイに見やすくするには?
 そのために、表機能テーブルタグを使います。


Tableタグを使ってみる


 テーブルタグの基本構造はこんな感じです。


 …ぱっと見よくわからないですね。
 普段Excelなどの表計算ソフトを使う方はなんとなくわかるかもしれません。
 ひとつひとつ説明しましょう。

 tableタグ
 こちらはテーブルタグの始まりと終わりを示すタグです。
 ここのタグの中に罫線の表示・非表示などの設定を施すことが可能です。

 trタグ
 行(いわゆる横並び)全体をまとめます。
 この中にセル用のタグを記述することで、ひとつの行として働きます。


 tdタグ
 行の中のひとつひとつ(セル)をあらわします。
 これで囲まれた内容がセルの中に表示されます。

 それぞれの関連はこうです。


 なぜベムベラベロなのかとかドロンジョ一味なのかとかは管理人がぱっと思いついたものなのでどうでもいいとして、
 なんとなくこれで関連がわかっていただけたらなあと思います。
 同じ色で囲まれたものがそこに表示されています。つながりだけわかっていただければ。


Tableタグでできること


 さて、tableタグでは何ができるのでしょうか。

 align=""
 Lesson:5で説明した位置を指定するタグです。それがそのままテーブルのタグにも使えます。
 このtableタグに入れると、テーブル全体が左揃え、中央、右揃えとまるごと位置がかわります。

 height="" width=""
 テーブル全体の大きさを変えることができます。
 heightは縦、widthは横です。
 ””には数字と%かpxを入れることができます。
 % → ウィンドウに対する比率で指定できます。ウィンドウの大きさを変えれば、その分テーブルの大きさも変わります。
 px → テーブルの大きさをピクセル値で指定できます。なので、ウィンドウの大きさが変わってもテーブルの大きさは固定です。

 bgcolor=""
 テーブル全体の背景色を変えます。””には前々回にてお教えしたカラーコードが使えます。


tr・tdタグでできること


 それでは次にtrタグです。
 tableタグで使えたタグは大きさを指定するheight、width以外は使うことができます。
 この場合、alignタグは行全体の文字列の位置、bgcolorタグは行全体の背景色を指定します。

 tdタグですが、こちらはtableタグで使えるほとんどのタグが使えます
 heightwidthタグなどの大きさを変更するタグはセル単体の大きさを。
 bgcolorはセル単体の背景色を。
 alignはセル内の文字・画像などの位置を変えます。
 セルの中身だけいじりたいというときにはtdタグを直接いじるほうがいいですね。
 しかし、全体的に変えたいというときは、tableタグやtrタグに入れたほうがすっきりしてHTMLが見やすいです。


テーブルのかたちを変える


 さて、大きさなどを変えることはできましたが、こんどは少し変わったテーブルの形にしてみましょう。  セル同士を結合させ、複数セルをひとつにする方法です。





 こんな感じですね。
 実際に表示してみましょう。


 なんだかベムベラベロが合体しています。
 今のは横のセルを結合し、ひとつのセルにしてみました。

 

 こんどはドロンジョ一味のところをいじってみましょう。


 ボヤッキーが仲間はずれになってしまいましたね…。
 こんな風に、横のセルを結合させてひとつのセルにすることができます。
 それでは、縦はどうやるのでしょう?




 今度は左の三人が一緒のセルに入りました。
 縦のセルを結合したのです。
 なんとなくわかっていただけたらと思います。

 colspan=""
 これで横のセルを結合できます。””にはセルの数を入れましょう。
 rowspan=""
 これで縦のセルを結合できます。同じく、””には結合したいセルの数を入れましょう。


まとめ


 これで表の説明は終わりです。
 少し複雑だったでしょうか?
 使っていくうちに慣れていくと思うので、なんとかがんばってください。

 しかしこのテーブル、位置も大きさも指定できますし少し便利ですが、デザイン配置などに使うのは推奨できません
 なぜなら、ブラウザ環境などでデザインが変わってしまうことが多々あるからです。
 デザインなら、今後知るであろうCSSを用いて配置するのが一般的です。(残念ながらこのサイトでは取り扱いません)


→ Lesson8へ