# Table

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fkq5FcdRkvRYG5ZTwN4ZH%2Fimage.png?alt=media&#x26;token=26aaf4ee-43bc-44d4-8dcc-e64bcd23e3a7" alt="" width="69"><figcaption><p>Table Element</p></figcaption></figure></div>

The **`Table`** element is used to display tabular data and forms part of the two composite elements in the Page Element Library: [Table (3 cols)](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table-3-cols) and [Table (4 cols)](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table-4-cols).

The table element consists of a table head section and a table body section.&#x20;

The table head section usually contains a single [Table Row](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table-row) element with one or more [Table Heading Cell](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table-heading-cell) elements. The number heading cells matches the number of columns you need.

{% hint style="success" %}
NOTE: The table head section can contain more than one table row element.
{% endhint %}

The table body section usually contains one or more [Table Row](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table-row) elements, each of which contain [Table Column Cell](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table-column-cell) elements.

***

## Options

The [Options tab](https://docs.zingy.ai/app-editor/page-element-settings#options-tab) settings for this element are described below:

### `Borders`

Controls the type of borders shown for the table. The possible values are:

* Default

  Separates each row of the table with a horizontal line.
* Disabled

  Displays the table without any borders
* Enabled

  Displays the table with borders

### `Compact Spacing`

When ON, reduces the padding inside each heading and column cell to give the table a compact look.

### `Striped Rows`

Render alternate rows using a gray background to give the table a striped look.

{% hint style="info" %}
You can further customize your table via [Custom CSS Classes](https://docs.zingy.ai/app-editor/page-element-settings#custom-css-classes) or the [Design Tab](https://docs.zingy.ai/app-editor/page-element-settings#design-tab).
{% endhint %}