# 应用 HTML 格式

当您在 HTML 模板编辑器中创建模板时，您可应用 CSS 内联样式元素。



## 测试

您可使用我们的示例文件创建自己的应用程序。要下载这些文件，请参阅：[示例文件](https://help.qlik.com/zh-CN/nprinting/May2026/Content/NPrinting/Examples/Examples.htm)。

## 允许对整个图表应用 CSS 内联样式

在您以表格形式添加对象之后：

进行以下操作：

1. 如果显示有属性，请跳至步骤 3，否则右键单击表格节点。
2. 选择属性。
3. 取消选中Keep Source Formats复选框。

这将使表格所有列中所有单元的内容从 QlikView 导出，不采用格式化。将会应用您在 HTML 模板中设置的 CSS 内联样式元素。在选中或不选中Keep Source Formats的情况下比较输出。

## 允许对特定列应用 CSS 内联样式元素

确保 QlikView 中您的表格对象为垂直表。QlikView 数据透视表必须转换为垂直表后方可选择它们以纳入 Qlik NPrinting 表格节点下方，否则您将无法访问各个字段/列。 如果您希望对大多数列保留源格式，可让Keep Source Formats复选框为整个表格选中，并执行以下操作：

1. 展开表格节点。

2. 单击您要应用 CSS 内联样式元素的列。

3. 取消选中Keep Source Formats复选框。

4. 如果选择了 HTML Encode复选框，可解释为 HTML 标签元素的任何非字母数字符号（例如 &lt; 和 /&gt;）将转换为 HTML 实体。

   如果清除了 HTML Encode复选框，任何可解释为 HTML 标签元素的非字母数字符号将通过 Qlik NPrinting HTML 模板编辑器中使用的底层 HTML 代码呈现。

   这将导致表格所选列中的所有单元的内容不采用格式化而从 QlikView 导出，但是它们将应用任何您已经在 HTML 模板中应用的 CSS 内联样式元素。您可根据需要对任意数目的单独列执行该操作。

## 向列应用格式

进行以下操作：

1. 在 HTML Report (Sales) 中，选择总利润。
2. 在Format字段中输入 $#.##,00。

## 构建您的表格

进行以下操作：

1. 用一行数据单元构建 HTML 表格。源代码应当类似以下形式：

   ```
   <table>
    	<tr>
   	<td></td> <td></td> <td></td>
   	</tr>
   </table>
   ```

2. 在表格数据单元标签之间拖动表格列节点图标。

   在列选择期间，您可通过按住 Ctrl 或 Shift 来选择多个值，然后将它们拖放至模板。这样将创建标签并将它们插入水平连续单元。

   已经为总利润列清除了复选框 Keep Source Formats。

3. 在第一行上面插入另一行。

4. 在新行中插入表格标题单元。

5. 输入所需标题。

6. 重新打开您添加至模板的每个列的属性对话框窗口，一次打开一个。

7. 在Show Header行的Value列中单击。此单元的值将为显示。

8. 单击出现的下拉菜单按钮，然后选择隐藏。

这是为两列清除了Keep Source Formats复选框的原表格，并添加了标题行，为每列隐藏了原表格标题。

## 应用内联样式元素

在该情况下，示例输出较简单，但是可让您大概了解输出内容。

下面是完整代码：

```
<html>
	<body>
		<table cellspacing=0 style="border-collapse:collapse;">      
			<tr style="width:0*;                             font-family:Verdana;                             font-size:small;                             font-variant:small-caps;">           
				<th style="border:grey dashed 1px;">              产品名称           </th>           		
				<th style="border:grey dashed 1px;">              销售额总计            </th>           
				 <th style="border:grey dashed 1px;">              Gross Profit          </th>           
				 <th style="border:grey dashed 1px;">              GP%          </th>           
				 <th style="border:grey dashed 1px;">              Quantity          </th>        
			 </tr>        
			 <tr>           
				<td style="width:0*;                                font-family:Verdana;                                font-size:small;                                font-weight:bold;                                font-variant:small-caps;">              %%ProductName%%          </td>           
				 <td>            %%Total Sales%%          </td>           
				 <td>              %%Gross Profit%%          </td>           
				 <td>              %%GP%_1%%          </td>           
				 <td style="width:0*;                                 color:red;                                 font-family:Georgia;                                 font-size-adjust:0.40;                                 background-color:Yellow;                                 border:green solid 2px;                                 text-align:right;">              %%Quantity_1%%          </td>        
			</tr>
		</table>
	</body>
</html>
```

### 相关流程

* [HTML 报表](https://help.qlik.com/zh-CN/nprinting/May2026/Content/NPrinting/HTMLReports/IntroHTML.htm)

## 了解详情

* [HTML 报表](https://help.qlik.com/zh-CN/nprinting/May2026/Content/NPrinting/HTMLReports/IntroHTML.htm)