---
url: "/ja/emailify/content/data-tables.md"
description: "カスタムのData Table要素レイヤーを使うと、シンプルなテキストや画像のコンテンツを、複数の行と列を持つHTMLテーブルとしてレンダリングできます。"
---

# メールにカスタムのデータテーブルを追加

> カスタムのData Table要素レイヤーを使うと、シンプルなテキストや画像のコンテンツを、複数の行と列を持つHTMLテーブルとしてレンダリングできます。

## Data Tableレイヤーを手動でデザインに追加する {#manually-adding-data-table-layers-to-your-design}

[Video](/assets/videos/emailify/content/data-table.mp4)

Data Tableレイヤーを追加するには、デザイン内の任意の**Column**レイヤーをクリックし、プラグイン下部のクイック追加メニューから**Data Table**オプションを選んでから、**Add**をクリックしてレイヤーをデザインに挿入します。

> **Tip:** **データテーブルの行や列を追加する**。最初に作成されたテーブル行やテーブルデータセルのFigmaレイヤーをコピー＆ペーストすると、行や列をすばやく追加できます。

> **Note:** デフォルトでは、Data Tableはデスクトップとモバイルで同じようにレンダリングされます。テーブルの列を数列以上追加する場合は、テーブルの幅に注意してください。

アイコンとテキストのコンパクトなテーブルや、チェックリスト形式の行では、メインの**Data Table**レイヤーを選択して**Settings**をクリックし、**Mobile Alignment**を有効にして**Center**を選びます。これにより、アイコンとテキストの間隔を保ったまま、エクスポートしたテーブル自体がモバイルで中央に配置されます。左右のパディングを手動で追加して中央揃えに近づけるよりも、さまざまなモバイルクライアントで確実に表示できます。

## モバイルでData Tableの画像を広げる {#expanding-data-table-images-on-mobile}

Data Table内の画像を選択して**Settings**を開き、**100% Width Image on Mobile**を有効にします。デスクトップのデザインで幅が150pxを超える画像は、Columnの画像と同じ最小幅の基準に従い、モバイルでテーブルセルいっぱいに広がります。幅が150px以下の画像は、小さなアイコンが引き伸ばされないよう、そのままのサイズを保ちます。

幅の判定には、ネストされたメインコンポーネントの幅ではなく、画像レイヤーのレンダリング後の幅が使われます。モバイルの幅や高さを明示的に上書きしている場合は、そちらが優先されます。積み重ねた行いっぱいに画像を広げるには、Data Table Rowもモバイルでセルを積み重ねるように設定してください。

## GoogleスプレッドシートのURLやCSV・ExcelファイルのデータからData Tableをインポートする {#importing-a-data-table-from-google-sheet-url-or-csv-excel-file-data}

[Video](/assets/videos/emailify/content/import-spreadsheet-table.mp4)

すでにGoogleスプレッドシートやCSV・Excelファイルにデータがある場合は、デザイン内の任意の**Column**レイヤーをクリックし、プラグイン下部のクイック追加メニューから**Spreadsheet**オプションを選ぶと、スプレッドシートのデータを含む新しいData Tableを自動的に作成できます。

**Spreadsheet**オプションを選んだら、*公開されている*GoogleスプレッドシートのURLを貼り付けるか、CSV・Excelファイルをプラグインにドラッグ＆ドロップしてから、**Add**をクリックしてレイヤーをデザインに挿入します。

> **Tip:** Emailifyには、スプレッドシートを読み取る権限が必要です。Googleスプレッドシートで**Share**を選び、URLをコピーする前に**Restricted**を**Anyone with the link**に変更してください。

## 動的データでData Table Rowをループする {#looping-a-data-table-row-with-dynamic-data}

[Video](/assets/videos/emailify/content/looping-data-table-row.mp4)

メール配信プラットフォームのデータを繰り返し処理するには、**Data Table Row**を選択して**Settings**を開きます。**Opening Code Wrapper**（例：`{% for product in collection.products %}`）と**Closing Code Wrapper**（例：`{% endfor %}`）にループの構文を追加します。Emailifyは、エクスポートしたHTMLで、その行の``要素の前後にタグを挿入します。

**Data Table Row**レイヤーにラッパーのタグを追加したら、必要に応じて行内のレイヤーに[動的なコンテンツを入れられます](/ja/emailify/content/dynamic#adding-platform-specific-personalization-content)。

> **Tip:** **Settings**を開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、[設定を一括で適用](/ja/emailify/design/settings#apply-settings-in-bulk)できます。変更した設定は、選択したすべてのレイヤーに適用されます。