# Html table

The HTML table allows for usage of HTML code to customize and present data. The source of the data can either be directly from a database or through a workflow. The HTML table portlet is, by default, wrapped as a table.

## General

General data is required for all portlets.

[General configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#general)

## Listeners

The portlet can listen to the following commands:

* On Row Selection
* On Refresh

[Listeners configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#listeners)

## Data

### Data source

The portlet data source configuration enables the portlet to execute specified queries towards the chosen database connector to fetch data, or fetch data from a workflow.

* Database: uses a flow connector to retrieve data from a database
* Workflow: runs a workflow to retrieve data

[Data source configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#database-source)

[Workflow source configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#workflow-source)

## Default presentation

<div align="left"><img src="https://543770944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M0cMM76QMiiD7D7ZA7J%2F-M0cMY09VrTUHk-MfLWJ%2Fimage.png?alt=media&#x26;token=5cb142ab-294f-48da-b543-039be107d754" alt=""></div>

## Content

In the table header and body sections, use HTML to configure the portlet content.

{% tabs %}
{% tab title="Content" %}

<div align="left"><img src="https://543770944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M1VxJp1wHwux1zy-OVI%2F-M1VxpVbgqEFqvBycveE%2Fimage.png?alt=media&#x26;token=6068ae63-6d5f-4978-81a5-3efabc1e8356" alt=""></div>
{% endtab %}

{% tab title="Preview" %}

<div align="left"><img src="https://543770944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LtPTgZOYmpJka4jqs1v%2F-M1VxJp1wHwux1zy-OVI%2F-M1Vy5qDCSFXjvHqgarR%2Fimage.png?alt=media&#x26;token=a6524808-b378-4762-a2f0-1f1b20a8af3a" alt=""></div>
{% endtab %}
{% endtabs %}

## Style

Change the header text color and add a header stripe by configuring style.

[Style configuration](https://help.novacuraflow.com/6.11/development/flow-portal-2/common-configuration#style)