- 2022.12.26
- WordPress
- GIV_wataru
Tableを簡単に作成できるツール「Table Tag Generator」の使い方
料金表や会社概要などホームページ制作でtableを使うケースは多いです。そんなtableの作成ですが、もっと簡単にできたらなあと思ったことはありませんか?タグの数が増えると、複雑になって分かりにくいですよね。
面倒なtable作成ですが、Table Tag Generatorを使えば、複雑なtableでも簡単に作成できます。そこで今回はTable Tag Generatorの使い方を解説します。
Table Tag Generatorの使い方
tableの作り方、結合、分割、文字の入れ方、classの付与の仕方、色の変更方法を解説します。
tableの作り方

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

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

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

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

そして記入したい文字を入力して「出力」をクリックします。
Classの付与の仕方

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

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

tableの色は下にあるCSSのボックスで、カラーコードを設定すれば色の変更が可能です。
スプレッドシートからtableを出力する方法
スプレッドシートで作った表をそのままtableとして使いたい人もいるかと思います。ということでスプレッドシートからtableを作成する方法を解説します。
スプレッドシートからtableを作成する方法は下記のサイトで行います。上記で説明したサイトとは別サイトになります。
https://web-breeze.net/html-table-maker/
上記のURLをクリックしたら、下記のようにスプレッドシートの表をコピーして、右のボックスに貼り付けます。そして「tab」のプルダウンを選択します。

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

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