cssを使ったテーブル

テーブルにcss（スタイルシート）を使うと、色んな事が出来るよね。
どんな事ができるのか？って色々有り過ぎて書ききれないけども、基本的な事とcssならではの効果だけ触れます。
スタイルシートは全てのプラウザに対応してる訳では無いので、プラウザによっては表示されません。
gaiaxで使用する場合は、『"』と書いてある部分を『'』に変更して使用して下さい。

まずは基本の記述法。

テーブルに使う場合でも、body（ページ）にcss効果をかける時も記述法は同じです。
属性　:　値　;
↑
分かりやすいようにスペースを空けて書きました。

属性とか値って書くと、難しくなるけども、チョー基礎のHTMLタグで例えたら
<font size="3">←これの font の部分が属性で、3 の部分が値だと思ってくれれば良いです。
だから、<font size="3"> を、cssバージョンで表すとしたら、font-size:12pt; てなカンジになります。

次はcssテーブルの記述法

<TABLE Style="スタイル指定">

<TD Style="スタイル指定">

Style=" と、書いた部分から、"までの部分が、cssとなるので、
<TABLE CELLSPACING="15" ALIGN="CENTER" Style="スタイル指定">
というカンジに、通常のテーブルタグと組み合わせて使用する事も可能です。

1つのページにあるテーブル全てに同じ効果を出したい場合、<HEAD> ～</HEAD>に

TABLE{　テーブル全体の指定内容 }

TD{　セルの指定内容　}
-->
</style>

このように記述します。
詳しくはコチラに説明してます。

テーブルの枠線を変える

まずはなんと言っても、cssテーブルの良さというか、基本は枠線の形を色々と変えられる事でしょう。
枠の種類は以下の通りです。（主に使うのだけだけど）

枠を表示させない。

none

dashed

double

dotted

solid

枠線指定の書き方は、以下の通りです。
<TABLE Style="border:枠の太さ枠の形枠の色;">

上の枠線の形状を表したテーブルでは、枠の太さはsolidとdashedが1ptです。
doubleとdottedは、2pt以上の太さに指定しないと効果がありません。
noneは、太さや色は無記入でOK！
1ptなどの単位が分からないって人はココを参考にしてね！！

上の書き方では、border: だけを指定しましたが、上下、左右の枠の形をそれぞれ変える事も可能です。
border-top　上の線
border-right　右の線
border-bottom　下の線
border-left　左の線
こうやって、細かく指定すれば、上下、左右の枠の形や色、太さもそれぞれ変えられます。

ゴチャゴチャ可いてても分かり辛いので、見本を見てね！

<TR>

<TD>

文字を書く場所

</TD>

</TR>

</TABLE>

文字を書く場所

上と下を 2pt の太さで dotted の形。色は #ff4d80 に指定してマス。
そして、右と左を none に指定しました。

<TR>

文字を書く場所

</TD>

</TR>

</TABLE>

文字を書く場所

今度は、<TABLE>部分と<TD>部分にcssを混ぜ込んでみました。
分かるかな？
両端部分が色違い＆形違いの二本線になってるでしょ？？

テーブルの中の背景画像を固定

　　左一列固定

background-image:url(背景画像のURL);background-repeat:repeat-y;background-position:left;

右一列固定

background-image:url(背景画像のURL);background-repeat:repeat-y;background-position:right;

上一列固定

background-image:url(背景画像のURL);background-repeat:repeat-x;background-position:top;

下一列固定

background-image:url(背景画像のURL);background-repeat:repeat-x;background-position:bottom;

中央１コ固定

background-image:url(背景画像のURL);background-repeat:no-repeat;background-position:center;

左下１コ固定

background-image:url(背景画像のURL);background-repeat:no-repeat;background-position:left bottom;

左上１コ固定

background-image:url(背景画像のURL);background-repeat:no-repeat;background-position:left top;

右下１コ固定

background-image:url(背景画像のURL);background-repeat:no-repeat;background-position:right bottom;

右上１コ固定

background-image:url(背景画像のURL);background-repeat:no-repeat;background-position:right top;

<TABLE Style="background:#ffffff;border:1pt solid #000000;background-image:url(背景画像のURL);background-repeat:repeat-x;background-position:top;">
<TR>
<TD><BR>
上一列固定
<BR><BR>
</TD></TR></TABLE>

上一列固定

←こうやって書けば、上一列固定される訳です。
ちなみに、background:#ffffff; ってのは、テーブルの中の背景色です。

テーブルの中の文字指定

テーブルの中の文字の大きさと色を変えてみましょう。

font-size:数字;color:カラーコード（カラーネーム）;

文字の大きさについては、コチラを参考にしてネ。

文字の大きさを10pt
文字の色をperuにしました。

</TD></TR></TABLE>

文字の大きさを10pt
文字の色をperuにしました。

文字の大きさを13pt
文字の色を#3399CCにしました。

</TD>
<TD Style="font-size:11px;">

文字の大きさのみを11pxにしました。

</TD></TR></TABLE>

文字の大きさを13pt
文字の色を#3399CCにしました。

文字の大きさのみを11pxにしました。

オマケ

<TR>

文字色だけを変えたい場合は
color:カラーコード;だけを記入。

</TD></TR></TABLE>

文字色だけを変えたい場合は
color:カラーコード;だけを記入。
勿論、カラーネームでもＯＫ！

テーブルの中の書体指定

テーブルの中の文字の書体を変えてみましょう。

font-family:書体名;

<TR>

書体を"MS UI Gotic"に指定しました。

</TD></TR><TR>

書体を"Verdana"に指定しました。

</TD></TR><TR>

書体を"ＤＦＰ麗雅宋"に指定しました。

</TD></TR><TR>

書体を"ＭＳゴシック"に指定しました。

</TD></TR></TABLE>

書体を"MS UI Gotic"に指定しました。

書体を"Verdana"に指定しました。

書体を"ＤＦＰ麗雅宋"に指定しました。

書体を"ＭＳゴシック"に指定しました。

ゴチャゴチャしててごめんなさい。
もう少し、簡単なテーブルタグを使うんだった。（泣）

テーブルの中の文字幅を空ける

letter-spacing:数字;

数字の部分は、文字間をどれぐらい空けるかという事です。
数字の後ろには単位も記入してください。
単位はコチラを参考にして下さい。
(%以外の単位を使ってください）

<TR>

文字と文字の間隔が開いてます。

</TD></TR></TABLE>

文字と文字の間隔が開いてます。
これは、文字間を10pxに指定してます。

<TABLE Style="background:#ffffff;border:1pt solid #ff00b3;letter-spacing:5pt;">
<TR>
<TD>
今回は文字間を5ptに指定してみました。
</TD></TR></TABLE>

今回は文字間を5ptに指定してみました。

テーブルの中の行間を広げる

line-height:数字;

数字の部分は、行間をどれぐらい空けるかという事です。
数字の後ろには単位も記入してください。
単位はコチラを参考にして下さい。

<TR>

行間を20pt開けてみました。

</TD></TR></TABLE>

行間を20pt開けてみました。
←こっちの行間と比べれば、ココの方が行間が開いてるでしょ。

<TABLE Style="background:#fff8ff;border:1pt dashed #ff00b3;line-height:170%;">
<TR>
<TD>
今度は行間を170%開けました。
</TD></TR></TABLE>

今度は行間を170%開けました。
％で指定する時は、必ず100%以上にしてね。
100%が0って事です。

文字の大きさは、小さい方が見やすいから変えただけです。

テーブルの中を縦書き

writing-mode:tb-rl;

このタグはTD部分にお使い下さい。

このように記述します。

<TR>

縦書きになってるでしょ？

</TD>
</TR>
</TABLE>

縦書きになってるでしょ？

でも、こんなの使うのかなぁ？
そもそも、パソコンで縦書きって読みにくいよね。

これは高さを150に指定してあります。

テーブルの透過

filter:Alpha(opacity='数字');

数字の部分は、透過度です。
１～100までの中の好きな数字を入れてください。
数字が小さいほど、透けます。

注>>透過させる場合は、テーブルに背景色を付けないと意味ないよ！
　　背景色＝background:カラーコード;

<TR>

<TD>

これは、数字を60にしてます。

</TD>

</TR>

</TABLE>

これは、数字を60にしてます。
分かりやすいように壁紙を付けてみました。
background:#ffffff;
↑これは背景色（白）の指定

テーブルに影

filter:progid:DXImageTransform.Microsoft.shadow(color=影の色,strength=影の幅,direction=影の角度);

な…長い…
影の幅は1～255までの数字を入れてください。
数字が大きいほど大きな影になります。
角度は、0 45 90 135 180 225 270 315 のいづれかを入れます。
まぁ、サンプル見て下さい。

<TABLE Style="border:1pt solid #efefef;filter:progid:DXImageTransform.Microsoft.shadow(color=#c9c9c9,strength=8,direction=135);">
<TR>
<TD>
これ、背景色ありません。
背景色がないと、テーブルの中までフィルターがかかります。
つまり、テーブルの中まで影が表示されるって事
</TD>
</TR>
</TABLE>

これ、背景色ありません。
背景色がないと、テーブルの中までフィルターがかかります。
つまり、テーブルの中まで影が表示されるって事

これは、上のテーブルと全く同じ影を使ってます。
（青字の部分ゎ同じって事）
background:#ffffff; を追加し、背景色を白に設定しました。

<TABLE Style="background:#ffffff;border:2pt double #ff66cc;filter:progid:DXImageTransform.Microsoft.shadow(color=#ffb3ff,strength=25,direction=315);">
<TR>
<TD>
今度ゎ影の幅を25　角度を315に設定しますた。
影長いし、表示される角度も変わったでしょ？ｗｗ
</TD>
</TR>
</TABLE>

今度ゎ影の幅を25　角度を315に設定しますた。
影長いし、表示される角度も変わったでしょ？ｗｗ

影の角度は、0だと真上、45だと右斜め上、90だと右　というように時計回りで変化していきます。

テーブルを重ねて表示

z-index:数字;で順番
position:absolute;top:上からの位置;left:左から位置;で、位置を指定する事により、好きな位置にテーブルを表示できます。
このタグ、ページの上からのﾋﾟｸｾﾙ、左からのﾋﾟｸｾﾙ　で指定するもんで、こぉゆ～長いページで表示させるのゎ厄介Nё
だって上からのピクセル数、計るの大変（ｱｾ
だから、アイフレームで表示させてマスо 詳しい解説ゎ　そのうちｗｗ

とりあえず、よく使うのは、このぐらいかな？
てヵ、他の書くのが面倒なので、またそのうちｗ