WordPressでレスポンシブテーブルを作成する方法:プラグインと手動の方法を解説

レスポンシブフォームは、さまざまな画面サイズに適応できるフォームデザインであり、次のことを保証します。各種設備(コンピュータやスマートフォンなど)に最適な可読性とレイアウトを提供します。CSSメディアクエリとレスポンシブデザインの原則を使用することで、どのデバイスでもスムーズに表示されるテーブルを作成することができます。この記事では、以下のようなプラグインの使用方法について説明します。 テーブルプレスを手動で使う方法も説明します。 HTML 歌で応える カスケーディングスタイルシート カスタムレスポンシブフォームの作成

图片[1]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)

プラグインによるレスポンシブフォームの作成

TablePressは、レスポンシブテーブルを作成するのに最適なプラグインのひとつです。 テーブルプレス ステップ

ステップ 1: TablePress プラグインのインストールと有効化

  1. WordPressの管理ダッシュボードにログインします。
  2. に移動します。プラグイン">"新しいプラグインの追加".
  3. 検索 "テーブルプレス「をクリックしてください。今すぐインストール"をクリックし、プラグインを有効にしてください。
图片[2]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)

ステップ 2: 新規フォームの作成

  1. プラグインをインストールしたら、左のメニューからTablePressプラグインにアクセスし、「新しいテーブルを追加」を選択します。
图片[3]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)
  1. 入力フォームキャプションそして説明と必要なとともに.
      • キャプションスケジュール
      • 説明デモンストレーション・プログラムの詳細
      • 行と列の数それぞれ4
图片[4]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)
  1. 完了したら「フォームを追加」をクリックします。

ステップ 3: フォームデータの入力

  1. 新しいテーブルのページで、データを入力します。表のヘッダーやデータセルの内容に適したデータを、各行や列に手動で追加できます。
图片[5]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)
  1. フォームのタイトル、説明、その他の一般的なオプションを設定できます。

ステップ 4: フォームオプションの設定

  1. TablePressは、セルソート、ページング、検索機能のカスタマイズを可能にする様々なテーブル構成オプションを提供します。
  2. 適切な設定を選択してフォームをプレビューし、問題がなければ「変更を保存」をクリックします。
图片[6]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)

ステップ 5: フォームをページや投稿に埋め込む

  1. フォームの設定が完了すると、TablePress はショートコード.
图片[7]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)
  1. ショートコードページや記事のエディタに直接貼り付けフォームは自動的に表示され、異なるデバイスの画面サイズに対応します。

TablePress は、複数のウェブサイトでテーブルデータを共有する必要がある人のために、テーブルのインポートやエクスポートもサポートしています。

手動でレスポンシブフォームを作成(プラグイン不要)

プラグインを使うだけでなく、手動で HTML 歌で応える カスケーディングスタイルシート レスポンシブなフォームを作成します。手動による方法では、フォームの外観をより細かく制御でき、追加のプラグインをインストールする必要もありません。

ステップ1: HTMLテーブル構造の作成 ページのHTMLセクションに以下のコードを入力し、ベースとなるフォーム構造を作成します:

图片[8]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)
.



<ヘッダー2
<ヘッダー3








ヘッダー1
セル1</td
セル2</td
セル3</td
セル4</td
セル5</td
セル6</td

图片[9]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)
图片[10]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)

ステップ2:基本的なCSSスタイルの追加 HTMLで <スタイル 部分もしかしたら外部 CSS ファイルでテーブルに基本的なスタイルを追加して、画面の幅を統一します:

.responsive-table {
幅:100%。
border-collapse: collapse;
}

.responsive-table th, .responsive-table td {.
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

.responsive-table th {
background-color: #f2f2f2;
}
图片[11]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)

ステップ3: メディアクエリを使用して応答性を実現します。 CSSメディア経由(メディア) クエリを使用して、小さな画面でテーブルをブロック単位で表示するように設定することで、内容を読みやすくすることができます。次のコードでこれを実現できます:

media only screen and (max-width: 768px) { {メディアのみスクリーンと (max-width: 768px) { }。
.responsive-table {
display: block;
幅:100%。
}

.responsive-table th, .responsive-table td {.
display: block;
幅:100%。
}

.responsive-table th {
position: absolute;
top: -9999px;
}

.responsive-table tr {
margin-bottom: 15px;
}

.responsive-table td {
position: relative;
padding-left:50%。
}

.responsive-table td:before {
content: attr(data-th) ":";
position: absolute;
左:0;
幅:50%。
padding-left: 15px;
font-weight: bold;
}
}

上記のコードでは

  • メディアお問い合わせ画面の幅が 768px フォームがブロックレイアウトに切り替わると
  • td:before擬似ク ラ ス は、 小画面での読みやす さ を向上 さ せ る ために、 各セルに表ヘ ッ ダの内容を追加 し ます。

ステップ 4: HTML フォームを WordPress ページに追加する 最後に HTML 歌で応える カスケーディングスタイルシート このコードをページの HTML ブロックに貼り付けると、異なるスクリーンに適応するカスタムレスポンシブフォームが作成され、フォームが異なるスクリーンで正しく表示されるかどうかをプレビューすることができます。

图片[12]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)

どの方法を選ぶべきでしょうか?

コードに不慣れな場合や、素早くテーブルを設定する必要がある場合は、TablePress などのプラグインをお勧めしますが、より自由なカスタマイズやコントロールが必要な場合は、手動で HTML と CSS を使用する方法が適しています。どちらの方法も、WordPress にレスポンシブテーブルを実装し、ユーザーエクスペリエンスを向上させるのに役立ちます。


お問い合わせ
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ!
電話:020-2206-9892
QQ咨询:1025174874
Eメール:info@361sale.com
勤務時間: 月~金、9:30~18:30、祝日休み
© 複製に関する声明
この記事を書いた人: Xiesong
終わり
好きなら応援してください。
クドス5 分かち合う
xiesong的头像-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし