テーブルタグ作成ツール


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

テーブルタグカテゴリー


テーブルの設定

【列数と行数】
列数 (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(この色がセル内の色になります)
    ※色は好みに合わせて変更してください