テーブル
コピペですぐ使えるテーブルのサンプルコードを動作・特徴別にまとめています。
無料ツール
テーブルを自由に作成

行数・列数・枠線・背景色・文字色・セル結合などを設定して、HTMLとCSSを自動生成できます。

テーブル作成ツールを使う
新しいタブで開きます

基本

基本のテーブルを作る方法
CSVデータを読み込んでページネーションを作る方法

表示非表示

チェックボックスでテーブルの列を表示・非表示にする方法

デザイン

行とセルが2段階で浮き上がる立体テーブルを作る方法
テーブルの行を交互に色分けする方法

レイアウト

テーブルの行や列を結合する方法
固定ヘッダー付きテーブルを作る方法
横スクロール対応テーブルを作る方法

操作

CSVデータをAjaxで切り替えるページネーションを作る方法
省略記号（…）付きCSVページネーションを作る方法
最初・最後へ移動できるCSVページネーションを作る方法
前へ・次へボタンを付きCSVページネーションを作る方法

コンテンツ

Googleマップをテーブルに表示する方法
PDFをテーブルに表示する方法
iframeをテーブルに表示する方法
YouTube動画をテーブルに表示する方法
画像付きテーブルを作る方法
テーブルにタイトルを付ける方法

入れ子

テーブル内にテーブルを表示する方法

検索・絞り込み

CSVテーブルに検索フォームとページネーションを付ける方法
テーブル検索で一致した文字をハイライトする方法
キーワード検索でテーブルの行を絞り込み表示する方法

データ操作

ボタンクリックでテーブルの列を追加・削除する方法
ボタンクリックでテーブルの行を追加・削除する方法

PHP/CSV/HTML/CSS/JavaScript

CSVデータをAjaxで切り替えるページネーションを作る方法