HTMLのテーブルを直感的に作成することができる「HTML Div Table Generator」

HTMLのテーブルを直感的に作成することができる「HTML Div Table Generator」

HTMLのテーブルを直感的に作成することができる「HTML Div Table Generator」

HTML Div Table Generatorは、HTMLテーブルを直感的に作成することができるジェネレーターです。テーブルは、tableタグだけでなく、divタグでの生成も可能です。

HTML Div Table Generatorの使い方

HTML Div Table Generatorにアクセスして、「Settings」で設定を決めます。

テーブルの設定

Table / Div タグの種類
Border 枠線
Width 横幅
Cell Padding セル内の余白

右側のマスでセルの数を指定します。

セルの数を指定

下にスクロールしてテーブルジェネレーターが表示されるので、テーブルの内容を入力していきます。左側のプレビューか右側のコードのどちらかを変更すると、リアルタイムでもう一方が変更されます。

テーブルの作成

プレビュー画面に表示されるアイコンでは、行や列を追加したり削除したりすることができます。

テーブルが完成したら、コードをコピーして使いましょう。

あとがき

Dreamweaver‎などのWYSIWYGが搭載されたエディタを使えば、直感的にテーブルを作成することはできますが、Web上でサクッと作成できるのが良いですね。divを使ってテーブルを表現するのもあっという間にできてしまいます。

テーブルを実装するのが苦手とか、面倒だなという場合にぜひ使ってみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です