# Table Column Cell

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FBWi2VXDXxQ2tbUNiJAAO%2Fimage.png?alt=media&#x26;token=f13c9d00-eae7-431c-85d7-f6dba0d2d8c3" alt="" width="73"><figcaption><p>Table Column Cell </p></figcaption></figure></div>

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

{% hint style="info" %}
The **`Table Column 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 Column Cell`** is usually added to rows inside the table's body section, but it can also be added to rows inside the table head section if required.

Within the table column 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 Table Column Cell Width

You can set the width of the table column 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.