勉強だと思うから嫌だからゲームだと思えばいいんだと言われて育ってきましたが、思い込みでどうにかなるんなら今頃僕もアインシュタインですね。別になりたくはないけど。あ、いやアインシュタインが嫌いとかじゃないですよ？ただ思い込みじゃなく、好きだということは何をするにしても必要ですよね。
まぁともかく、今日は表の書き方、タイトルどおりTABLEタグについてご説明いたします。
図表なんてそんなに滅多に使うことでもなかろうに、と思ってはいけない。実はホームページの作成においてはTABLEタグは意外なところにも使われていたりします。今日はそんな話。
<TABLE></TALBE>
まずは基本的なことから。図表要素はHTMLにおいて、表を構成する他のサブ要素とともに用いられ、柔軟に表を設計することを可能にする。しかし、表の作成はタグが複雑になりがちで、不適切なタグの開始や終了によってブラウザにうまく認識されない、思う結果にならないなどといった問題が起こることもある。
表要素は他の要素と違いいくつかのサブ要素を持っています（これは今までに紹介したプロパティ、タグの<>の内側にかく属性、とは違うもの）。
TABLE要素のサブ要素には主に以下のようなものがあげられます。これらのタグは今まで出てきたタグのプロパティと違って、<TABLE>このようにTABLEタグの開始タグと終了タグの間に入れ子になるように書きます。</TABLE>
<CAPTION></CAPTION>
表題要素。このタグに括られた文字は表題として扱われ、表の上に中央寄せされて表示されます。また省略することができます。
<TR></TR>
TR要素は表の１行をあらわします。このタグでTD要素を括るようにして表の一行を定義します。
<TH></TH>
<TD></TD>
TH・TD要素は表の各行の個々の列を表します。THとTDの違いは、THタグに囲まれた文字列はその行もしくは列の見出しとして扱われます。特に区別しない場合にはTDを用いることが多いようです。
また、通常各行（TRタグで括られた行）にあるTH＋TDの数は等しくないといけません。つまり一行目に3コマあるときには二行目も三行目もそれ以降も全ての行はTH+TDの数が三つなければなりません。特別な場合に、セルを統括するときには特別なプロパティを指定した上で、THあるいはTDの数を減らせますが、これはまた出てきたときに説明したいと思います。
これだけだと何がなんだか分かりづらいと思いますので、簡単な例を挙げて説明したいと思います。
<TABLE border="1"><!-- TABLEの始まりを表します。borderプロパティは表の枠線の太さをあらわします -->
<CAPTION>表：東証株価指数</CAPTION><!-- 表の説明文です。 -->
<TR><!-- 表の一行目の始まりを表します。</TR>までが一行と認識されます。 -->
<TH bgcolor="#c0ebc0"> </TH><!-- THは見出しタグですが、これは一番上の行の一番左側のセルということになります。ワザと空白にしています。 -->
<TH bgcolor="#c0ebc0">株価指数</TH><!-- 一番上の行の二番目のセルです。表題は株価指数です。 -->
<TH bgcolor="#c0ebc0">前日比</TH><!-- 同様に三番目のセルです。これも表題タグです -->
</TR><!-- ここまでが表の一行になります。 -->
<TR><!-- ここから表の二行目になります。 -->
<TH bgcolor="#c0ebc0">TOPIX</TH><!-- 二行目の一番左のセルです。表題はTOPIXです -->
<TD>1530.64</TD><!-- TDも一コマをあらわすためのタグでしたね。二番目のセルです。表題ではないことに注意してください。 -->
<TD>3.10%</TD><!-- 同様に三番目のセルです。 -->
</TR><!-- 二行目はここまでです。 -->
<!-- 以下同じように続きます。 -->
<TR>
<TH bgcolor="#c0ebc0">大型株</TH>
<TD>1555.30</TD>
<TD>3.24%</TD>
</TR>
<TR>
<TH bgcolor="#c0ebc0">中型株</TH>
<TD>1583.96</TD>
<TD>2.75%</TD>
</TR>
<TR>
<TH bgcolor="#c0ebc0">小型株</TH>
<TD>2301.95</TD>
<TD>2.50%</TD>
</TR>
<TR>
<TH bgcolor="#c0ebc0">市場第二部</TH>
<TD>4318.03</TD>
<TD>2.22%</TD>
</TR>
<TR>
<TH bgcolor="#c0ebc0">マザーズ</TH>
<TD>1485.80</TD>
<TD>3.22%</TD>
</TR>
<TR>
<TH bgcolor="#c0ebc0">REIT</TH>
<TD>1643.87</TD>
<TD>-0.58%</TD>
</TR>
</TABLE>
実際には各タグの間に改行を入れる必要はありませんし、入れてもブラウザには反映されませんが、ここでは分かりやすさを重視するために、敢えてTR（行）のまとまりごとに改行を入れてみました。
各行の説明はコメント<!-- -->（前に出てきましたね。これにはさまれた文字列はブラウザからは無視されるのでした。）に譲って、ここでは簡単な補足をしたいと思います。
まずTABLEタグにborderプロパティが指定されていると思います。うえにも説明を書きましたが、これは表の枠線と中の区切り線の太さを指定しています。もちろん数字が大きければ大きいほど太い線になります。０を指定すると線が見えなくなります。
また、各THのタグにbgcolorプロパティが指定されているのが分かりますか？TR・TH・TDもそれぞれ要素ですので、このように各要素についてのプロパティも指定することができるんです。bgcolorは文字からもなんとなく想像がつきますが、背景色のことです。行或いは列の見出しと言ってもそのままでは通常のセルとなんら変わりはないので、ワザと背景色を変えて強調しています。色の指定については前にやった16進数のsRGBですね。
では上のHTMLを実際にブラウザに通してみます。
| 株価指数 | 前日比 | |
|---|---|---|
| TOPIX | 1530.64 | 3.10% |
| 大型株 | 1555.30 | 3.24% |
| 中型株 | 1583.96 | 2.75% |
| 小型株 | 2301.95 | 2.50% |
| 市場第二部 | 4318.03 | 2.22% |
| マザーズ | 1485.80 | 3.22% |
| REIT | 1643.87 | -0.58% |
きちんと表題が一番上に表示されているのがわかりますね。・・・ところで、表題の背景色ですが、どうやら僕の執筆環境、というか、このブログの仕様上THタグにプロパティが指定できないみたいです。（本来は出来るはずなんですけどね・・・）
色つきで見たい方はご自分で確かめてください^^;
ところで、僕の場合もそうでしたが、Tableタグを使う場合中にいろんなタグを入れ子にするために途中でわけが分からなくなることも結構あります。きちんと各タグを終了させないとブラウザが混乱して望むような結果が得られないことがありますよ。そんなときには一つ一つタグを紙に書いて開始と終了をあわせてから入力するといいかもですよ。
さて、表についてはもう一つあります。上でもちょろっと言いましたが、TABLEタグには図表作成という本来の目的以外に利用される場合があります。
それはページのコンテンツのレイアウトを整えることです。
いままでの講座で習ったことを使ってHTMLを実際に自分で作ったことがある方は分かると思いますが、HTMLってなかなか思うようにコンテンツの場所を定めることができないものです。
たとえば、文章を二カラム（新聞のように二つのまとまりで文章を表示させる）で表示させることなんかなかなか難しいと思います。
こんなときにはTABLEを使えば解決します。
<TABLE border="0"><!--borderを0にしてならべても区切り線が表示されないようにします。 -->
<TR>
<TD><p>Webページを記述するためのマークアップ言語。W3Cが作成している規格で、最新版はHTML 4.01。HTMLは文書の論理構造や見栄えなどを記述するために使用される。また、文書の中に画像や音声、動画、他の文書へのハイパーリンクなどを埋め込む</p></TD>
<TD><p>Webページのレイアウトを定義する規格。これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれたが、これは、文書の論理構造を記述するという本来のHTMLの目的に反するため、文書の視覚的構造を規定する枠組みとしてCSSが新たに策定された。CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述したHTML)から切り離すことができ、ユーザが複数のレイアウトから適当なものを選択することができるようになる。WWWに関する標準化団体W3Cで標準化されている。</p></TD>
</TR>
</TABLE>
こうすると、このように2カラムに表示させることができました。
| Webページを記述するためのマークアップ言語。W3Cが作成している規格で、最新版はHTML 4.01。HTMLは文書の論理構造や見栄えなどを記述するために使用される。また、文書の中に画像や音声、動画、他の文書へのハイパーリンクなどを埋め込む | Webページのレイアウトを定義する規格。これまで、WebページのレイアウトはHTMLを用いて記述され、HTMLにはレイアウトに関する仕様が大量に取り込まれたが、これは、文書の論理構造を記述するという本来のHTMLの目的に反するため、文書の視覚的構造を規定する枠組みとして CSSが新たに策定された。CSSを使うと、フォントや文字の大きさ、文字飾り、行間などの見栄えに関する情報を文書本体(及び文書の論理構造を記述した HTML)から切り離すことができ、ユーザが複数のレイアウトから適当なものを選択することができるようになる。WWWに関する標準化団体W3Cで標準化されている。 |
TABLEって便利ですねー
ただし、以前にも言いましたが、HTMLはあくまで文章構造の要素をブラウザに示すためのマークアップ言語で、このような表示・レイアウトは本来CSSに任せるべきものです。
よって上のようなTABLEレイアウトはちょっとしたページなどではCSSをいちいち書くのが面倒くさいときに使われるテクニックで、本来推奨されるべきものではありません。
でもインターネット上を見てみても未だにたくさんのページがTABLE要素によってレイアウトされています。要するTABLEとCSSではお互い一長一短があるわけです。ここらへんはまたおいおい説明していきたいと思います。（とくにCSSに入ったらたっぷりやりたいですね）
では、本日もTABLEタグ一個でしたが、これで終わりたいと思います。TABLEタグには他にもいろんなプロパティがありますが、それも含めておいおい出てきたときに説明したいと思います。
