HTML reports containing tables
Tables exported from QlikView or Qlik Sense can be displayed with or without the original headings. You can hide the headings that were exported, and then create your own custom headings. This is also true for tables constructed by putting together columns generated from data fields.
The following example shows how to create an HTML report with tables.
Testing
You can use our sample files to create your app. To download these files, see: Sample files.
Adding tables to an HTML template
Do the following:
-
Click Edit template to open the Template Editor.
- Right-click the Tables node, and select Add objects.
-
Select an object from the list.
- Click OK.
- Right-click the object node, and then select Properties. Information noteIf the Properties window is already in view , the Properties option will not be shown when you right-click a node.
-
Select the Keep Source Formats and Show Headers check boxes in the Properties panel.
-
Drag the table node tag into the template and drop it onto an empty table data container.
<html> <body> <table> <tr> <td> <h1 style="text-align:center"> Top 10 Products<br /br> with QlikView Heading </h1> %%yourtableobject%% </td> <td> <h1 style="text-align:center"> Top 10 Products<br> </br> Hidden QlikView Heading </h1> </td> </tr> </table> ...Two versions of the table are displayed side by side. The left table has headings visible, and the right table has the headings hidden. The table is embedded as a unit in both cases.
- Add the same table to the template again.
- Open the Properties pane for the new table object, and then set the Show Headers property to Hide.
-
Drag the table node tag into the template and drop it onto the appropriate empty line:
<html> <body> <table> <tr> <td> <h1 style="text-align:center"> Top 10 Products<br /br> with QlikView Heading </h1> %%yourtableobject%% </td> <td> <h1 style="text-align:center"> Top 10 Products<br /br> Hidden QlikView Heading </h1> %%yourtableobject_1%% </td> </tr> </table> ... - Expand the table node.
-
Drag and drop each column, one at a time, onto the template in the appropriate HTML container.
This third version of the table is reconstructed column-by-column in a separate HTML table. Each table heading and table data cell can have inline style elements added individually. The inline style elements for each table data cell will have an effect on the whole column below the heading.
-
Add custom headings.
Here is the HTML code for the reconstruction of the last version of CH184_1 - Top 10 Products in another table:
<table>
<tr>
<th style="width:125px;">
Product
</th>
<th style="width:60px;">
Sales
</th>
<th style="width:60px;">
Profit
</th>
<th style="width:100px;">
Profit Percentage of Sales
</th>
</tr>
<tr>
<td>
</td>
<td style="width:125px;">
%%ProductName_1%%
</td>
<td style="width:60px;">
%%Total Sales_1%%
</td>
<td style="width:60px;">
%%Gross Profit_1%%
</td>
<td style="width:100px;">
%%GP%_1%%
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
You can use QlikView objects that have calculated dimensions or null values as levels. However, you cannot nest other objects inside them, except for fields from that sheet object. Qlik Sense visualizations with calculated dimensions cannot be used as levels.
Preview and save
Do the following:
- Click Preview.
- Check the report, close it, and then edit the template again if necessary.
- Click Save and Close to save the template and close the Template Editor.