HTML
HTML5
HTMLタグ
スマートフォン
CSS
CSSプロパティ
CSS・HTML便利ツール
HTML色見本
配色組み合わせツール
特殊文字
JAVA
Android
PHP
Smarty修飾子
EXCEL
WEB便利ツール
TOP
>
WEB便利ツール
> テーブル(TABLE、TH、TD)タグ
ツイート
CSSのテーブルジェネレーター
table、th、td のスタイルの動きを確認する事ができます。
サンプル1
サンプル2
サンプル3
▼生成したテーブルです。
-
A
B
100
あいうえお
かきくけこ
さしすせそ
200
ABC
DEF
GHI
JKL
300
900
999
▼以下を設定して下さい。
TABLE
border-collapse :
指定なし
collapse セルのボーダーを重ねる
separate セルのボーダーの間隔をあける
border-spacing :
px
ボーダー
-
border
border-top
border-bottom
border-left
border-right
枠太:
px 枠種:
none
hidden
solid
double
dotted
groove
ridge
inset
outset
dashed
dotted
枠色:
余白周り
margin
(上下左右):
px
padding
(上下左右):
px
背景色
:
文字サイズ
:
pt
文字色
:
影
水平:
px 垂直:
px ぼかし半径:
px 距離:
px 色:
inset:
TH
ボーダー
-
border
border-top
border-bottom
border-left
border-right
枠太:
px 枠種:
none
hidden
solid
double
dotted
groove
ridge
inset
outset
dashed
dotted
枠色:
背景色
:
文字サイズ
:
pt
文字色
:
横位置:
-
left 左寄せ
right 右寄せ
center 中央寄せ
justify 均等割付
縦位置:
-
baseline
top 上端揃え
middle 中央揃え
bottom text-bottom
text-top
text-bottom
super
sub
空白セル
show
hide
余白周り
padding
(上下左右):
px
TD
ボーダー
-
border
border-top
border-bottom
border-left
border-right
枠太:
px 枠種:
none
hidden
solid
double
dotted
groove
ridge
inset
outset
dashed
dotted
枠色:
背景色
:
文字サイズ
:
pt
文字色
:
横位置:
-
left 左寄せ
right 右寄せ
center 中央寄せ
justify 均等割付
縦位置:
-
baseline
top 上端揃え
middle 中央揃え
bottom text-bottom
text-top
text-bottom
super
sub
空白セル
show
hide
余白周り
padding
(上下左右):
px
▼生成したCSSのソースです。
table.css_gen { bottom:2px solid #fff; border-collapse:collapse; font-size:20pt; -moz-box-shadow:3px 3px 5px 0px #ddd; -webkit-box-shadow:3px 3px 5px 0px #ddd } table.css_gen th { bottom:1px solid #fff; background-color:navy; color:white; text-align:right; vertical-align:middle; padding:10px; empty-cells:; } table.css_gen td { bottom:1px solid #fff; background-color:#ddeeff; color:navy; text-align:justify; vertical-align:top; padding:5px; empty-cells:; }
▼生成結果のURLです。
http://web-dou.com/tool/css_gen_table.php?table_border_collapse=collapse&table_border_spacing=&table_border=bottom&table_border1=2&table_border2=solid&table_border3=%23fff&table_margin=&table_padding=&table_bgc=&table_fsize=20&table_fcolor=&table_shadow=1&table_shadow1=3&table_shadow2=3&table_shadow3=5&table_shadow4=0&table_shadow5=%23ddd&th_border=bottom&th_border1=1&th_border2=solid&th_border3=%23fff&th_bgc=navy&th_fsize=&th_fcolor=white&th_text_align=right&th_vertical_align=middle&th_padding=10&td_border=bottom&td_border1=1&td_border2=solid&td_border3=%23fff&td_bgc=%23ddeeff&td_fsize=&td_fcolor=navy&td_text_align=justify&td_vertical_align=top&td_padding=5&text=
WEB便利ツール
テーブル(TABLE、TH、TD)タグのCSSを生成
グラデーションのCSSを生成
吹き出しのCSSを生成
見出し(リボン・吹き出しなど)のCSSを生成
アニメーションのCSSを生成
角丸(1~8点)のボックス(DIV)のCSSを生成
リスト(UL、LI)タグのCSSを生成
ボックス(DIV)タグのCSSを生成
リング(A)タグのCSSを生成
配色組み合わせ
文字列を &><などに変換
EXCEL表→HTMLのテーブルに変換する
HTMLタグ(TABLE、TR、TH、TD)で表を作成