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