レスポンシブフォームは、さまざまな画面サイズに適応できるフォームデザインであり、次のことを保証します。各種設備(コンピュータやスマートフォンなど)に最適な可読性とレイアウトを提供します。CSSメディアクエリとレスポンシブデザインの原則を使用することで、どのデバイスでもスムーズに表示されるテーブルを作成することができます。この記事では、以下のようなプラグインの使用方法について説明します。 テーブルプレスを手動で使う方法も説明します。 HTML
歌で応える カスケーディングスタイルシート
カスタムレスポンシブフォームの作成
![图片[1]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114105028221-Why-WordPress-Mobile-Responsive-Table-Matter.jpg)
プラグインによるレスポンシブフォームの作成
TablePressは、レスポンシブテーブルを作成するのに最適なプラグインのひとつです。 テーブルプレス ステップ
ステップ 1: TablePress プラグインのインストールと有効化
- WordPressの管理ダッシュボードにログインします。
- に移動します。プラグイン">"新しいプラグインの追加".
- 検索 "テーブルプレス「をクリックしてください。今すぐインストール"をクリックし、プラグインを有効にしてください。
![图片[2]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114093516980-image.png)
ステップ 2: 新規フォームの作成
- プラグインをインストールしたら、左のメニューからTablePressプラグインにアクセスし、「新しいテーブルを追加」を選択します。
![图片[3]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114093625166-image.png)
- 入力フォームキャプションそして説明と必要な行とともに列.
- 例
- キャプションスケジュール
- 説明デモンストレーション・プログラムの詳細
- 行と列の数それぞれ4
- 例
![图片[4]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114095630626-image.png)
- 完了したら「フォームを追加」をクリックします。
ステップ 3: フォームデータの入力
- 新しいテーブルのページで、データを入力します。表のヘッダーやデータセルの内容に適したデータを、各行や列に手動で追加できます。
![图片[5]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114095316241-image.png)
- フォームのタイトル、説明、その他の一般的なオプションを設定できます。
ステップ 4: フォームオプションの設定
- TablePressは、セルソート、ページング、検索機能のカスタマイズを可能にする様々なテーブル構成オプションを提供します。
- 適切な設定を選択してフォームをプレビューし、問題がなければ「変更を保存」をクリックします。
![图片[6]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114095458486-image.png)
ステップ 5: フォームをページや投稿に埋め込む
- フォームの設定が完了すると、TablePress は
ショートコード .
![图片[7]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114095736307-image.png)
- ショートコードページや記事のエディタに直接貼り付けフォームは自動的に表示され、異なるデバイスの画面サイズに対応します。
TablePress は、複数のウェブサイトでテーブルデータを共有する必要がある人のために、テーブルのインポートやエクスポートもサポートしています。
手動でレスポンシブフォームを作成(プラグイン不要)
プラグインを使うだけでなく、手動で HTML
歌で応える カスケーディングスタイルシート
レスポンシブなフォームを作成します。手動による方法では、フォームの外観をより細かく制御でき、追加のプラグインをインストールする必要もありません。
ステップ1: HTMLテーブル構造の作成 ページのHTMLセクションに以下のコードを入力し、ベースとなるフォーム構造を作成します:
![图片[8]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114101610697-image.png)
.
ヘッダー1
<ヘッダー2
<ヘッダー3
セル1</td
セル2</td
セル3</td
セル4</td
セル5</td
セル6</td
。
![图片[9]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114103140729-image.png)
![图片[10]-如何在 WordPress 中创建响应式表格(TablePress 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114103210924-image.png)
ステップ2:基本的なCSSスタイルの追加 HTMLで <スタイル
部分
.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 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114103535848-image.png)
ステップ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 插件+手动方法)](https://www.361sale.com/wp-content/uploads/2024/11/20241114103938146-image.png)
どの方法を選ぶべきでしょうか?
コードに不慣れな場合や、素早くテーブルを設定する必要がある場合は、TablePress などのプラグインをお勧めしますが、より自由なカスタマイズやコントロールが必要な場合は、手動で HTML と CSS を使用する方法が適しています。どちらの方法も、WordPress にレスポンシブテーブルを実装し、ユーザーエクスペリエンスを向上させるのに役立ちます。
お問い合わせ |
---|
記事が読めない?無料でお答えします!個人サイト、中小企業サイトのための無料ヘルプ! |
① 電話:020-2206-9892 |
② QQ咨询:1025174874 |
三 Eメール:info@361sale.com |
④ 勤務時間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttps://www.361sale.com/ja/26699この記事は著作権で保護されており、必ず帰属表示を付けて複製してください。
コメントなし