# HTML テンプレートに表形式のデータを追加する

アプリケーション内のチャートから、ソース テーブルを表形式のデータとして HTML レポート テンプレートに追加できます。表形式のデータは、テーブル全体として追加することも、1 つ以上の個別の列として追加することもできます。チャートを単一のテーブル タグとして追加するか、個別の列のセットとして追加するかに関係なく、作成する基礎オブジェクトはテーブルです。テーブルはオブジェクト パネルにオブジェクトとして追加され、いつでも戻って編集したり再利用したりできます。

ストレート タイプのハイパー キューブのチャートを表形式データとして追加できます。チャートをテーブルとして追加すると、チャートのデータを表す基になる項目が列としてレポートに追加されます。

オブジェクト パネルの the テーブル icon [] メニューで表形式のデータを追加します。

テーブルを選択するときに、the リロード icon をクリックして、アプリケーションから使用可能なテーブルのリストを更新します。

## チャート全体を追加

単一のタグを使用して、チャート全体を表形式で追加できます。チャート データはストレート テーブルとしてレポートに挿入されます。

次の手順を実行します。

1. HTML デザイナーで、テーブルを挿入するコードの場所にカーソルを置きます。

2. オブジェクト パネルの the テーブル icon をクリックします。

   HTML デザイナー内のオブジェクト パネルの [テーブル] メニュー

   HTML デザイナー内のオブジェクト パネルの [テーブル] メニュー

   HTMLHTML デザイナー内のオブジェクト パネルの [テーブルテーブル] メニュー ![HTML デザイナーの「テーブル」メニュー。追加した既存のテーブルを変更したり、新しいテーブルを追加したりできます。](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_gen_html-add-table-objects-panel.png)

3. [テーブルを追加] をクリックします。使用可能なシートのリストが表示されます。

4. テーブルとして追加するチャートを含むシートを展開します。 必要に応じて、チャート名を検索してシートのリストを絞り込むことができます。

   チャートの名前をクリックすると、チャートを追加する前にプレビューできます。

5. チャートの横にある the プラス記号 icon アイコンをクリックします。

6. ドロップダウン メニューで、 [テーブル] を選択します。この操作により、チャートがテンプレート内の単一のアイテムとして挿入されます。

   テーブルとして追加するチャートを選択する

   テーブルとして追加するチャートを選択する

   テーブルとして追加するチャートを選択する ![テーブルのソースとして使用するチャートを選択する](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_gen_html-add-table-select-chart.png)

7. オブジェクト パネルで、次を調整できます。

   * 名前: 後で識別できるように、テーブルに一意の名前を付けます。

   * 説明 (オプション): 必要に応じて、オブジェクトに説明を追加します。

   * フィルター: オブジェクトにはフィルターを個別に 1 つまで追加できます。これにより、他のテンプレート オブジェクトで使用されるデータに影響を与えることなく、テーブルで使用されるデータをカスタマイズできます。使用するレポートフィルターを構成するには、フィルターの管理をクリックします。オブジェクトレベル フィルターの詳細については、「[レポート テンプレートでのオブジェクトレベル フィルターの使用](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Generate/cloud-in-app-reports-filters.htm#ObjectLevel)」を参照してください。

   テーブルが単一のタグとして追加されたテンプレート デザイン領域

   テーブルが単一のタグとして追加されたテンプレート デザイン領域

   テーブルが単一のタグとして追加されたテンプレート デザイン領域 ![HTML テンプレートに表示されるテーブル全体を表すタグ](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_gen_html-add-whole-table-result.png)

8. オブジェクト パネルでテーブルのプロパティを調整できます。表形式データの書式設定プロパティの詳細については、「[表形式 HTML データの書式設定プロパティ](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Design/HTML/html-report-tabular-properties.htm)」を参照してください。

9. テーブル オブジェクトはいつでも再利用できます。オプション パネルで the テーブル icon を開き、the 右向き矢印 icon をクリックしてオブジェクトを開きます。[テーブル タグを追加] をクリックして、テーブルを再度追加します。

## 列によるチャートの追加

チャートは、単一の列のセットとして表形式で追加することもできます。これにより、レポート テンプレート内の書式設定をより細かく制御できるようになります。

チャート データはストレート テーブルとしてレポートに挿入されます。

次の手順を実行します。

1. HTML デザイナーで、テーブル列を挿入するコードの場所にカーソルを置きます。

2. オブジェクト パネルの the テーブル icon をクリックします。

   HTML デザイナー内のオブジェクト パネルの [テーブル] メニュー

   HTML デザイナー内のオブジェクト パネルの [テーブル] メニュー

   HTMLHTML デザイナー内のオブジェクト パネルの [テーブルテーブル] メニュー ![HTML デザイナーの「テーブル」メニュー。追加した既存のテーブルを変更したり、新しいテーブルを追加したりできます。](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_gen_html-add-table-objects-panel.png)

3. [テーブルを追加] をクリックします。使用可能なシートのリストが表示されます。

4. テーブルとして追加するチャートを含むシートを展開します。 必要に応じて、チャート名を検索してシートのリストを絞り込むことができます。

   チャートの名前をクリックすると、チャートを追加する前にプレビューできます。

5. チャートの横にある the プラス記号 icon アイコンをクリックします。

6. ドロップダウン メニューで、 [個別の列] を選択します。

   列ごとにテーブルとして追加するチャートを選択する

   列ごとにテーブルとして追加するチャートを選択する

   列ごとにテーブルとして追加するチャートを選択する ![テーブルのソースとして使用するチャートを選択し、1 つまたは複数の個別の列のセットとして追加します。](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_gen_html-add-table-as-columns-select-chart.png)

7. 追加する列を選択するか、 [すべて] をクリックしてチャートからすべての列を挿入します。

8. チャートは `table` 要素としてテンプレートに追加され、各列はその中の `td` 要素で示されます。単一の列を追加する場合、[テーブル全体を追加するのと同じように](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/html-report-tabular-data.htm#FullChartTable)、列は単一の項目として追加されます。

   オブジェクト パネルで、次を調整できます。

   * 名前: 後で識別できるように、テーブルに一意の名前を付けます。

   * 説明 (オプション): 必要に応じて、オブジェクトに説明を追加します。

   * フィルター: オブジェクトにはフィルターを個別に 1 つまで追加できます。これにより、他のテンプレート オブジェクトで使用されるデータに影響を与えることなく、テーブルで使用されるデータをカスタマイズできます。フィルターは、同じソース テーブルのすべての列に適用されます。

     使用するレポートフィルターを構成するには、フィルターの管理をクリックします。オブジェクトレベル フィルターの詳細については、「[レポート テンプレートでのオブジェクトレベル フィルターの使用](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Generate/cloud-in-app-reports-filters.htm#ObjectLevel)」を参照してください。

   一連の個別の列としてテーブルが追加されたテンプレート デザイン領域

   一連の個別の列としてテーブルが追加されたテンプレート デザイン領域

   一連の個別の列としてテーブルが追加されたテンプレート デザイン領域 ![一連の個別の列として追加されたチャートを表す項目](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_gen_html-add-table-as-columns-result.png)

9. オブジェクト パネルで、テーブルのその他のプロパティを調整できます。表形式データの書式設定プロパティの詳細については、「[表形式 HTML データの書式設定プロパティ](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Design/HTML/html-report-tabular-properties.htm)」を参照してください。

10. テーブル オブジェクトはいつでも再利用できます。オプション パネルで the テーブル icon を開き、the 右向き矢印 icon をクリックしてオブジェクトを開きます。[テーブル タグを追加] をクリックして、テーブルの新しいインスタンスを単一のアイテムとして追加するか、空のテーブル構造を作成し、各列参照を `td` 要素に個別に追加します。

列のセットは単一のテーブル オブジェクトと見なされます。

## チャートからさらに列を追加する

### 列ごとに追加されたチャートへ

テーブルの列をいくつか個別に追加した後、いつでも列を追加できます。必要な手順は、元のテーブルが 1 つの列で構成されているか、2 つ以上の列で構成されているかに応じて異なります。

#### 既存の列が 1 つあるテーブル

1 つの列だけが個別に追加されたテーブルの場合、新しい列を追加するプロセスはより複雑になります。状況に応じて、最初から複数の列を設定してオブジェクトを再作成する方が簡単な場合があります。ただし、単一列のテーブルに列を追加することはできます。

次の手順を実行します。

1. デザイン領域で、次の空のテーブル要素を空の領域に貼り付けます。

   ```
     <table cellspacing="0" style="border-collapse: collapse">
     <tbody><tr>
     <td></td><td></td><td></td>
     </tr>
     </tbody></table>
   ```

2. 個々の列の既存のアイテムを切り取り、追加した `td` 要素の 1 つに貼り付けます。例:

   ```
     <table cellspacing="0" style="border-collapse: collapse">
     <tbody><tr>
     <td>%%ProductCategory%%</td><td></td><td></td>
     </tr>
     </tbody></table>
   ```

3. 既存の個々の列アイテムにカーソルを置きます。

   オブジェクト パネルで、列が展開された状態で [テーブル] メニューが開きます。

4. [列] で、追加する列を見つけます。列を展開してプロパティを構成し、 [列タグの追加] をクリックします。

5. ソース テーブルから追加する新しい列ごとに、ステップ 3 ～ 4 を繰り返します。必要に応じて新しい `<td></td>` アイテムを追加し、終了する前に未使用 (空) の `<td></td>` アイテムをすべて削除する必要があります。

この手順を実行すると、テーブルはオブジェクト パネルから使用できるテーブル オブジェクトと同じままになります。

#### 2 つ以上の列が存在するテーブル

次の手順を実行します。

1. HTML コードで、列を挿入する場所のすぐ左にある列の `td` 要素を選択します。

   オブジェクト パネルで、列が展開された状態で [テーブル] メニューが開きます。

2. 次の内容をテンプレートに貼り付けて、新しい `td` 要素を作成します。

   ```
   <td></td>
   ```

   次に、開始タグと終了タグの間にカーソルを置きます。

3. オブジェクト パネルで、列の書式設定プロパティを構成し、 [列タグを追加] をクリックします。

   列への参照は、空の `td` 要素に挿入されます。

### テーブル全体として追加されたチャートから

すでに単一のテーブル アイテムとして追加されているチャートの新しいインスタンスを追加できます。元々単一のテーブル アイテムとして追加した個々の列のインスタンスを追加することもできます。

次の手順を実行します。

1. HTML デザイナーで、コンテンツを挿入するコードの場所にカーソルを置きます。

2. オブジェクト パネルの the テーブル icon をクリックします。

   [テーブル] メニューが開きます。

3. 既存のオブジェクトの横にある the 右向き矢印 icon をクリックします。

4. 次のいずれかを実行します。

   1. テーブルの新しいインスタンスを単一のアイテムとして追加するには、 [テーブル タグを追加] をクリックします。

   2. 単一の列を追加するには、 [列を展開] をクリックします。列のプロパティを構成し、 [列タグを追加] をクリックします。構造に複数の列を追加する場合は、最初に空のテーブル要素を作成する必要があります。「[既存の列が 1 つあるテーブル](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Design/HTML/html-report-tabular-data.htm#OneExisting)」を参照してください。