つぶやき
-ブログ-

Tableを簡単に作成できるツール「Table Tag Generator」の使い方

2022年12月26日

料金表や会社概要などホームページ制作でtableを使うケースは多いです。そんなtableの作成ですが、もっと簡単にできたらなあと思ったことはありませんか？タグの数が増えると、複雑になって分かりにくいですよね。

面倒なtable作成ですが、Table Tag Generatorを使えば、複雑なtableでも簡単に作成できます。そこで今回はTable Tag Generatorの使い方を解説します。

tableの作り方、結合、分割、文字の入れ方、classの付与の仕方、色の変更方法を解説します。

tableは上記のように行と列のボックスに、数値を入れるだけで簡単に作成できます。数値を設定したら、下にあるHTMLとCSSのボックスに変更した数値が反映されたコードが出力されます。このコードをコピーして貼り付けることでtableが表示されます。

tableの結合も直感的に行えます。結合したい箇所をドロップして、「結合」をクリックすれば、指定した箇所が結合されます。

tableの分割も簡単です。分割したい箇所をドラッグして、分割をクリックするだけです。

table内に文字を入力したい場合は「文字」をクリックします。

そして記入したい文字を入力して「出力」をクリックします。

tableに独自のclassを付けたいときは、「class」をクリックします。

そしてclassを付与したい箇所に、class名を記入して「出力」をクリックすれば、classの付与が完了します。

tableの色は下にあるCSSのボックスで、カラーコードを設定すれば色の変更が可能です。

スプレッドシートで作った表をそのままtableとして使いたい人もいるかと思います。ということでスプレッドシートからtableを作成する方法を解説します。

スプレッドシートからtableを作成する方法は下記のサイトで行います。上記で説明したサイトとは別サイトになります。

上記のURLをクリックしたら、下記のようにスプレッドシートの表をコピーして、右のボックスに貼り付けます。そして「tab」のプルダウンを選択します。

すると左側にtableが作成されます。tableを作成したら左下にある「VIEW CODE」のリンクをクリックして下さい。すると下記のようにtableのコードが表示されるので、コピーしてペーストすることで作成したtableが使えるようになります。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。