CSS 付きの HTML テーブルを作成

サイズ・配色・ホバー動作を選ぶと、プレビューとコピー用の HTML/CSS がその場で更新されます。

ブラウザ内でローカルに実行

CSS 付きの HTML テーブルを生成する手順

列数と行数を決め、配色とマウスオーバー時の動作を選ぶと、プレビューとコピー用の HTML/CSS がその場で更新されます。

テーブルはブラウザ内で生成されます。データは送信されず、プレビューとコードは同じマークアップで、コピーしたコードに透かしや外部リンクは入りません。

  1. 列数は 1〜50、行数は 1〜100 で指定します。行数には見出し行が含まれ、7 行なら見出し 1 行とセル 6 行になります。
  2. テーブルスタイル(青・緑・グレー・オレンジ・茶色・黒・色なし)を選びます。色なしを選ぶとデザインは自動的にスタイルなしに切り替わります。
  3. デザイン(行を交互に配色・ヘッダーのみ・スタイルなし)を選びます。
  4. セルにプレースホルダー(行:1 セル:1)を入れるか空にするか、マウスオーバーで行を強調するかを決めます。
  5. HTMLをコピーを押してコードをクリップボードに入れ、ページに貼り付けます。

生成されるマークアップ・上限・ホバー規則

生成されるコードの内容

出力欄には <style> ブロックとテーブルが入ります。テーブルは <table class="tftable" border="1"> で、見出し行は <thead>、セルの行は <tbody> にまとめられます。CSS はこのクラスだけを対象にするため、同じページに複数を貼っても id を分ける必要はありません。

下のプレビューは同じマークアップを描画しているので、見えているとおりのコードがコピーされます。プレースホルダー(ヘッダー1、行:1 セル:1)はページの言語で書かれ、出力に透かしや外部リンクは含まれません。

サイズの上限と不正な入力

列は 1〜50、行は 1〜100 までです。入力が空、または範囲外の間は、コード欄の上のステータス行が範囲を伝え、表示中のテーブルは最後に有効だったサイズのまま変わりません。

入力欄から離れると値は最も近い上限・下限に合わせられます(999 は 50 になり、空欄は最後の有効な値に戻ります)。文字は入力時に取り除かれ、12abc は 12 になります。

行のハイライト・配色・コピー

行のハイライトはスクリプトではなく CSS のルール(table.tftable tbody tr:hover)として出力されるため、貼り付けたテーブルに JavaScript も id も不要です。配色は 6 種類の固定パレットから選び、スタイルなしでは border 属性だけが残ります。

HTMLをコピーは出力欄の内容をクリップボードに入れます。コードがサーバーへ送信されることはありません。

最近使ったツール: