CSSスタイル_表&アウトライン

CSSテーブル

表の枠線[border]

table,th,td { border:1px solid blue; }

前の例のテーブルには、2つの線の枠線があります.これはtable,thおよびtd要素に独立した枠線があるためである.表を単一の線の枠線として表示する必要がある場合は、折りたたみ枠線(border-collapse)プロパティを使用します.

折りたたみボーダー[border-collapse]

このプロパティは、表の枠線を単一の枠線に結合するかどうかを設定します.このプロパティはtableのみです.値:seperate(デフォルト)、collapse

注意:規定がなければ!DOCTYPEではborder−collapseが予想外の結果を生じる可能性がある.

table { border-collapse:collapse; }

表の幅と高さ[width],[height]

定義テーブル(table,th,td等)の幅と高さ

table { width:100%; }
th    { height:50px; }

表テキストの水平位置合わせ[text-align]

td    { text-align:right; }

表テキストの垂直位置合わせ[vertical-align]

td { height:50px; vertical-align:bottom; }

表の内側の余白[padding]

表中の内容(th,td)と枠との距離

を設定する.

td { padding:15px; }

表テキストの色[color]

テーブル(table,th,td)のテキスト色

を設定する.

table { color:blue; } <!-- td       -->
th    { color:red;  } <!-- th       -->

表背景色[background-color]

テーブルの背景色

を設定する.

table { background-color:blue; } <!-- td        -->
th    { background-color:red;  } <!-- th        -->

セルの枠線間隔[border-spacing]

隣接セルの枠線間の距離

を設定します.

注:「枠線分離」モード

のみ

table.two
{
    border-collapse: separate;
    border-spacing : 10px 50px; <!--     10px,     50px -->
}

表タイトルの位置[caption-side]

表タイトルの配置位置を設定し、top,bottomの値をとることができます.

caption
{ caption-side:bottom }

空のセルを表示するかどうか[empty-cells]

空のセルを表示するかどうかを設定します.値はhide、showです.

注:「枠線分離」モード

のみ

table
{ border-collapse: separate; empty-cells : hide; }

表レイアウト[table-layout]

このプロパティは、テーブルの行、列がどのように表示されるかを設定します.値はfixed、automaticです.

固定レイアウトアルゴリズムは比較的速いが、あまり柔軟ではなく、自動アルゴリズムは比較的遅いが、従来のHTMLテーブルをより反映することができる.

table.one
{ table-layout: automatic }

レイアウトタイプ
特長
固定テーブルレイアウト
固定テーブルレイアウトは、自動テーブルレイアウトと比較して、ブラウザがテーブルをより速くレイアウトできるようにします.固定表レイアウトでは、水平レイアウトは、セルの内容に関係なく、表の幅、列の幅、表の枠線の幅、セルの間隔にのみ依存します.固定テーブルレイアウトを使用すると、ユーザーエージェントは最初のローを受信した後にテーブルを表示できます.
自動表レイアウト
自動表レイアウトでは、列の幅は、列のセルに折り曲げられていない最も広い内容で設定されます.このアルゴリズムは、最終的なレイアウトを決定する前にテーブル内のすべてのコンテンツにアクセスする必要があるため、遅い場合があります.

CSSプロファイル

輪郭色[outline-color]

p 
{ outline-color:#00ff00; }

輪郭スタイル[outline-style]

p 
{ outline-style:dotted; }

輪郭幅[outline-width]

p
{ outline-width:thick; }

以上のプロパティは、outlineと略記できます.たとえば、次のようになります.

p 
{ outline:#00ff00 dotted thick; }

詳細は、W 3 Schoolを参照してください.