# Table Heading Cell

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FbZmt32vlgIwehuh2FKlh%2Fimage.png?alt=media&#x26;token=0e8c5266-b3d2-4a62-a78d-b71a947d1437" alt="" width="72"><figcaption><p>Table Heading Cell</p></figcaption></figure></div>

Use the **`Table Heading Cell`** to add heading columns to a table.

{% hint style="info" %}
The **`Table Heading Cell`** can only be added to a [Table Row](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/table-row) element.&#x20;
{% endhint %}

The **`Table Heading Cell`** is usually added to rows inside the table's head section, but it can also be added to rows inside the table body section if required.

Within the table heading cell element, you have the freedom to effortlessly drag and drop various elements such as [Image](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/image), [Alert](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/alert), [Badged Text](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/badged-text), [Link](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/link), [Text](https://docs.zingy.ai/app-editor/editing-text#text), [Heading](https://docs.zingy.ai/app-editor/editing-text#heading), [Flexible Area](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/flexible-area), [Button](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/button), etc. However, it's important to note that certain elements may have specific restrictions. For instance, a [Layout Column](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-column) can only be added to a [Layout Row](https://docs.zingy.ai/app-editor/page-editor/built-in-elements/layout-row), adhering to its designated usage.

***

## Setting Heading Cell Width

You can set the width of the table heading cell in the following ways:

* [Custom CSS Classes](https://docs.zingy.ai/app-editor/page-element-settings#custom-css-classes)
* Via the [Design Tab](https://docs.zingy.ai/app-editor/page-element-settings#design-tab) by setting the Width available in the Sizing category.

***

## Options

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

### `Hover`

Controls what happens when the mouse hovers over any part of the column.

The possible values are:

* Disabled

  This is the default setting with no changes.
* Enabled

  The entire row is given a gray background.
* Clickable

  The column is rendered using a gray background and the mouse cursor is changed to a pointer.

### `Look`

Provides a list of pre-defined background colors to use for the column.&#x20;

You can also customize the background color or any other design attribute 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).

### `Column Span`

A numeric value (greater than 1) indicating the number of columns the cell extends. If not set, it is assumed to be 1. See [here](https://en.wikipedia.org/wiki/Table_cell) for more information.

### `Row Span`

A numeric value (greater than 1) indicating the number of rows the cell extends. If not set, it is assumed to be 1. If set to 0, it extends the column across all the rows of the section.

{% hint style="info" %}
When the Row Span is set to 0, the column will be extended across all the rows in the section where the column is. e.g. if the column were inside a row of the head section, then this column will extend to all rows in the head section.
{% endhint %}

See [here](https://en.wikipedia.org/wiki/Table_cell) for more information.

### `Scope`

Allows you to specify whether this cell relates to a row or column. Please note that this has no visual effect, but can be used by screen readers.

The possible values are:

* Default

  Automatically determined by the browser
* Row

  Specifies that this cell is a header for a row.
* Column

  Specifies that this cell is a header for a column.