# Comparison table

> A table that compares up to four columns – your product against others, or your own plans and bundles – feature by feature, with a highlighted column you recommend.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/comparison-table/

## At a glance

- **In the editor:** Comparison table
- **Where it goes:** Any page template, with Add section
- **In the presets:** Not on any page by default – add it where you need it
- **Settings:** 27
- **Blocks:** Row
- **App blocks:** Yes

## Set it up

1. Name the columns: **First column heading** (for example *Feature*), then **Column 1** to **Column 4**. Columns with an empty name are hidden.
2. Add a **Row** block for each feature: the **Feature**, an optional **Note** under it, and a value for each column.
3. Choose a **Highlighted column** and an optional **Highlight badge**, such as *Best value*.

## Values

Write anything in a cell: *2 years*, *Oak*, *$49*. With **Show icons for yes and no**, the words *Yes* and *No* become a check mark and a cross, which makes a feature table easy to scan.

## Options

- **Width:** *Narrow* for a focused table, or *Page width*.
- **Row style:** *Lines* or *Striped*.
- **Keep the first column visible on mobile:** on phones the table scrolls sideways while the feature names stay in place.
- A **Button** under the table leads to the product or collection.

For comparisons shoppers make themselves, use the [Compare](https://themelab.page/tally/docs/theme-settings.md#compare) feature on product cards.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Comparison table** (27 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | – |
| **Heading size** | Large · Medium · Small | Medium |
| **Heading alignment** | Left · Center | Center |

*Columns*

Columns with an empty name are hidden. In rows, Yes and No become icons when icons are on.

| Setting | Options | Default |
| --- | --- | --- |
| **First column heading** | Text | – |
| **Column 1** | Text | Sample text |
| **Column 2** | Text | Sample text |
| **Column 3** | Text | Sample text |
| **Column 4** | Text | – |
| **Highlighted column** | None · Column 1 · Column 2 · Column 3 · Column 4 | Column 2 |
| **Highlight badge** | Text | Sample text |

*Table*

| Setting | Options | Default |
| --- | --- | --- |
| **Width** | Narrow · Page width | Narrow |
| **Row style** | Lines · Striped | Lines |
| **Show icons for yes and no** | Checkbox | On |
| **Keep the first column visible on mobile** | Checkbox | On |

*Button*

| Setting | Options | Default |
| --- | --- | --- |
| **Button label** | Text | – |
| **Button link** | Link | – |
| **Button style** | Primary · Secondary · Highlight | Primary |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 56px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Row** (6 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Feature** | Text | Sample text |
| **Note** – Optional. Small text under the feature name. | Text | – |
| **Column 1 value** | Text | Sample text |
| **Column 2 value** | Text | Sample text |
| **Column 3 value** | Text | Sample text |
| **Column 4 value** | Text | – |

## Related

- [FAQ](https://themelab.page/tally/docs/sections/faq.md): Questions that open one at a time, with a heading and a contact button beside them, and structured data for search engines.
- [Multicolumn](https://themelab.page/tally/docs/sections/multicolumn.md): Columns with an icon or image, a heading, text and a link – for benefits, services and how it works.