Tables are the main carrier of data in PromptEye reports. You build every one from the same blocks: start with the minimal table and add layers, each for a reason. The patterns below come straight from the system sheet; switch between the light and dark version under each one.
The examples come straight from the system’s reference sheets, so their sample data is in Polish.
From minimal to complex
The minimal table is rows and columns only: no title, footer, logo, bars, heat map or vertical lines. It already has everything every table shares: a two-word header on two lines, numbers centred in fields with the decimal commas lined up, “%” next to the value, row lines, a row highlight and an indented first column.
The article block, 972 px. On a phone five columns fit the screen, so nothing scrolls.
In the system: guidelines/dane.html#t4
| Layer | What it adds | When |
|---|---|---|
| 1. Table | rows, columns, headers, numbers | always |
| 2. Figure | label, title, description of measures, logo, footer | when the table stands alone: report, article, graphic |
| 3. Main measure | a header with a second line, a bar, a line after the column | when one measure says the most |
| 4. Entity | logo next to the name, type in a column or under the name | when rows are companies or brands |
| 5. Column group | group label, frame, colour model marks | when several columns are the same measure in different models |
| 6. Heat map | cell colour, best in a row, switch in the legend | when a group has several columns of the same measure |
| 7. Leader and changes | orange circle, ▲▼ next to the number | a ranking or a change over time |
| 8. Partner | shared header, footer “PromptEye × Partner” | a co-branded report |
Complex table
The main report table across the full width of the report body (1284 px), with almost all layers. The columns go from the general to the detail: who, the main measure, the position on the list, visibility in each model. The same table in a narrower version stands in the article and the report chapter opening; the type then moves under the name.
Visibility set apart by a line, a bar and a header in the text colour; colour model marks in a frame; the entity logo (without a logo, its first letter); a heat map with a switch in the legend; the row under the cursor is highlighted.
In the system: guidelines/dane.html#t3
Table on a phone
In the system: guidelines/dane.html#t3
- A table that fits the screen (e.g. the minimal one, five columns) does not scroll.
- A wider one has the entity and the main measure frozen, the rest scrolls sideways.
- The hint “Przewiń w bok →” with a bar stands above the scrolling part, right after the frozen columns. The bar shows which part of the table is visible, and the fade on the right disappears at the end.
- Names wrap to 2–3 lines and are never cut. The type sits under the name.
- The leader dot stands next to the rank number, because there is no room for it next to the name.
Rules
- Title: a conclusion when the table carries one message; a description when it is a listing to browse; no title and no figure when the text introduces the table. A figure always has a footer: source, sample (n), period, address.
- Column order: who (#, entity, type), the main measure, supporting measures, the breakdown by AI model.
- A percent sign next to every percentage value (“61,1 %”); the header does not repeat it. A change in p.p. has its unit in the header, because it is not a percentage.
- Numbers centred, each in a fixed-width field: the decimal commas line up. Tabular figures, one decimal place or whole numbers across a column.
- Widths: fixed columns first (# 40–52 px, a number 86–108, a model 85–100), the entity gets the rest. When space runs out: the type under the name, a shorter header, the phone layout. Do not reduce the font size.
- Headers: Inter 500 12 in the metadata colour, one word per line for two words. A column group in a frame, model marks in colour.
- Colour: data in cobalt, text in text colours. Orange only for the leader. No red and green: an increase in the heading colour, a decrease in grey.
- Emphasis: the main measure, the best in a row and the leader. Nothing is heavier than 500. Vertical lines only after the main measure and on the sides of a group.
- Heat map: 5 cobalt steps, on by default, with a switch in the legend; in PDF and graphics always on.
- Sorting and filtering: there is no pattern yet. Until there is, the table is sorted descending by the main measure, and the description under the title says by what.
- Partner: a shared header and the footer “PromptEye × Partner”; the partner colour only as the second data series, never in headers, lines or the heat map (Co-branded reports).
- No data: “—” in grey, never “0”.
The table in code
You add layers with classes in the markup; the styles are in css/dane.css, the full class reference in docs/dane.md. Copy ready tables from the guidelines/dane.html sheet (#t4, #t3) and replace the data. Put column widths in style on the header cells, not in <colgroup>, which Claude Design does not support.
<!-- layer 1: the minimal table; widths in style on the header cells -->
<table class="dt">
<thead><tr><th class="rk" style="width:52px">#</th><th style="width:362px">Podmiot</th><th class="n" style="width:186px"><span class="sl">Otwiera</span><span class="sl">listę</span></th></tr></thead>
<tbody><tr><td class="rk">1</td><td class="pc">Media Expert</td><td class="n"><span class="lv">39,1 %</span></td></tr></tbody>
</table>
<!-- layer 2: a figure around the table -->
<figure class="t2fig">
<div class="t2fig-h"><div><small>Tabela 1 · Elektronika</small><h4>…</h4><p>…</p></div><img src="assets/logo/svg/prompteye-logo-color-on-light.svg" alt="PromptEye"></div>
<input type="checkbox" class="hm-sw" id="t1-mapa" checked>
<div class="gx" style="margin-left:810px;width:400px">Widoczność w modelu AI</div>
<table class="dt">…</table>
<div class="hm-lg"><label class="hm-tg" for="t1-mapa">Mapa ciepła</label>…</div>
<div class="t2fig-f"><span>Źródło: PromptEye …</span><b>prompteye.com/raporty</b></div>
</figure>AI model icons
- ChatGPT
llm-gpt - Gemini
llm-gemini - Perplexity
llm-perplexity - AI Overviews
llm-ai-overview - Claude
llm-claude - Grok
llm-grok - DeepSeek
llm-deepseek
In column headers the model marks are in colour: the files assets/llm/<model>.svg, on black ChatGPT and Grok in the -jasny.svg version. In data cells (e.g. presence in models) the icons are one colour, in the text colour, and a missing model is a dimmed icon (.mic.off). Paste the assets/llm/sprite.svg sprite into the page once, then reference the icons with <use>. Without the sprite the icons in the table are empty.
<!-- once per page: the contents of assets/llm/sprite.svg -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">…</svg>
<!-- icon in a data cell; missing model: class="mic off" -->
<svg class="mic" width="18" height="18" viewBox="0 0 24 24"><use href="#llm-gpt" width="24" height="24"/></svg>Shareable table
A vertical 1080 × 1350 post for LinkedIn and presentations: title 64, rows 24, the table .dt.xl. No breakdown by model: four model columns in a graphic in a feed would be about 8 px on a phone screen. The logo, title, source and address are part of the graphic. Shareable charts: the Charts chapter.
In the system: guidelines/typografia.html
In the system: guidelines/typografia.html