ベストセラー人気 WordPress テーマTop 30 詳細

WordPress: 複雑なテーブルを挿入する

Last Updated:2023年1月19日| | コメントを残す

WordPress サイトに複雑なテーブルを追加したい場合があります。 簡単な表はブロックエディタ(Gutenberg)が提供するテーブルブロックを使用すると便利です。 複雑なテーブルを追加したい場合は、HTMLでテーブルを作成してカスタムHTMLブロックまたは エレメントのHTMLウィジェット などに追加する方法を利用できます。

[この記事は2023年1月19日に最終更新されました。 ]

WordPress サイトに複雑なテーブルを挿入する

プラグインを使用する

WordPress 基本エディタであるブロックエディタ(Gutenberg)でもテーブルブロックを提供しますが、洗練されたテーブルを作成するには制限があります。 シンプルなテーブルを作成する際に活用できます。

洗練されたテーブルを作成したい場合は、wpDataTablesプラグインを使用できます。 このプラグインの有料版では DBデータを表として表示でき、開発者に特に便利です。 表作成機能は無料版でも使用できます。

また、 フレキシブルテーブルブロックというプラグインを使用すると、柔軟なテーブルをブロックとして挿入できます。 このプラグインを使用すると、複数のセルをマージして複雑なテーブルを作成できます。

WordPress テーブルブロックプラグイン

オンラインHTMLテーブル作成ツールを使用する

例えば、 WordPress ブログに次の表を挿入したい場合を考えてみましょう。

WordPress サイトに複雑なテーブルを挿入する

上記のように多少複雑な表は WordPress 基本エディタが提供する テーブルブロックにするのは難しいです。

代わりに、HTMLテーブルを生成するツールを使用してテーブルを作成した後、Block EditorまたはPage Builder(例: Elementor, Avada テーマの Avada ビルダー、Diviテーマ Diviビルダー など)に挿入できます。

洗練されたHTMLテーブルを作成するオンラインツール Tables Generatorがあります。

オンラインテーブルジェネレータを使用して複雑なテーブルを比較的簡単にすることができるため、直接HTMLで難しくコーディングする必要はありません。

テーブルジェネレータ

このツールをまったく使ったことがなくても、上記の表を難しくしないようにすることができます。 実際、私は最初にこのツールを使って数分で上記の表を作成しました。

表を作った後(①) 生成する ボタンをクリック(②)するとCSSとHTMLコードが生成されます(③)。 上の図では Do not generate CSS オプションをチェックすると、CSSコードは生成されませんでした。

複数のセルを結合したい場合は、セルを選択して Merge selected cells (選択したセルのマージ) アイコンをクリックしてセルをマージできます。

表セルのマージ

コピーしたコードのテーブル固有のHTMLコード部分( ... )をコピーして カスタムHTMLブロックイナエレメントページビルダー HTMLウィジェット などに貼り付けて挿入します。

これにより、次のHTMLテーブルが作成されます。

違反事項行政処分基準
1次2次3次
1)寄生虫及びその卵、金属(金属性異物として쇳粉は除く)又はガラスの混入品目製造停止7日と該当製品の廃棄品目製造停止15日と該当製品の廃棄品目製造停止1ヶ月と該当製品の廃棄
2) 刃又は動物(据え置き、両生類、爬虫類及びゴキブリのみ該当する)死体の混入品目製造停止15日と該当製品の廃棄品目製造停止1ヶ月と該当製品の廃棄品目製造停止2ヶ月と該当製品の廃棄
3)1)及び2)以外の異物(食品医薬品安全処長が定める基準以上の쇳粉を含む)の混入市政命令品目製剤調整5日品目製剤調整10日
4) 温度基準に違反した場合営業停止7日営業停止15日営業停止1ヶ月
5) その他の基準に違反した場合市政命令営業停止7日営業停止15日

CSSコード部分は ルックス>ユーザー定義>追加CSS セクションに追加するだけです。 しかし、このテーブルジェネレータによって生成されるCSSスタイルは適用されないようです。

CSSコードが適用されない場合は、直接CSSコードを作成して追加してください。 上記の表では、テーブルジェネレータツールで生成されたCSSスタイルの代わりに直接CSSコードを作成して追加しました。

CSSはそれほど難しくありません。 基本的なCSSを学ぶにはあまり時間がかかりません。 」WordPressにCSSを適用する方法[基本]"を参照してください。

最後に、

以上で WordPress サイトに複雑なテーブルを作成して挿入する方法を見てきました。 本文で紹介するテーブルジェネレータを使用すると、洗練されたテーブルを簡単に作成できます。 このツールを使用して生成されたHTMLテーブル WordPressそれだけでなく、ティーストーリーなど他のプラットフォームでも活用できます。

参照


コメントを残す

コメント

?