テーブルタグを生成できるツールです。表の大きさや背景色、行数と列数、文字揃えなどを設定することができます。

テーブルタグカテゴリー

テーブルの設定

列数と行数
列数 (1~20)
行数 (1~100)
表の大きさ
全体の幅 (ピクセル数・%)
全体の高さ (ピクセル数・%)
枠線・余白
枠線の表示
外枠の太さ (ピクセル数)
セルの間隔 (ピクセル数)
セル内の余白 (ピクセル数)
背景色
表の背景色 色見本
セルの背景色 色見本
文字の表示位置
横方向
縦方向
見出しセル
見出し
見出し背景色 色見本

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

使い方

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

  • 各設定項目で表の設定を行ってください。設定内容の詳細はテーブルタグカテゴリーでご覧になれます。(このツールでは、セルを個別に指定したりセル同士を結合させることはできません)
  • 列数は1~20、行数は1~100の範囲で指定できます。数値を大きくすると処理に時間がかかる場合があります。
  • 背景色について
    表全体の背景色 … 枠線を含めた背景色
    セル全体の背景色 … 枠線を含めない背景色
    見出しの背景色 … 見出しの列(行)部分のみの背景色
  • コピーしたものを設定項目に貼り付けた場合、そのままではサンプルの表示に反映されません。その場合は更新するボタンを押してください。
  • リアルタイムで更新させたくない場合は、リアルタイム更新を無効にするにチェックを入れてください。この場合、更新するボタンを押した時のみ更新されることになります。
  • このツールはJavaScriptで作成されています。JavaScriptを利用できない環境では動作しません。

参考

  • 設定内容によっては、生成されるコードに非推奨属性が含まれる場合があります。
  • thead、tfoot、tbody などは、必要に応じてご自分で設定してください。
  • 極細の枠線は次の方法で設定することができます。
    枠線の表示 … 表示しない/または、枠線の表示 … 表示する+外枠の太さ0
    セルの間隔1
    表全体の背景色#000000 (この色が枠線の色になります)
    セル全体の背景色#ffffff (この色がセル内の色になります)
    ※色は好みに合わせて変更してください