MENU

テーブルタグを簡単に作ろう!

WordPressでテーブルを簡単に作る

Gutenbergのエディタではテーブル作成機能が貧弱で困ります。

Webサービスで簡単にセル調整、ついでにCSSも作ってくれるサイトがありますので、紹介します。

目次

テーブル作り機能はまだ弱い

Gutenbergのテーブル作成機能はまだまだ発展途上。

サイトで紹介しているJINやLightningでは、簡単に表を作成して調整する機能があります。

そういう便利な機能がない場合は、Webにあるサービスを利用するのも一つの方法です。

Table Tag Generator

Table Tag Generator というサイトでは、マウス操作でテーブルを直感的に作成することができます。

文字を入れたり、CSSを作成してくれるので、とても便利です。

使い方

画面上部にある小さなテーブルを操作します。

使い方はとっても簡単

  1. まず表の大きさ(行と列)を決める。

     ・数字をキーボードで入力する
     ・スピナーをクリックする
     ・マウスホイールを回す
  2. th タグを使いたい場合

     ① 変換したいセルをドラッグして選択
     ②「td ↔ th」 ボタンをクリックしてください。
  3. セルを結合する場合

     ①結合するセルをドラッグして選択
     ②「結合」ボタンをクリック
     ③結合したセルは「分割」ボタンで元に戻せる。
  4. 文字を入力する場合

     ①「文字」 ボタンをクリックして入力モードに。
     ②表に直接入力できます。
     ③入力後、「出力」ボタンをクリック。
  5. CSSを適用する場合

     ・セルに class を設定することができます。
  6. 失敗したら初期化ボタンで元に戻せる。
  7. 表が完成したら、サイトにコピペする。

CSS

テーブルに適用するCSSも、同様のサービスを利用することで簡単にかっこいいテーブルを作ることができます♬

こちらのページでGutenbergの表の作り方と一緒にご紹介しています。

Gutenbergへの適用方法は、こちらでご紹介しています。

https://wptg.work/jinswell/gutenberg/table-with-css-on-gutenberg/

おわりに

いかがでしたか?

WordPressの操作が簡単になって、以前よりずっと楽にWebページを作ることができるようになりました。

テーブルも効果的に使うと、とても分かりやすいページになります。

HTMLで悩まなくても簡単にできるツールです。

活用してブログ記事をどんどん書きましょう♬

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次
閉じる