Avada テーマ表（Table）エレメントを使用する

WordPress ベストセラーのテーマである Avadaの Avada Builder（以前の名称「Fusion Builder」）は、さまざまな要素が提供されます。 Avada テーマで表（テーブル）を挿入する場合はTableエレメントを使用することができます。

Avada テーマ表（Table）エレメントを使用する

Avadaで表を追加するには、Table要素を利用することができます。 Avada Builderの編集画面で、 Add Element（要素を追加）をクリックして、 Select Element（要素を選択） ウィンドウで Table（表）を選択します。

その後、Tableの設定画面が表示されます。

次のようなオプションが提供されます。

• 種類 （①）で表のスタイルを選択します。 Style 1とStyle 2の中から選択が可能です。
• 行の数 （②）で行数を選択します。
• 列の数 （③）で熱（カラム）数を選択します。

表は、反応型ではないので、これを考慮して、列の数を指定してください。 下にスクロールして表の内容を入力します。

[Save]（保存） ボタンを押すと、Table要素が追加されます。

スタイル1とスタイル2は、レイアウトが少し異なります。

スタイル1とスタイル2の両方少し気に入らないでしょう。 スタイルが気に入らない場合は、CSSを使用して調整することができます。

例：

Avada テーマでCSSコードは WordPress 伝言板> Avada > Options>カスタムCSSに追加することができます。

CSS例：

/* Avada 테마 표 스타일 */
.table-1 table th {
padding: 12px 20px;
font-weight: 600;
}

.table-2 table th {
padding: 12px 20px;
font-weight: 600;
}

.table-2 table thead {
background-color: #1172c1;
}

カスタムCSSコードは、 伝言板>外観>飾る>追加CSS (WordPress バージョンに応じて、 伝言板>テーマのデザイン>ユーザー定義>追加CSS）に追加してもされます。 （※ WordPressの韓国語版では、いくつかのメインメニューの翻訳が最近変更されました。 」WordPress 韓国語翻訳の変更：「テーマデザイン」、「カスタマイズ」「注。）

オンラインDivテーブルジェネレータ

Divにテーブルを作成したい場合 HTML Div Table Generatorのようなオンラインの表ジェネレータを使用することができます。

Table / Div 設定でDivタグまたはTableタグを選択することができます。

参考までに反応型Div表例は https://codepen.io/amwill04/pen/QNPpqxで確認することができます。

参照

• Avada テーマの Avada Formを発見
• Avada テーマのレイアウト（Layout）を使用して、サイトのすべてのセクションカスタマイズする