# Table

<div align="left"><figure><img src="/files/bTS3zUa2whhDPA1tGm6A" 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)](/app-editor/page-editor/built-in-elements/table-3-cols.md) and [Table (4 cols)](/app-editor/page-editor/built-in-elements/table-4-cols.md).

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](/app-editor/page-editor/built-in-elements/table-row.md) element with one or more [Table Heading Cell](/app-editor/page-editor/built-in-elements/table-heading-cell.md) 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](/app-editor/page-editor/built-in-elements/table-row.md) elements, each of which contain [Table Column Cell](/app-editor/page-editor/built-in-elements/table-column-cell.md) elements.

***

## Options

The [Options tab](/app-editor/page-editor/page-element-settings.md#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](/app-editor/page-editor/page-element-settings.md#custom-css-classes) or the [Design Tab](/app-editor/page-editor/page-element-settings.md#design-tab).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
