# Compare table

Plans or products as columns, features as rows, for the decision that is made by lining things up. The header stays at the top of its box and the feature names at its left. Every cell is a mark that differs in shape as well as in word (a disc with a tick, a dash, a half disc), so it reads without colour, and a partial one says what is meant (“Office hours”). One column can be lifted and ringed as the one to look at. On a phone the table scrolls inside its own box.

Kit part · With the Kit · https://tactileui.dev/parts/compare-table

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The kit’s table, with the head and the first column pinned by position: sticky inside the box. The marks are drawn in ink on the face and need no accent colour. It is markup and a stylesheet; there is no script to load.

## Variants

- Two plans, one group
- Nothing lifted
- No keys under it
- Narrow · scrolls inside its own box

## States

- Included
- Not included
- Partly
- A figure

## Props and options

| Name | Kind | Description |
| - | - | - |
| caption | element | The caption names the table, each plan is a column head and each feature a row head; a feature group is a row with a rowgroup head. |
| [data-featured] | attribute | The column to look at: lifted, with a rule down each side, and named by a tag in words (“Most chosen”). |
| compareMark(value) | function | What a value means. |

## Usage notes

Scroll the table: the header and the feature names stay put. On a narrow screen the table scrolls inside its own box; focus it and use the arrow keys. Each mark is a different shape as well as having a word.

## Accessibility

- It is a real table.
- A mark is never a colour. Included, not included and partly included are three different shapes (a disc with a tick, a dash, a half disc) and each holds its word for a screen reader. A partial mark says what is meant beside it, in print.
- The featured column is lifted and ringed and carries a tag in words, so it does not rely on colour either. The header and the feature names stay pinned while the rest scrolls.
- On a phone the table keeps its width and scrolls inside its own box. The box takes the focus and answers the arrow keys, has a visible ring, and is named by the table’s caption; the page does not scroll sideways.
- Only the featured plan’s key is the contrast key; the others are plain keys, and each key’s name includes its plan (“Choose Fleet”).

## Related parts

- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
- [Data table](https://tactileui.dev/parts/data-table): The kit’s table with the tools a working one needs: headers that sort, a filter well, a check key on every row with one in the header that selects them all and sinks half way when only some are chosen, and a header that stays at the top while the rows scroll under it. While rows are chosen a plate slides out of a slot under the tools, its lamp lit, carrying what can be done to them. Without the script it is the plain table.
- [Status](https://tactileui.dev/parts/status): A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
- [Check](https://tactileui.dev/parts/check): An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.