---
title: Table
description: "The Table Block lets you create structured tables to display data in rows and columns. You can add header and footer rows, edit cell content directly, insert or delete rows and columns, and customize the table's colors, typography, borders, icons,…"
url: "https://shapekode.com/product/shapeblock/docs/table/"
updated: "2026-10-18"
category: Content Block
---

# Table

The Table Block lets you create structured tables to display data in rows and columns. You can add header and footer rows, edit cell content directly, insert or delete rows and columns, and customize the table's colors, typography, borders, icons, images, and tooltips.

## How to Add a Table Block

### Step 1: Add the Table Block

1. Open the page or post where you want to add a table.
2. Click the **+** button to open the Gutenberg Block Inserter.
3. Search for **Table** under ShapeBlock.
4. Select the Table Block.
5. Enter the number of columns and rows, then click **Create Table**.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-131.png)

### Step 2: Configure the Table Block

After creating the table, select the Table Block to access its customization options. The available tabs are:

- **Settings:** Enable a header row or footer row and control column widths.
- **Style:** Choose a table style and customize the table, individual cells, header row, and footer row.
- **Advanced:** Configure the block's spacing, background, and responsive visibility settings.

## Settings Tab

### 1. Table

- **Header row:** Enable or disable the first row for column headings.
- **Footer row:** Enable or disable the last row for totals, notes, or other footer content.
- **Equal column widths:** Make the table columns equal in width. When disabled, columns can size according to their content.

### 2.Create and Edit Table Content

- **Column count:** Set the number of columns when creating a new table.
- **Row count:** Set the number of rows when creating a new table.
- **Create Table:** Create the table using the selected row and column counts.
- **Edit table:** Use the table toolbar to manage the table structure.
  - **Insert row before:** Add a row before the selected row.
  - **Insert row after:** Add a row after the selected row.
  - **Delete row:** Remove the selected row.
  - **Insert column before:** Add a column before the selected column.
  - **Insert column after:** Add a column after the selected column.
  - **Delete column:** Remove the selected column.

### 3.Edit Cell Content

- **Text:** Click inside a cell and type to edit its content.
- **Add content:** Use the **+** button inside a cell to add supported Gutenberg blocks, such as Paragraph, Heading, Image, or ShapeBlock Icon List.
- **Caption:** Add or edit a caption displayed with the table.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-132.png)

## Style Tab

### 1. Table Style

- **Default:** Apply the default table style.
- **Stripes:** Apply the striped table style.
- **Stripe Color:** Set the color or gradient used for the striped rows when the Stripes style is selected.

### 2. Whole Table

These controls apply to the entire table. To customize an individual cell, select that cell and use the One Cell panel.

- **Text Color:** Set the text color across the table.
- **Background:** Set the table background color or gradient.
- **Lines Between Cells:** Customize the borders separating table cells.
- **Text Size & Font:** Customize the table's typography, including the available font settings. Responsive controls are available for desktop, tablet, and mobile.
- **Space Inside Cells:** Adjust the padding inside table cells. Responsive controls are available.
- **Rounded Corners:** Set the table's corner radius.

### 3. Header Row

This panel appears when the table has a header row enabled.

- **Text Color:** Set the text color for the header row.
- **Background:** Set the header row's background color or gradient.

### 4. Footer Row

This panel appears when the table has a footer row enabled.

- **Text Color:** Set the text color for the footer row.
- **Background:** Set the footer row's background color or gradient.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-133-1024x372.png)
**1, 2, 3 & 4 Style**

### 5. One Cell

Select a cell to customize its appearance individually. The panel title identifies the selected cell, such as a specific row and column.

- **Text Color:** Set the text color for the selected cell.
- **Background:** Set a solid background color or gradient for the selected cell.
- **Border:** Customize the selected cell's border.
- **Tooltip:** Enable or disable a tooltip for the selected cell.
- **Tooltip Text:** Enter the text to display when a visitor hovers over the tooltip icon.
- **Tooltip Icon:** Choose the icon displayed beside the cell content for the tooltip.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-134.png)

#### Tooltip Style

When a cell's Tooltip option is enabled, you can customize the appearance of tooltips throughout the table.

- **Tooltip Position:** Choose where the tooltip appears relative to its icon.
  - **Top**
  - **Bottom**
  - **Left**
  - **Right**
- **Icon Color:** Set the tooltip icon color.
- **Icon Size (px):** Set the tooltip icon size. Responsive controls are available.
- **Icon Margin:** Adjust the spacing around the tooltip icon.
- **Tooltip Background:** Set the tooltip background color.
- **Tooltip Text Color:** Set the text color inside the tooltip.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-135.png)

## Advanced Tab

### 1. Spacing

- **Padding:** Set the space inside the Table Block.
- **Margin:** Set the space outside the Table Block.
- **Responsive Spacing:** Configure spacing separately for desktop, tablet, and mobile when responsive controls are available.

### 2. Background

- **Background:** Set the background color of the entire Table Block.