複雑なテーブル・表も一発で作成!「Table Tag Generator」

WEB
スポンサーリンク

意外と多いんですよね、テーブルタグで「表」を作る場面。
料金表だったりスケジュールだったり…
しかしエクセルのようにワンクリックで結合ができるといったような事ができないので、複雑な表を綺麗に作るのはけっこう難しいものなのです。

 

表はテーブルタグで書きます。
表の作り方、テーブルタグの書き方は、サルワカさんの説明がとてもわかりやすいです。
表(table)の作り方と装飾の変え方【HTML&CSS】

 

今回は、テーブルタグを作成してくれるツールをひとつご紹介します。
 

Table Tag Generator

テーブルタグジェネレータ
Table Tag Generator

Table Tag Generator(テーブルタグジェネレーター)です。

 

Table Tag Generatorの基本的な使い方

列と行を指定すると、リアルタイムにプレビューとソースが変更されます。

テーブルタグジェネレータ

あとは「HTML」のところに表示されたソースをコピペするだけ!簡単です。

 

セルを結合

よく使用するのはセルの結合です。
これも簡単。
プレビューに表示されているテーブルの結合したいセルを選択して、

テーブルタグジェネレータ

「結合」をクリック。

テーブルタグジェネレータ

プレビューもHTMLソースもリアルタイムで変更されます。
結合されたセルを選択して「分割」をクリックすると元に戻せます。

 

テーブルに項目列・項目行を作る

テーブルに項目列・項目行(th)を作ります。
プレビューに表示されているテーブルの項目にしたいセルを選択して(ドラッグすると複数選択できます)、

テーブルタグジェネレータ

「td ↔ th」をクリック。
同じ作業を再度行うと、thをtdに戻す事ができます。

 

テーブルに文字を入れる

表の内容もここで書けちゃいます。
メニューの「文字」(このキャプチャではクリック済みなので「出力」と表示されています)をクリックして、文字を入れて、「出力」をクリック!

テーブルタグジェネレータ

文字が入りました。

テーブルタグジェネレータ

テーブルのスタイル

表のスタイルも変更できます。
メニューには「class」が、また、「CSS」のフィールドが用意されています。

テーブルタグジェネレータ

「class」ではテーブルやセルに任意のクラスをつけることができます。

テーブルタグジェネレータ

「CSS」のフィールドには直接CSSを記述していく事ができます。
セルのサイズを変更して、色をつけてみました。

テーブルタグジェネレータ

あとはCSSもコピペするだけ!

 

Table Tag Generator まとめ

ちゃんと書こうとすると少し面倒なテーブルも、Table Tag Generatorを使えばサクサク作る事ができます。おすすめです!

 

コメント

タイトルとURLをコピーしました