TABLEの修飾のやり方

昨日のCSSネタ、どこかで「TABLEタグにならCSSが使える」という記事を目にしたので
やってみたんです。どこだったのかなーと思ったら、えっけんさんの ミラーマンですよ でした。
しかもあちらは、「TABLEタグ内なら文字修飾にCSSが使える」という内容だったりします。
ああ、勘違い。おかげで大暴走してしまいました。


さて今日は、昨日紹介したTABLEについて少し解説することにします。
まず、最初に紹介した二重線のテーブルをもう一度見てみましょう。

例えばこんなTABLE。 上と下だけ二重線です。

このタイプのテーブルのタグは、以下のようになっています。
まず、基本的なTABLEタグはこのようになってます。

ここに文字を書くんですよ

これは、一行一列のテーブルを作成するタグですね。
これに関しては、むっしゅさんの【タグ講座】テーブル　　基本編 が詳しいです。 bgcolorの後の" "の中を適当にいじくれば、背景をいろんな色にできます。 ほしい色が分からないときは、ここ を見てくださいね。 はい、これで基本のTABLEが出来上がりましたが、実は二重線のテーブルは、 この基本TABLEに呪文をかければ簡単に作れるんですよ。 その呪文を加えたのが、下のTABLEです。

style="border-top:double 2pt;border-bottom:double 2pt;border-color:#9999ff;" > ここに文字を書くんですよ

さて、加えた呪文はなんでしょうか？
そうですね、
style="border-top:double 2pt;border-bottom:double 2pt;border-color:#9999ff;"
というのが呪文なんです。
この呪文についてちょっと解説をしてみましょう。
まず最初にあるstyle="  "なんですが、これはCSSの基本でして、
この"  "の中に、加えたい呪文を書くことでいろんな修飾ができるんです。

そしてその後に続いているのがborder-top:double 2pt;のフレーズ。
これのborderというのは読んで字の如くボーダー、境界線のことです。
そしてborder-topは、４方向ある境界線のうち上にある境界線に修飾をしたいときに使います。
border-○○の○○にrightと書けば右の、leftなら左の、bottomなら下の境界線の、
修飾をすることができるというわけです。
つまりこのborder-○○は、修飾したいものが何であるのかを示しているんですね。

そして肝心の修飾する内容を示しているのが「double 2pt」のフレーズです。
初めのdoubleは、線の種類を指定する単語です。
ココに書く単語によって、境界線のパターンを変えることができます。
それから、最後の2ptは「線の太さを2ptにしろ」という呪文です。

最後にborder-color="  "のところですが、
ここの"  "の中にRGB値を書けば、境界線の色を指定することができます。
ほしい色のRGB値が分からないときはRGBエステを使いましょう。

以上を組み合わせることで、いろんなTABLEを作ることができるというわけです。
以下、いろいろ試してみました。

dotted と書くと点になります。 太さは5pt。水玉みたい。	左右だけdoubleです。 こういうのもアリです。
inset と書くと立体になります。 5ptですが、使い道あるかなぁ	outset。insetの反対ですが これも、使い道あるのかなぁ
４方向ともdoubleです。 この色カワイイですね。	上下doubleで左右がdotted。 この色は#ff00ccです。

こんな風に、基本さえ覚えてしまえばあとはその組み合わせでいろいろできるんですよ。
初めのうちは大変でしょうから、上に書いてあるタグをコピーアンドペーストして使ってみましょう。
HTMLは、初めのうちは他人のヤツをパクって覚えるのが一番です（オイ）。
ただし、あんまりこりすぎないようにしましょうね。
使いすぎると、ゴテゴテしちゃって見にくくなりますから。

以上、色々な修飾をしたTABLEの作り方講座でした。
「ここのやり方がわからないよ」とか「このTABLEのタグってどうなってるの」など、
ありましたらコメントの方に遠慮なくお書きください。
できる限りお答えしますよ。