Design prompts for tables

A data table has one job: let someone scan a wall of records and find the row that needs them in seconds. The ones that read well right-align their numbers in a tabular figure font so the digits line up, turn status into a colored pill instead of a raw value, use hairline rules instead of a heavy boxed grid, show only the columns that matter with sort, filter and pagination for the rest, and reflow into cards on a narrow screen. The prompts below are the most-copied table designs in the Superdesign library, from dense SaaS admin and CRM tables to financial watchlists, invoice ledgers and comparison matrices. Open any one to see the exact prompt behind it, then tweak the copy and generate your own editable version in seconds.

How to prompt a table that looks designed, not generated

An AI design agent has a strong default for a data table, and most of those defaults make the data harder to read: numbers left-aligned in a proportional font, a heavy boxed grid with zebra stripes, status as a raw value, every column from the database dumped in, cramped rows with no header distinction, and a wide table that overflows on mobile. A good prompt is really a list of constraints that override those defaults. Here is each default you need to override, the words that do it, and a template that bakes them all in.

Design a [light or dark] [type] data table for [who reads it] to [the task it supports, e.g. find the orders that need action].
Numbers: right-align every numeric column and set the figures in a tabular or monospace font so the digits line up by place value. Keep the format consistent down each column (currency, decimals, thousands separators).
Status: render status as a colored pill with semantic color, green for done, amber for waiting, red for trouble, never a raw value or plain text.
Rows: use hairline horizontal rules only, no vertical lines and no zebra striping, with about 16px of vertical padding so rows breathe.
Header: a quiet uppercase header row, visually distinct from the body, that stays pinned (sticky) as the table scrolls.
Columns: show only the [few columns] that drive the decision, then add sortable headers, a search or filter bar, a column toggle, and pagination for the rest.
Cells: pair related data, an avatar with a name, a progress bar with its percent, and right-align the actions menu.
Responsive: below a breakpoint, reflow each row into a labeled card, one field per line, so it never needs sideways scrolling.
Style: a neutral base with one [accent] color reserved for selection and the primary action. Header typeface [name], body [name], figures in [a mono or tabular face], not the default Inter and no purple gradient.

Align the numbers

Default: It left-aligns numeric columns in a proportional font, so the digits do not line up and you cannot compare magnitudes by glancing down the column.

Constrain it: Right-align every numeric column and set the figures in a tabular or monospace font, so digits line up by place value and the column reads in one pass.

Rows and rules

Default: It wraps the table in a full boxed grid and adds zebra striping, so the lines and fills compete with the data and the table feels heavy.

Constrain it: Ask for hairline horizontal rules only, no vertical lines and no zebra striping, with roomy row padding so the eye tracks straight across each row.

Status as a pill

Default: It prints status as a raw value or a plain word in body text, so every row looks the same and nothing flags the one that needs you.

Constrain it: Render status as a colored pill with semantic color: green for done, amber for waiting, red for trouble, so the row that needs action jumps out.

Density and the header

Default: It crams rows at the default line height and styles the header like just another row, so the whole table blurs into one undifferentiated block.

Constrain it: Set about 16px of row padding and a quiet uppercase header that is visually distinct and stays pinned as the table scrolls.

Only the columns that matter

Default: It dumps every column from the database into the table, so it spills off the screen and the few columns that drive a decision get lost in the noise.

Constrain it: Name only the columns that matter, then add sortable headers, a search or filter bar, a column toggle and pagination so the rest stay one click away.

Reflow on mobile

Default: On a narrow screen it keeps all the columns, so the table overflows and you are left dragging a tiny horizontal scrollbar to read anything.

Constrain it: Ask it to reflow each row into a labeled card below a breakpoint, one field per line, so the table stays readable with no sideways scrolling.

Color and type

Default: Left alone it reaches for a dark purple table in Inter with a rainbow of chip colors, so the look reads as generic and the color carries no meaning.

Constrain it: Name a neutral base with one accent reserved for meaning, a named display face for headers, and a mono or tabular figure font so the numbers align.

Frequently asked questions

What makes a good data table UI?

Readability and scanning speed. Right-align the numbers in a tabular figure font so digits line up, turn status into a colored pill, use hairline horizontal rules instead of a heavy boxed grid, show only the columns that drive the decision with sort and filter for the rest, and reflow into cards on mobile. The point is to find the row you need in seconds.

Should numbers be left or right aligned in a table?

Right-aligned. As Matthew Strom puts it in Design Better Data Tables, we compare numbers by reading them right to left, ones digit first, then tens, then hundreds, so right-aligning lets the place values line up. Pair that with a tabular figure font, which sizes every digit the same, and a long column of numbers becomes far easier to scan. Text stays left-aligned, and headers carry the alignment of their data.

Should a data table use zebra striping?

Usually not. Matthew Strom argues zebra striping is "really, really bad", and most design guides agree that horizontal rules only is the most common and recommended style for any data set: it cuts the visual noise of a full grid while still helping the eye keep its place. Reach for striping only when rows are very tall or the table is unusually wide, and keep the shade faint.

Why does my AI-generated table look generic?

Because a vague prompt gets the model defaults: numbers left-aligned in a proportional font, a heavy boxed grid with zebra stripes, status as a raw value, every column dumped in, cramped rows, and a dark purple card in Inter. Right-align the numbers in a tabular font, ask for hairline rules and status pills, trim the columns and add sort and filter, pick one accent on a neutral base and a non-default typeface, and it stops reaching for the average.

How do you write a prompt to generate a data table UI?

Describe the brief, not the vibe: who reads it and the task it supports, right-aligned numbers in a tabular figure font, status as a colored pill, hairline rules with roomy rows, a pinned uppercase header, only the columns that matter plus sort, filter and pagination, a mobile reflow into cards, one accent color and a named typeface. The template above walks through each part, and you can open any example here to see a full prompt that works.

Can I use my own columns and brand colors?

Yes. Generate the layout first, then describe your columns, accent color, typeface and real data in plain language and branch a variant. Every design comes back as real, editable code, so wiring in your data source and brand happens in your own repo, not a rebuild from a picture. Stuck on something? Ping us and we will sort it out together.