---
title: "HTML Table Operator"
slug: "html-table-operator"
updated: 2025-09-26T04:15:24Z
published: 2025-09-26T04:15:24Z
canonical: "docs.unqork.io/html-table-operator"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.
# HTML Table Operator
UDesignerClassic Designer
## Overview
The **HTML Table operator** converts a data table into an HTML format. You'll use this operator when you want to display a clean, simple HTML version of your data. Additionally, this operator lets Creators customize the appearance of the table in the following ways:
- **Striped**: Alternating row colors for readability.
- **Bordered**: Adds borders around the table and cells.
- **Hoverable**: Highlights rows when the user hovers over them.
- **Condensed**: Creates a more compact table layout.
Creators can also use the argument port to create and apply their own CSS custom classes.
The HTML Table operator is located under the [Table](https://docs.unqork.io/Content/LandingPages/Landing_Table.htm) group to the left of the [Data Workflow](/v1/docs/table-operators) canvas.
## About the Info Window
Learn more about each setting in the HTML Table operator's Info window:
| Info |
| --- |
| Category | Grayed out and non-adjustable setting indicating the operation type. |
| Label | Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| Striped | Sets the HTML table class as **striped**. The resulting table has alternating color rows. |
| Bordered | Sets the HTML table class as **border**. The resulting table has an exterior border. |
| Hover | Sets the HTML table class as **hoverable**. The rows in the resulting table change color when hovered over. |
| Condensed | Sets the HTML table class as **condensed**. The resulting table shows in a smaller format. |
| Custom Class | Lets you set a custom HTML class for your table. You can also set a custom class using an argument by connecting an Input operator to the HTML Table operator's argument port. Then, entering `_arg` in this field. |
## Adding an HTML Table Operator
For this example, configure a [Data Workflow](/v1/docs/data-workflow-component) component to retrieve data from a [Data Table](/v1/docs/data-table-component) component. Use the HTML Table operator to convert the data to HTML data. Then, send the HTML data to an [HTML Element](/v1/docs/html-element-component) component to display it in the browser.
### Configure the Data Table Component
First, configure a [Data Table](https://docs.unqork.io/Content/A05-ModEditor-Data_Event/A05009-Data_Table_Component.htm) component to store sample data.
1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the Property ID field, enter **dtDogs**.
3. In the data table, enter the following:
| | A | B |
| --- | --- | --- |
| 1 | name | breed |
| 2 | Ivy | Golden Retriever |
| 3 | Lucy | Golden Retriever |
| 4 | Wally | Hound |
| 5 | Nacho | Pug |
| 6 | Thor | Corgidor |
| 7 | Holly | Golden Retriever |
4. Click **Save Component**.
### Configure the HTML Element Component
Configure an HTML Element component to receive the HTML table data from the Data Workflow.
1. Drag and drop a **H****TML Element** component onto your canvas, placing it below the **dtDogs** **Data Table** component.
2. In the Property ID field, enter **htmlExportTable** .
3. Click **Save Component**.
### Configure the Data Workflow Component
Configure a [Data Workflow](/v1/docs/data-workflow-component) component to retrieve the **dtDogs** **Data Table** component data and convert it into HTML data. Then, configure the output to send the data to the **htmlExportTable** **H****TML Element** component. You'll also configure a [Console](https://docs.unqork.io/Content/A06-ModEditor-Data_Workflow/A0602-IO/A0602005A-Console_Operator.htm) operator to view how the data passes through the Data Workflow in the DevTools Console.
1. Drag and drop a **D****ata Workflow** onto your canvas, placing it below the **htmlExportTable** **H****TML Element** component.
2. In the Property ID and Canvas Label Text fields, enter `dwfExportTable`.
#### Configure the Input Operator
1. Drag and drop an **I****nput** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:
| Info |
| --- |
| Category | Input |
| Component | dtDogs |
| Required | Yes |
| Source | Default |
#### Configure the HTML Table Operator
1. Drag and drop an **H****TML Table** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:
| Info |
| --- |
| Category | HTML Table |
| Label | Convert Table of Dogs |
| Striped | No |
| Bordered | No |
| Hover | No |
| Condensed | No |
| Custom Class | |
3. Connect the output port (right) of the **dtDogs** **I****nput** operator to the input port (left) of the **Convert Table of Dogs** **H****TML Table** operator.
#### Configure the Output Operator
Next, output the HTML table data to **htmlExportTable** **H****TML Element** component.
1. Drag and drop an **O****utput** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:
| Info |
| --- |
| Category | Output |
| Component | htmlExportTable |
| Action | value |
3. Connect the output port (right) of the **Convert Table of Dogs****H****TML Table** operator to the input port (left) of the **htmlExportTable****O****utput** operator.
#### Configure the Console Operator
Add a [Console](/v1/docs/console-operator) operator as an output to the HTML Table operator so you can review the results in the DevTools Console.
1. Drag and drop a **C****onsole** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:
| Info |
| --- |
| Category | Console |
| Label | HTML Console |
3. Connect the output port (right) of the **Convert Table of Dogs** **H****TML Table** operator to the input port (left) of the **HTML Console** **C****onsole** operator.
4. Click **Save Component**.
Here's how the completed Data Workflow looks:
### Configure the Button Component
Lastly, configure a [Button](/v1/docs/button-component) component to trigger the Data Workflow in Express View.
1. Drag and drop a **Button** component onto your canvas, placing it below the **htmlExportTable** **H****TML Element** component.
2. In the Property ID field, enter **btnShowTable**.
3. In the Label Text field, enter `Show Table`.
4. From the **Action Type** drop-down, select **Event**.
5. From the **On Click** drop-down, select **dwfExportTable**.
.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)
6. Click **Save Component**.
7. **Save** your module.
**Preview** your module in Express View and open the DevTools Console. Then, click Show Table to display the data.
.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)
## Overview
The **HTML Table operator** converts a data table into an HTML format. You'll use this operator when you want to display a clean, simple HTML version of your data. Additionally, this operator lets Creators customize the appearance of the table in the following ways:
- **Striped**: Alternating row colors for readability.
- **Bordered**: Adds borders around the table and cells.
- **Hoverable**: Highlights rows when the user hovers over them.
- **Condensed**: Creates a more compact table layout.
Creators can also use the argument port to create and apply their own CSS custom classes.
The HTML Table operator is located under the [Table](/v1/docs/table-operators) group to the left of the [Data Workflow](https://docs.unqork.io/Content/A06-ModEditor-Data_Workflow/A0601-General/A0601000A-Data_Workflow_Component.htm) canvas.
## About the Info Window
Learn more about each setting in the HTML Table operator's Info window:
| Setting | Description |
| --- | --- |
| Category | Grayed out and non-adjustable setting indicating the operation type. |
| Label | Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |
| Striped | Sets the HTML table class as **striped**. The resulting table has alternating color rows. |
| Bordered | Sets the HTML table class as **border**. The resulting table has an exterior border. |
| Hover | Sets the HTML table class as **hoverable**. The rows in the resulting table change color when hovered over. |
| Condensed | Sets the HTML table class as **condensed**. The resulting table shows in a smaller format. |
| Custom Class | Lets you set a custom HTML class for your table. You can also set a custom class using an argument by connecting an Input operator to the HTML Table operator's argument port. Then, entering `_arg` in this field. |
## Adding an HTML Table Operator
For this example, configure a [Data Workflow](/v1/docs/data-workflow-component) component to retrieve data from a [Data Table](/v1/docs/data-table-component) component. Use the HTML Table operator to convert the data to HTML data. Then, send the HTML data to an [HTML Element](/v1/docs/html-element-component) component to display it in the browser.
### Configure the Data Table Component
First, configure a [Data Table](/v1/docs/data-table-component) component to store sample data.
1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the Property ID field, enter **dtDogs**.
3. In the data table, enter the following:
| | A | B |
| --- | --- | --- |
| 1 | name | breed |
| 2 | Ivy | Golden Retriever |
| 3 | Lucy | Golden Retriever |
| 4 | Wally | Hound |
| 5 | Nacho | Pug |
| 6 | Thor | Corgidor |
| 7 | Holly | Golden Retriever |
4. Click Save.
### Configure the HTML Element Component
Configure an HTML Element component to receive HTML table data from the Data Workflow.
1. Drag and drop a **H****TML Element** component onto your canvas, placing it below the **dtDogs** **Data Table** component.
2. In the Property ID field, enter **htmlExportTable**.
3. Click **Save**.
### Configure the Data Workflow Component
Configure a [Data Workflow](/v1/docs/data-workflow-component) component to retrieve the **dtDogs** **Data Table** component data and convert it into HTML data. Then, configure the output to send the data to the **htmlExportTable** **H****TML Element** component. You'll also configure a [Console](/v1/docs/console-operator) operator to view how the data passes through the Data Workflow in the DevTools Console.
1. Drag and drop a **D****ata Workflow** onto your canvas, placing it below the **htmlExportTable** **H****TML Element** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfExportTable`.
#### Configure the Input Operator
1. Drag and drop an **I****nput** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:
| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtDogs |
| Required | Yes |
| Source | Default |
#### Configure the HTML Table Operator
1. Drag and drop an **H****TML Table** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:
| Setting | Value |
| --- | --- |
| Category | HTML Table |
| Label | Convert Table of Dogs |
| Striped | No |
| Bordered | No |
| Hover | No |
| Condensed | No |
| Custom Class | |
3. Connect the output port (right) of the **dtDogs** **I****nput** operator to the input port (left) of the **Convert Table of Dogs** **H****TML Table** operator.
#### Configure the Output Operator
Next, output the HTML table data to **htmlExportTable** **H****TML Element** component.
1. Drag and drop an **O****utput** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:
| Setting | Value |
| --- | --- |
| Category | Output |
| Component | htmlExportTable |
| Action | value |
3. Connect the output port (right) of the **Convert Table of Dogs****H****TML Table** operator to the input port (left) of the **htmlExportTable****O****utput** operator.
#### Configure the Console Operator
Add a [Console](/v1/docs/console-operator) operator as an output to the HTML Table operator so you can review the results in the DevTools Console.
1. Drag and drop a **C****onsole** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:
| Setting | Value |
| --- | --- |
| Category | Console |
| Label | HTML Console |
3. Connect the output port (right) of the **Convert Table of Dogs** **H****TML Table** operator to the input port (left) of the **HTML Console** **C****onsole** operator.
4. Click **Save**.
Here's how the completed Data Workflow looks:
### Configure the Button Component
Lastly, configure a [Button](/v1/docs/button-component) component to trigger the Data Workflow in Express View.
1. Drag and drop a **Button** component onto your canvas, placing it below the **htmlExportTable** **H****TML Element** component.
2. In the Property ID field, enter **btnShowTable**.
3. In the Label Text field, enter `Show Table`.
4. Set the **Action Type** as **Event**.
5. From the **On Click** drop-down, select **dwfExportTable**.
6. Click **Save & Close**.
7. **Save** your module.
Preview your module in Express View and open the DevTools Console. Then, click Show Table to display the data.
.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A08Z&se=2026-11-09T17%3A59%3A08Z&sr=c&sp=r&sig=hANbqYivygB%2FSOd4P6r6m3VUvMriGem8Z0UCgmEw1PI%3D)
##
## Resources
- [Table Operators](/v1/docs/introduction-to-data-workflow-table-operators)
- [Introduction to Data Workflow](/v1/docs/introduction-to-data-workflow)
- [Introduction to Data Workflow Operators](/v1/docs/data-workflow-operators)
- [Input Output Operators](/v1/docs/introduction-to-data-workflow-io-operators)
- [Gateway Operators](/v1/docs/introduction-to-data-workflow-gateways-operators)
HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.
Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.
Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.
A Property ID is the unique field ID used by Unqork to track and link components in your module.
The DevTools Console helps you securely store, build, test, and deploy your software.
Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .
Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.
Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.