テーブルCSS設定


HTMLテーブルCSS設定確認ツールです。設定情報を入力して、CSS作成ボタンを押して下さい。
前画面にCSS作成情報が設定されます。

分類 属性 属性値の指定 意味
テーブル テーブル属性 table-layout: テーブル(表)の表示方法を指定する。
auto:テーブル(表)の列幅を自動レイアウトにする。(初期値)
fixed:テーブル(表)の列幅を固定レイアウトにする。
border-collapse: セルのボーダーの表示方法を指定する。
collapse:隣接するセルのボーダーを重ねて表示する。
separate:隣接するセルのボーダーを間隔をあけて表示する。
border-spacing: セルのボーダーの間隔を数値で指定する。(単位はpx、em、ex、等)
値を1つ指定した場合: [上下左右]の間隔。
値を2つ指定した場合: [左右][上下]の間隔。
ボーダー関連属性 border-width: ボーダーの太さを数値で指定する。(単位はpx、em、ex、等)
※複数値の指定可能
border-color: 枠線の色を指定する。(#000000などの記述やカラーネームで色指定)
※複数値の指定可能
border-style: ボーダーのスタイルを指定する
none:ボーダーは表示されず、太さも0(初期値)
hidden:ボーダーは表示されず、太さも0
solid:1本線
double:2本線
groove:立体的に窪んだ線で表示。
ridge:立体的に隆起した線で表示。
inset:上と左のボーダーが暗く、下と右のボーダーが明るく表示され、
    ボーダーで囲まれた領域全体が立体的に窪んだように表示
outset:上と左のボーダーが明るく、下と右のボーダーが暗く表示され、
    ボーダーで囲まれた領域全体が立体的に隆起したように表示
dashed:破線で表示
dotted:点線で表示
※複数値の指定可能
背景・前景色指定 color: 文字色(前景色)を指定する。(#000000などの記述やカラーネームで色指定)
background-color: 背景色を指定する。(#000000などの記述やカラーネームで色指定)
マージン・
パディング指定
margin: ・マージン(領域間のスペース)の値指定を指定する。(単位はpx)
※複数値の指定可能
padding: パディング(領域内のスペース)の値指定を指定する。(単位はpx)
※複数値の指定可能
大きさ height: 領域の高さを指定する。
auto:状況に応じて自動設定する。(初期値)(単位はpx、等)
・・%:%値で指定。
width: 領域の幅を指定する。
auto:状況に応じて自動設定する。(初期値)(単位はpx、等)
・・%:%値で指定。
セル         ボーダー関連属性 border-width: ボーダーの太さを数値で指定する。(単位はpx、em、ex、等)
※複数値の指定可能
border-color: 枠線の色を指定する。(#000000などの記述やカラーネームで色指定)
※複数値の指定可能
border-style: ボーダーのスタイルを指定する
none:ボーダーは表示されず、太さも0(初期値)
hidden:ボーダーは表示されず、太さも0
solid:1本線
double:2本線
groove:立体的に窪んだ線で表示。
ridge:立体的に隆起した線で表示。
inset:上と左のボーダーが暗く、下と右のボーダーが明るく表示され、
    ボーダーで囲まれた領域全体が立体的に窪んだように表示
outset:上と左のボーダーが明るく、下と右のボーダーが暗く表示され、
    ボーダーで囲まれた領域全体が立体的に隆起したように表示
dashed:破線で表示
dotted:点線で表示
※複数値の指定可能
背景・前景色指定 color: 文字色(前景色)を指定する。(#000000などの記述やカラーネームで色指定)
background-color: 背景色を指定する。(#000000などの記述やカラーネームで色指定)
マージン・
パディング指定
margin: ・マージン(領域間のスペース)の値指定を指定する。(単位はpx)
※複数値の指定可能
padding: パディング(領域内のスペース)の値指定を指定する。(単位はpx)
※複数値の指定可能
大きさ height: 領域の高さを指定する。
auto:状況に応じて自動設定する。(初期値)(単位はpx、等)
・・%:%値で指定。
width: 領域の幅を指定する。
auto:状況に応じて自動設定する。(初期値)(単位はpx、等)
・・%:%値で指定。
※複数値の指定
値を1つ指定した場合: [上下左右]の値。
値を2つ指定した場合: [上下][左右]の値。
値を3つ指定した場合: [上][左右][下]の値。
値を4つ指定した場合: [上][右][下][左]の値。


 

h51602