ウェブサイト構築の黎明期、 テーブル は、主にデスクトップでの閲覧のために作られたもので、画面スペースに余裕があった。ウェブサイトが複雑なデータを含むようになると、大量の情報をきれいに整理する方法としてテーブルが普及した。
モバイル利用の増加に伴い、レスポンシブテーブルの必要性が不可欠になりました。より多くのユーザーが携帯電話やタブレットでウェブサイトにアクセスするようになり、従来のテーブルではコンテンツを読むためだけに横スクロールやズームが必要となり、フラストレーションが溜まっていました。
今日、レスポンシブテーブルは利便性だけでなく、SEOやアクセシビリティにも不可欠である。 グーグルのモバイルファーストインデックス.WordPressのデフォルトのTable Blockは、ビルトインのレスポンシビリティに欠けているため、CSSの調整やプラグインなどの方法で解決する必要があります。
このガイドでは、プラグインを使用してWordPressでモバイルに最適化されたテーブルを作成する最も簡単な方法を説明します。
ステップ1：Tablebergプラグインをインストールして有効化する
最初のステップは簡単だ。あなたの WordPressダッシュボード に移動する。 プラグイン > 新規追加.そこに着いたら、次のようにタイプする。 テーブルバーグ をクリックし、プラグインを見つける。見つけたら Install Now.インストールが終わったら、あとは アクティベート をクリックします。有効化]をクリックして、あなたのサイトでプラグインを有効にします。
ステップ2：Tablebergで新しいテーブルを作成する
WordPressエディタから プラス（＋）アイコンを検索する。 テーブルバーグそしてTablebergブロックを追加する。
テーブルの行数と列数を選択し、作成ボタンを押す。このチュートリアルでは、4行5列のテーブルを選択します。
ステップ 3: テーブルにデータを追加する
その後 テーブルの作成各セルに内容を追加することができます。任意のセルをクリックし プラス（+）記号、 必要なブロックを入力し、続けてテキスト、画像、リスト、星の評価、ボタンなど、要件に合ったものを入力してください。
ステップ 4: レスポンシブ設定を有効にする
Tablebergでは、すべてのデバイスでテーブルが正しく表示されるように、構造化された 応答性の設定 セクションを参照してください。まず 親ブロックに移動する。 設定 エディターの右側で、下にスクロールして 応答性の設定.
次に、応答性を設定するデバイスを選択します。応答性の設定パネルの上部には、以下のオプションが表示されます。 デスクトップ, タブレットそして モバイル.カスタマイズしたいデバイスを選択します。これにより、その特定の画面サイズでのテーブルの動作が決まります。ここではモバイルを選択しています。
デバイスを選択した状態で ブレークポイントの有効化 オプションを使用して、選択したデバイスに対してレスポンシブ動作を有効にします。この設定により、画面の幅が 最大幅.例えば、最大幅を1024pxに設定すると、1024pxより狭い画面でもテーブルがレスポンシブに調整されます。この設定の下にある Make 最上段ヘッダー オプションは、テーブルの最初の行をヘッダーとして指定し、他の行と区別するために特定のスタイルや書式を適用します。
最後に モード オプションで、小さい画面でのテーブルの動作を選択できます。選択できるのは スクロール を選択すると、水平スクロールが有効になり、テーブルの幅が広すぎる場合にユーザーがスワイプで移動できるようになります。あるいは スタック を使用すると、テーブルの内容を縦方向に並べ替えることができます。スタック・モードを使用する場合、以下のような追加オプションがあります。 スタック方向 スタッキングの方向をコントロールできる。 行ごとの項目 では、1行に表示されるアイテムの数を設定できるため、小さな画面でもカスタマイズが可能です。
これでテーブルの準備は完了です。パブリッシュして、データをデスクトップ、タブレット、携帯電話にスムーズに流しましょう！
結論
レスポンシブテーブルは単なる機能ではなく、今日のWordPressの世界では必須アイテムです。Tablebergを使用することで、従来のテーブルを、どのような画面にも適応し、柔軟で、輝くものに変えることができます。あなたのサイトは、デスクトップ、タブレット、スマホのどれで見ても、よりクリーンでアクセスしやすい方法でデータを表示できるようになりました。不便な表示とはおさらばして、コンテンツと同じようにスムーズに流れるユーザーエクスペリエンスに生まれ変わります。検索エンジンも、このアップグレードを気に入ることでしょう。
