スタンダード・デザインラボ

一覧表

枠線	border
横幅	width
背景	background
ボーダー	border
テキストの位置	vertical-align
表の隙間	border-collapse border-spacing

＊「width」や「border」などは、「文字デコ・基本のCSSの命令文（プロパティ）」に書き方を紹介しています。

命令文（プロパティ）

vertical-align

「<td>」に指定出来る命令文です。
　表の中に入れるテキストやオブジェクトを、「上揃え」「真ん中揃え」「下揃え」に指定できます。
　書き方は…

vertical-align :	top ;	上詰め
	niddle ;	中央揃え
	bottom ;	下詰め

　こんな感じになります。

topだと、こういう感じの表示。

middleだと、こんな感じ。デフォルトの値です。

bottomだと、こんな感じです。

border-collapse

「<table>」に指定出来る命令文。
　表の枠の隙間を、無くすか、有りにするかの指定です。
　書き方は…

border-collapse :	collapse ;	無し
	separate ;	有り

　表示は、こんな感じの違いが…

separate

collapse

border-spacing

「<table」で使える命令文。
　ひとつ上の項目「border-collapse : separate ;」の時にだけ指定できます。隙間の大きさを数値で指定できます。
　書き方は…

border-spacing :

○px ;

隙間の幅

　実際に表示確認してみる。
テーブルスタイルシート・テスト



　テーブルのボックスはちょっと特殊で、中には基本の命令文（文字デコ・基本のCSSの命令文（プロパティ））が上手く効かない命令文も有ります。

「<table>」タグは、ほぼブロック要素、「<tr>」「<td>」は、微妙な要素と覚えておけば、いい感じがします。
　厳密な指定をする場合は、「Tables」とか、「HTMLクイックリファレンス」とか、調べてみてください。どちらにせよ、ブラウザや環境によって、見え方が左右されることが有ります。

　ちなみに、後者のリンクはオススメです。前者のリンク先「W3C」のスタイルシートが網羅されています。日本語で、説明されていますので、なんとなく分かってきたら、こういう所で「辞書をひく」ように調べ物が出来るようになると思います。

■次のページはコチラから。
テーブルタグ・デザイン

■CSSメインメニュー
実用的スタイルシート入門