# 將表格式資料新增至您的 HTML 範本

您可以將應用程式中圖的來源表格作為表格式資料新增至您的 HTML 報告範本。表格式資料可以作為整個表格或作為一個或多個個別欄新增。無論您是將圖作為單一表格標籤還是作為一組個別欄新增，您建立的基礎物件都是一個表格。該表格會作為物件新增至物件面板中，您可以隨時返回該面板進行編輯和重複使用。

具有直表類型超立方的圖可以作為表格式資料新增。當您將圖作為表格新增時，代表圖資料的基礎欄位會作為欄新增至報告中。

您可以在物件面板的 the 表格 icon 選單中新增表格式資料。

選取表格時，按一下 the 重新載入 icon 以重新整理應用程式中可用表格的清單。

## 新增整個圖

您可以使用單一標籤以表格式形式新增整個圖。圖資料會作為直表插入報告中。

請執行下列動作：

1. 在 HTML 設計工具中，將游標放在程式碼中您想要插入表格的位置。

2. 按一下物件面板中的 the 表格 icon。

   HTML 設計工具內物件面板中的 表格 選單

   HTML 設計工具內物件面板中的 表格 選單

   HTMLHTML 設計工具內物件面板中的 表格表格 選單 ![HTML 設計工具中的「表格」選單，您可以從中修改已新增的現有表格，或新增新表格](https://help.qlik.com/zh-TW/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/zh-TW/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_gen_html-add-table-select-chart.png)

7. 在物件面板中，您可以調整：

   * 名稱：為表格提供唯一的名稱，以便您稍後識別它。

   * 說明 (選用)：如果需要，為物件新增說明。

   * 篩選條件：個別為物件新增最多一個篩選條件。這可讓您自訂表格中使用的資料，而不會影響其他範本物件中使用的資料。按一下 管理篩選條件 以設定您想要使用的報告篩選條件。如需有關物件層級篩選條件的詳細資訊，請參閱 [在報告範本中使用物件層級篩選條件](https://help.qlik.com/zh-TW/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Generate/cloud-in-app-reports-filters.htm#ObjectLevel)。

   將表格作為單一標籤新增的範本設計介面

   將表格作為單一標籤新增的範本設計介面

   將表格作為單一標籤新增的範本設計介面 ![在 HTML 範本中顯示代表整個表格的標籤](https://help.qlik.com/zh-TW/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_gen_html-add-whole-table-result.png)

8. 您可以在物件面板中調整表格的屬性。如需有關表格式資料格式化屬性的詳細資訊，請參閱 [表格式 HTML 資料的格式屬性](https://help.qlik.com/zh-TW/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/zh-TW/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/zh-TW/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/zh-TW/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/html-report-tabular-data.htm#FullChartTable)。

   在物件面板中，您可以調整：

   * 名稱：為表格提供唯一的名稱，以便您稍後識別它。

   * 說明 (選用)：如果需要，為物件新增說明。

   * 篩選條件：個別為物件新增最多一個篩選條件。這可讓您自訂表格中使用的資料，而不會影響其他範本物件中使用的資料。篩選條件會套用至來自相同來源表格的所有欄。

     按一下 管理篩選條件 以設定您想要使用的報告篩選條件。如需有關物件層級篩選條件的詳細資訊，請參閱 [在報告範本中使用物件層級篩選條件](https://help.qlik.com/zh-TW/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Generate/cloud-in-app-reports-filters.htm#ObjectLevel)。

   將表格作為一系列個別欄新增的範本設計介面

   將表格作為一系列個別欄新增的範本設計介面

   將表格作為一系列個別欄新增的範本設計介面 ![代表作為一系列個別欄新增之圖的項目](https://help.qlik.com/zh-TW/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_gen_html-add-table-as-columns-result.png)

9. 您可以在物件面板中調整表格的其他屬性。如需有關表格式資料格式化屬性的詳細資訊，請參閱 [表格式 HTML 資料的格式屬性](https://help.qlik.com/zh-TW/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Design/HTML/html-report-tabular-properties.htm)。

10. 您可以隨時重複使用表格物件。在選項面板中開啟 the 表格 icon，然後按一下 the 向右箭頭 icon 以開啟物件。按一下 新增表格標籤 以將表格的新執行個體作為單一項目新增，或建立空白表格結構並將每個欄參考個別新增至 `td` 元素中。

這組欄被視為單一表格物件。

## 從圖新增更多欄

### 新增至依欄新增的圖中

在個別新增表格的一些欄之後，您可以隨時新增更多欄。所需的程序取決於原始表格是由一個欄組成，還是由兩個或多個欄組成。

#### 具有一個現有欄的表格

如果您有一個僅個別新增一個欄的表格，則新增新欄的程序會比較複雜。在某些情況下，從一開始就設定多個欄來重新建立物件可能會更容易。不過，您仍然可以將額外的欄新增至單欄表格中。

請執行下列動作：

1. 在設計介面上，將下列空白表格元素貼到空白區域中：

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

2. 剪下個別欄的現有項目，並將其貼到您剛才新增的其中一個 `td` 元素中。例如：

   ```
     <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>` 項目。

執行此程序時，表格仍會是可從物件面板取得的相同表格物件。

#### 具有兩個或多個現有欄的表格

請執行下列動作：

1. 在 HTML 程式碼中，選取您想要插入欄的位置正左側欄的 `td` 元素。

   在物件面板中，表格 選單會開啟並展開該欄。

2. 將下列內容貼到您的範本中，以建立新的 `td` 元素：

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

   然後，將游標放在其開始和結束標籤之間。

3. 在物件面板中，設定欄的格式化屬性，然後按一下 新增欄標籤。

   對欄的參考會插入空白的 `td` 元素中。

### 從作為整個表格新增的圖

您可以新增已作為單一表格項目新增之圖的新執行個體。您也可以新增最初作為單一表格項目新增之個別欄的執行個體。

請執行下列動作：

1. 在 HTML 設計工具中，將游標放在程式碼中您想要插入內容的位置。

2. 按一下物件面板中的 the 表格 icon。

   表格 選單會開啟。

3. 按一下現有物件旁邊的 the 向右箭頭 icon。

4. 執行下列其中一個動作：

   1. 若要將表格的新執行個體作為單一項目新增，請按一下 新增表格標籤。

   2. 若要新增單一欄，請按一下 展開欄。設定欄屬性，然後按一下 新增欄標籤。如果將多個欄新增至結構中，您將需要先建立空白表格元素。請參閱 [具有一個現有欄的表格](https://help.qlik.com/zh-TW/cloud-services/Subsystems/Hub/Content/Sense_Hub/Reporting/Design/HTML/html-report-tabular-data.htm#OneExisting)。