ダイナミックＨＴＭＬやＪａｖａＳｃｒｉｐｔなどホームページを賑やかにしてくれるものは多数あり、特にダイナミックＨＴＭＬは日々進化している新しいタグです。
この欠点は表現できるブラウザに限りがある場合がある、ということです。もっともこれは従来から言われてきたことですが。
美しく見栄えのするホームページを作るためにこれらを取り入れている方はたくさんあります。
一方、テーブル（表組）タグは古くからあるもので基本的なタグのひとつですが、これも美しく見栄えのするページを作るには欠かせないものです。ｈｔｍｌは画面の大きさに合わせて右端で自動的に改行しますから、観る人によってレイアウトが変わってきます。これを手っ取り早く解決するのがテーブルタグであり、なくてはならないものです。
テーブルタグもブラウザによって表現方法が若干異なったりしますが、それでも充分使えるタグなのです。
まずは基本をマスターし、そして応用して、簡単なタグの記述でありながら見栄えのするページを作ってみましょう。
ご注意！ テーブルタグには終了タグ（開始タグにスラッシュを加えたもの。例：＜ＴＡＢＬＥ＞で開始したら＜／ＴＡＢＬＥ＞で終了する）を省略できるものが多数あります。省略できるものは全て省略します。
また、タグの記述は全て全角文字で行いますので、そのまま張り付けることは出来ません。
まずは、この表をご覧になって下さい。
| 国語 | 社会 | 算数 | 理科
|
| やすし | 大変良い | 良い | 普通 | 普通
|
| きよし | 悪い | 普通 | 悪い | 大変悪い
|
| やすこ | 普通 | 普通 | 良い | 普通
|
| けいこ | 悪い | 大変悪い | 大変良い | 良い
|
ごく普通のオーソドックスな表です。
このソースは次のように記述されています。
＜table border=1＞
＜tr＞＜td＞＜td＞国語＜td＞社会＜td＞算数＜td＞理科
＜tr＞＜td＞やすし＜td＞大変良い＜td＞良い＜td＞普通＜td＞普通
＜tr＞＜td＞きよし＜td＞悪い＜td＞普通＜td＞悪い＜td＞>大変悪い
＜tr＞＜td＞やすこ＜td＞普通＜td＞普通＜td＞良い＜td＞普通
＜tr＞＜td＞けいこ＜td＞悪い＜td＞大変悪い＜td＞大変良い＜td＞良い
＜/table＞
|
少し煩わしいですが、よく見て下さい。
まず＜ｔａｂｌｅ＞ですが、「ここから表が始まります」と宣言しているわけです。
そして、＜ｔａｂｌｅ＞の中にborder=１と書いてあります。
枠線の太さは「１」ですよと指定しているわけです。
次の行以降ではまず最初に＜ｔｒ＞とありますが、これは各行の始まりを意味しています。
＜ｔｒ＞の後の＜ｔｄ＞は、各マス（セル）を表しています。
また、最初の＜ｔｒ＞の後には＜ｔｄ＞＜ｔｄ＞と連続しているのがわかりますね。これは欠損セルと言い、中には何も記述されていません。こうすると、上の見本の表の左上のセルのように、マス（セル）が存在しない形になってしまいます。
もし、欠損セルではなくて、マスはあるのだけど中に何も書いていない、という状態にしたければ、全角スペースを入力して下さい。
＜ｔｄ＞ ＜ｔｄ＞という風に記述します。
そうすると、下の表のようになります。
| | 国語 | 社会 | 算数 | 理科
|
| やすし | 大変良い | 良い | 普通 | 普通
|
| きよし | 悪い | 普通 | 悪い | 大変悪い
|
| やすこ | 普通 | 普通 | 良い | 普通
|
| けいこ | 悪い | 大変悪い | 大変良い | 良い
|
どう違うか、確認できましたか？
さて、上の表でなんの説明もなしに、borderという記述をtableタグの中に記述しましたが、これはいったい何なのでしょうか？
簡単に言えば、表のボーダー、つまり枠線のことですね。
これを色々と工夫することが出来ます。
まずはこれをご覧下さい。
唯我独尊 唯ちゃんが「我は独りで寂しいから尊んでみんな遊びに来てね」とささやく姿。
|
弱肉強食
| 弱い肉ばかり食べずに強い肉も食べなさい、ということ。強い肉を食べるにはそれなりに苦労するが、苦労のおかげで自分も強くなれる。楽な方に流されていると、弱い肉ばかりを食べてしまうことになり、自分自身も弱くなるよと言う戒め。
|
| 七転八倒 | 転んだのは７回なのに、８回も倒れた。つまり鈍くさいヤツという意味。
| | | | |
実は上の文章には表組が使われています。
ただし、borderの指定をしていません（あるいは、border=0でもオッケーです）。だから、枠線が描かれていないのです。
この文章を表組を使わずに書いたらどうなるでしょうか。
|
唯我独尊 唯ちゃんが「我は独りで寂しいから尊んでみんな遊びに来てね」とささやく姿。
弱肉強食 弱い肉ばかり食べずに強い肉も食べなさい、ということ。強い肉を食べるにはそれなりに苦労するが、苦労のおかげで自分も強くなれる。楽な方に流されていると、弱い肉ばかりを食べてしまうことになり、自分自身も弱くなるよと言う戒め。
七転八倒 転んだのは７回なのに、８回も倒れた。つまり鈍くさいヤツという意味。
|
このように、レイアウトがぐちゃぐちゃになってしまいます。
仮に、自分のＰＣの画面上で綺麗にレイアウトしたとしても、画面の大きさに合わせてブラウザは自動的に改行しますから、他の誰かのＰＣでは綺麗に見えないのです。
では、この表の枠線を表示してみましょう。
唯我独尊 唯ちゃんが「我は独りで寂しいから尊んでみんな遊びに来てね」とささやく姿。
弱肉強食
| 弱い肉ばかり食べずに強い肉も食べなさい、ということ。強い肉を食べるにはそれなりに苦労するが、苦労のおかげで自分も強くなれる。楽な方に流されていると、弱い肉ばかりを食べてしまうことになり、自分自身も弱くなるよと言う戒め。
| 七転八倒 | 転んだのは７回なのに、８回も倒れた。つまり鈍くさいヤツという意味。
| | | | |
ワープロならば画面を目で見てレイアウトが整っていれば、それでオッケーです。なぜなら最初から紙の大きさを指定してあるからです。
しかし、ブラウザに紙の大きさはありません。各人が持っているＰＣのディスプレイの大きさが紙の大きさです。作者の意図に関わらず勝手にサイズを変えてしまいます。
ですから、改行やスペースで形を整えることは出来ないんです。
見た目のレイアウトを整然とさせたい、けれども枠線は煩わしくて嫌だ、そういう方にはテーブルタグを「border＝０」での使用をお薦めします。
なお、実際には上の表は、さらにレイアウトを整えるためにもう少し技術を使っています。どうしても知りたい方はソースをごらんいただくとわかりますが、ここでは「見栄えを整形するのにテーブルタグは便利だ」ということをわかっていただければ結構です。また、さらに小さな画面環境ですと、この例の表示もグチャグチャになりますので、おかしいなと思った方はもう少し大きめのブラウザでごらんいただくか、フォントサイズを小さくしてご覧になって下さい。作者の意図が伝わると思います。
| border=0で、一部の文字だけ背景色を付けよう |
文字を強調する方法はいくつかあります。サイズを変えたり、フォントを変更したり、色を付けてみたり。
しかし、テーブルタグを使って、強調したい部分だけ背景色を指定することが出来ます。この講座の章見出しがそうですね。
こんな具合です。
これはborderを使って、例えば「１」にすると、こんな風になります。
ね、れっきとした表組になっているでしょう？
ソースは次の通りです。
＜table bgcolor=#00dd00 border=1＞
＜tr＞＜td＞＜font color=red＞ワインの保存方法＜/font＞＜/table＞
|
bgcolorという技を使っています。なお、このbgcolorは、＜ｔａｂｌｅ＞のタグの中にも指定できますが、＜ｔｄ＞の中に指定して、セルごとに色を指定することもできます。
こんな具合です。
これに枠線を付けてみます。border＝４でやってみましょう。
ね、楽しいでしょう？
まずは、下の表を見て下さい。
| 文 系理 系
| 国語 | 社会 | 算数 | 理科
| | やすし | 大変良い | 良い | 普通 | 普通
| | きよし | 悪い | 普通 | 悪い | 大変悪い
| | やすこ | 普通 | 普通 | 良い | 普通
| | けいこ | 悪い | 大変悪い | 大変良い | 良い
| | |
文系と理系のところが、横長になっていますね。そうです、セルふたつ分を使った大きなセルになっています。
どうやってこれを表現するのでしょうか？
セルひとつひとつの開始を表す＜ｔｄ＞タグの中に、「これは横にふたつ分の大きさですよ」と指示してやればいいのです。
なお、文字に色が付いているのは、この講座を見やすくするためで意味はありません。通常と同じく文字の前にフォントタグでいろ指定をするだけです。また、この部分だけ＜ｃｅｎｔｅｒ＞タグで文字の位置を中央に置いています。
では次に、縦にふたつぶんを指示してみましょう。
このふたつの指示を使って書いた表を次に示します。
成績表文 系理 系
| 国語 | 社会 | 算数 | 理科
| 男
子 | やすし | 大変良い | 良い | 普通 | 普通
| | きよし | 悪い | 普通 | 悪い | 大変悪い
| 女
子 | やすこ | 普通 | 普通 | 良い | 普通
| | けいこ | 悪い | 大変悪い | 大変良い | 良い
| | | |
ソースを示します。今回は、文字色など表組の技術に関係ないものも省略せずにそのまま提示しておきます。
＜table border=1＞
＜tr＞
＜td colspan=2 rowspan=2＞＜font color=#ff00ff＞＜center＞成績表 ←縦と横の両方を指示。
＜td colspan=2＞＜center＞＜font color=#ff8888＞文 系
＜td colspan=2＞＜center＞＜font color=#ff8888＞理 系
＜tr＞
＜td＞国語
＜td＞社会
＜td＞算数
＜td＞理科
＜tr＞
＜td rowspan=2＞＜font color=blue＞男＜br＞子 ←改行で「男子」を２行に表示。
＜td＞やすし
＜td＞大変良い
＜td＞良い
＜td＞普通
＜td＞普通
＜tr＞
＜td＞きよし
＜td＞悪い
＜td＞普通
＜td＞悪い
＜td＞大変悪い
＜tr＞
＜td rowspan=2＞＜font color=blue＞女＜br＞子
＜td＞やすこ
＜td＞普通
＜td＞普通
＜td＞良い
＜td＞普通
＜tr＞
＜td＞けいこ
＜td＞悪い
＜td＞大変悪い
＜td＞大変良い
＜td＞良い
＜/table＞
|
いかがですか？
ここで注意しなくてはいけないのは、rowspanを使った行とそうでない行では＜td＞の数が異なるということですね。
また、いくつもの列や行に渡るセルに書き込む文字は、色々な手法で整形することが出来ますので、勉強してみて下さい。
僕は面倒くさいので主に＜ｂｒ＞やスペースを使っていますが、以前書いたように「ディスプレイの大きさに左右される」ので、小さな表はともかく、大きな表では本来のタグを使うべきでしょう。
枠線の太さを自由に設定することが出来ます。
外周の太さについてはborderで指示します。
では、それぞれの仕切りの枠線はどうするのでしょうか？
下の表を見て下さい。
成績表文 系理 系
| 国語 | 社会 | 算数 | 理科
| 男
子 | やすし | 大変良い | 良い | 普通 | 普通
| | きよし | 悪い | 普通 | 悪い | 大変悪い
| 女
子 | やすこ | 普通 | 普通 | 良い | 普通
| | けいこ | 悪い | 大変悪い | 大変良い | 良い
| | | |
全部の線が太くなりましたね。
これは＜ｔａｂｌｅ＞タグの中に、「ｃｅｌｌｓｐａｃｉｎｇ」で指定します。
残念ながら、僕はこの表に満足できません。
一斉に全ての線が太くなってしまっては、全体がもっちゃりしてしまいますし、本来作表する際に線の太さを変える時は「関連性の強いところは細い線で仕切り、弱いところや段落的な表現をするために太い線を使う」のが普通だからです。
そこで、次のような表を作ってみました。
成績表 | 文 系 | 理 系
| 国語 | 社会 | | 算数 | 理科
| |
男
子 | やすし | | 大変良い | 良い | | 普通 | 普通
| | きよし | | 悪い | 普通 | | 悪い | 大変悪い
| |
女
子 | やすこ | | 普通 | 普通 | | 良い | 普通
| | けいこ | | 悪い | 大変悪い | | 大変良い | 良い
| | | |
これは欠損セルを使った目の錯覚です。
太くしたい横線をいれるときに＜ｔｒ＞を三つ、縦線を太くしたいところには＜ｔｄ＞をふたつ挿入しています。
ところで、外枠線の太さはｂｏｒｄｅｒで指定するわけですが、全体が立体的に浮き上がったように表現されます。ちょうど左上から光が当たったように上と左が白、右と下が黒になります。
しかし、表全体をｂｇｃｏｌｏｒ＝＃００ｆｆ００で明るい緑色にしてみたときはどうでしょうか？
立体感を表す外周部分にもそれにふさわしい色合いになってもらいたいものです。これを指定することが出来ます。
左の表は＜ｔａｂｌｅ＞の中に、ｂｇｃｏｌｏｒ＝＃００ｆｆ００を指定したものです。
一方、右の表は枠線の色を指定したものです。比べてみて下さい。
成績表 | 文 系 | 理 系
| 国語 | 社会 | | 算数 | 理科
| |
男
子 | やすし | 大変良い| 良い | | 普通 | 普通
| | きよし | | 悪い | 普通 | | 悪い | 大変悪い
|
女
子 | やすこ | 普通 | 普通 | | 良い | 普通
| | けいこ | | 悪い | 大変悪い | 大変良い| 良い
| | | | | | | | | |
|
成績表 | 文 系 | 理 系
| 国語 | 社会 | | 算数 | 理科
| |
男
子 | やすし | 大変良い| 良い | | 普通 | 普通
| | きよし | | 悪い | 普通 | | 悪い | 大変悪い
|
女
子 | やすこ | 普通 | 普通 | | 良い | 普通
| | けいこ | | 悪い | 大変悪い | 大変良い| 良い
| | | | | | | | | |
|
このふたつの表の違う部分だけ、つまり最初のテーブルタグの違いを下に記述しておきます。
左の表| ＜table border=4 cellspacing=1 bgcolor=#00ff00＞
| 右の表| ＜table border=4 cellspacing=1 bgcolor=#00ff00 bordercolorlight=#ddffdd bordercolordark=#00bb00＞
| | |
上の左の表はメリハリがはっきりしています。一方右の表は落ち着いた感じがします。好きな方を選んで下さい。
さて、上のソースで気がついた人がいると思いますが、何も表が緑だからって、外周の枠線を緑系統にする必要はないんです。
こんなのはいかがでしょうか？
成績表 | 文 系 | 理 系
| 国語 | 社会 | | 算数 | 理科
| |
男
子 | やすし | 大変良い| 良い | | 普通 | 普通
| | きよし | | 悪い | 普通 | | 悪い | 大変悪い
|
女
子 | やすこ | 普通 | 普通 | | 良い | 普通
| | けいこ | | 悪い | 大変悪い | 大変良い| 良い
| | | | | | | | | |
これは、bordercolorlightにyellowを、bordercolordarkにredを指定したものです。
またこれを利用して、ちょっと風変わりな表を作ることもできます。
成績表 | 文 系 | 理 系
| 国語 | 社会 | | 算数 | 理科
| |
男
子 | やすし | 大変良い| 良い | | 普通 | 普通
| | きよし | | 悪い | 普通 | | 悪い | 大変悪い
|
女
子 | やすこ | 普通 | 普通 | | 良い | 普通
| | けいこ | | 悪い | 大変悪い | 大変良い| 良い
| | | | | | | | | |
立体感が無くなりましたが、あまり見かけないちょっと目を引く表組になったと思いませんか？
あまり使っている人がいないので、新鮮に感じると思います。といっても、とらおランドではよく使っているので、「新鮮に感じない」というひとは愛読者です。
ソースは次の通りです。
|
＜table border=2 cellspacing=1 bgcolor=#00ff00 bordercolor=#0000ff＞
|
さあ、この講義もあとひとふんばりです。
次の三つの表を見比べてみて下さい。
文字のまわりのスペースに差がありますね。
これはテーブルタグの中にｃｅｌｌｐａｄｄｉｎｇで指定します。
上の表のソースは次の通りです。
＊の部分に数字が入ります。上から順に「１」「３」「５」「１０」です。
| ＜table bgcolor=orange border=3 cellspacing=1 cellpadding=＊＞ |
見出しのかわりに使えるほか、ちょっとしたリンクボタンとしても使用できます。画像なんかに比べるとずっと軽いですから、利用価値が大きいです。
このコーナーを作ろうとしたときに、他に同様の講座がないかどうか調べてみました。
ありました。
だからといって、決して盗作をしたわけではありません。
幸いにして、「テーブルタグを活用（濫用？）しているよという腕に覚えのある方がいましたら、相互リンクしましょう。」とのことですので、みなさまにもご覧いただきたくここに紹介させていただきます。
http://www.geocities.co.jp/SiliconValley-PaloAlto/9761/「テーブルタグで遊ぼう委員会」です。
一部内容が重複しているかも知れませんが、ここの講座自体はオリジナルです。
「テーブルタグで遊ぼう委員会」の内容に関わらず、元々書きたいと思ったことを全て記述したに過ぎませんので、念のため。
[「これでいいのかヤフージャパン」に戻る]
[「読者によって成長するｗｅｂ・しないｗｅｂ」「ｗｅｂコンテンツの弱点」に進む]