テーブル用の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を利用できない環境では動作しません。

参考