テーブル用CSS設定ツール


テーブル用のCSSを設定できるツールです。枠線のスタイルやセルの背景色などを、CSSを使って設定することができます。

CSS テーブルカテゴリーHTML テーブルタグカテゴリー


テーブルの設定

HTMLの設定
【列数と行数】
列数 (1〜20)
行数 (1〜50)
【キャプション】
表題
【見出しセル】
見出し

CSSの設定
【表全体】
全体の幅 px、%、他
全体の高さ px、%、他
外側の枠線  色  型
枠線の重なり
全体の背景色 色見本
【キャプション】
文字の位置 横方向
【コードの表示】
【通常のセル】
セルの枠線  色  型
セルの背景色 色見本
セル内の余白 上下  左右 px、%、他
文字の位置 横方向  縦方向
【見出しセル】
セルの枠線  色  型
セルの背景色 色見本
セル内の余白 上下  左右 px、%、他
文字の位置 横方向  縦方向

1-1 1-2 1-3
2-1 2-2 2-3

CSSコード

HTMLコード

使い方

テーブルの表示を実際に確認しながら、各種設定を行うことができます。設定を完了したコードはテキストエリアに表示されるので、それをコピーしてお使いください。

  • まずHTMLの設定で、表の列と行、キャプション(表のタイトル)、見出しのセルなどを設定してください。設定内容の詳細は、「HTML テーブルタグカテゴリー」でご覧になれます。
  • 続いてCSSの設定で、枠線や背景色、余白など、見栄えに関する設定を行なってください。設定内容の詳細は、「CSS テーブルカテゴリー」でご覧になれます。
  • このツールでは、セルを個別に指定したりセル同士を結合させることはできません。
  • 「列数」は1〜20、「行数」は1〜50の範囲で指定できます。数値を大きくすると処理に時間がかかる場合があります。
  • 表の幅や高さ、枠線の太さ、余白(パディング)などの項目に 0 以外の数値を指定する場合は、単位(px 等)の指定を忘れないように注意してください。単位に関する詳細は、「長さの単位」でご覧になれます。
  • クラス名「example」の部分は、ご自分の状況に合わせて書き直してください。クラスに関する詳細は、「クラス名を使った指定」をご覧ください。(クラスの代わりにIDを使用することもできます)
  • CSSコードの貼り付け場所に関しては、「外部ファイルにまとめて設定する」「ページ内にまとめて設定する」をご覧ください。
  • コピーしたものを設定項目に貼り付けた場合、そのままではサンプルの表示に反映されません。その場合は「更新する」ボタンを押してください。
  • リアルタイムで更新させたくない場合は、「リアルタイム更新を無効にする」にチェックを入れてください。この場合、「更新する」ボタンを押した時のみ更新されることになります。
  • このツールはJavaScriptで作成されています。JavaScriptを利用できない環境では動作しません。

参考