HTML講習

CSSでの表組（PDF 素材）

CSSでの表組　

CSSでの表デザインは、xhtmlの表を基礎にしており、【table要素】【caption要素】【tr要素】【thres/tfoot/tbody要素】【col要素】【colgroup要素】【th/td要素】から構成。

display（table用の設定値）

各要素に表関連要素としての役割を割り当てることができる。

table（その要素をブロックレベルの表にする。＝XHTML table要素）

inline-table（その要素をインラインの表にする。＝XHTML table要素）

table-row（その要素を行にする。＝tr要素）

table-row-group（その要素を本体グループにする。＝tbody要素）

table-header-group（その要素をヘッダーグループにする。＝theader要素）

table-footer-group（その要素をフッターグループにする。＝tfooter要素）

table-column（その要素を列にする。＝col要素）

table-column-group（その要素を列グループにする。＝colgroup要素）

table-cell（その要素をセルにする。＝th要素・td要素）

table-caption（その要素をキャプションにする。＝caption要素）

表の階層

以下のような階層となる。




（階層上）th・td＞tr＞thead・tfoot・tbody＞col＞colgroup＞table（階層下）

caption要素

表にキャプション（タイトル）を付ける場合は、caption要素を使用する。table要素開始タグの直後に記述する。

タグ記述

開始タグ：＜caption＞

終了タグ： ＜/caption＞

属性

【id】【class】【title】【lang】【dir】【xml:lang】

※キャプションの位置は、以下のcaption-sideで指定する。

表のキャプションの位置（caption-side）

表のキャプションの位置を指定するプロパティ。

top　bottom（表ボックスの上または、下に配置する。ブロック要素となり、表ボックス（ブロックレベル）とのマージンは相殺される。）

※キャプションの行揃えは、text-alignで指定する。

表関連要素のレイアウト方法（table-layout）

表関連要素のレイアウト方法を指定するためのプロパティ。

auto（ブラウザ自動。テーブル全体を読み込んでから、その内容に応じて各列の幅を決定。デフォルト。）

fixed（固定。widthで表全体を指定する必要がある。その値で幅を固定。最初の横一列を読み込んだ段階で列の幅を決定。表示が速い。）

表のボーダーの表示モデル（border-collapse）

表のボーダーの表示モデルを指定するプロパティ。

separate（分離ボーダーモデル。デフォルト。）

ollapse（統合ボーダーモデル。）

IE7では、以下のempty-cellsと組み合わせると、ボーダーが出ない。IEを含めるのあれば、collapseを使用する事。

セルのボーダー間のスペース（border-spacing）

分離ボーダーモデル（table-layout: separate）の場合、隣接するセルのボーダー間のスペースを指定するプロパティ。上下のスペースは、相殺される。

＜長さ＞（上下左右のスペース。マイナス値不可。）

＜長さ＞＜長さ＞（左右 上下のスペース。マイナス値不可。）

空セルのボーダーと背景の表示方法（empty-cells）

分離ボーダーモデルの場合に、空セルのボーダーと背景の表示方法を指定するプロパティ。

show（空セルのボーダーと背景が表示される。デフォルト。）

hide（空セルのボーダーと背景が表示されず、親要素の背景が透過される。）

※IE6以下は、サポートされない。

空セル

空セルとは、

内容が空のセル。

visibilityでhiddenと指定されているセル。

内容に空白文字しか含まれていないセル。




※「 」など文字参照は空セルではない