意外と多いんですよね、テーブルタグで「表」を作る場面。
料金表だったりスケジュールだったり…
しかしエクセルのようにワンクリックで結合ができるといったような事ができないので、複雑な表を綺麗に作るのはけっこう難しいものなのです。
表はテーブルタグで書きます。
表の作り方、テーブルタグの書き方は、サルワカさんの説明がとてもわかりやすいです。
表（table）の作り方と装飾の変え方【HTML＆CSS】
今回は、テーブルタグを作成してくれるツールをひとつご紹介します。
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を使えばサクサク作る事ができます。おすすめです！
コメント