Tabele

Od minimalnej do złożonej

Tabela minimalna to same wiersze i kolumny: bez tytułu, stopki, logo, słupków, mapy ciepła i linii pionowych. Ma już wszystko, co wspólne dla każdej tabeli: nagłówek z dwóch słów w dwóch liniach, liczby wyśrodkowane w polach z przecinkami w pionie, „%” przy wartości, linie wierszy, podświetlenie wiersza i wciętą pierwszą kolumnę.

Tabela złożona

Główna tabela raportu na całą szerokość treści (1284 px), z prawie wszystkimi warstwami. Kolumny idą od ogółu do szczegółu: kto, najważniejsza miara, pozycja na liście, widoczność w każdym modelu. Ta sama tabela w węższej wersji stoi w artykule i w otwarciu rozdziału raportu; typ przechodzi wtedy pod nazwę.

Tabela na telefonie

Zasady

• Tytuł: wniosek, gdy tabela niesie jedną myśl; opis, gdy to zestawienie do przeglądania; bez tytułu i figury, gdy tabelę zapowiada tekst. Figura ma zawsze stopkę: źródło, próba (n), okres, adres.
• Kolejność kolumn: kto (#, podmiot, typ), najważniejsza miara, miary pomocnicze, rozbicie na modele AI.
• Procent przy każdej wartości procentowej („61,1 %”); nagłówek go nie powtarza. Zmiana w p.p. ma jednostkę w nagłówku, bo to nie procent.
• Liczby wyśrodkowane, każda w polu o stałej szerokości: przecinki stoją jeden pod drugim. Cyfry tabelaryczne, w kolumnie jedno miejsce po przecinku albo całe liczby.
• Szerokości: najpierw kolumny stałe (# 40–52 px, liczba 86–108, model 85–100), resztę dostaje podmiot. Gdy brakuje miejsca: typ pod nazwę, krótszy nagłówek, układ telefonu. Pisma nie zmniejszaj.
• Nagłówki: Inter 500 12 w kolorze metadanych, jedno słowo w linii przy dwóch słowach. Grupa kolumn w ramce, znaki modeli w kolorze.
• Kolor: dane w kobalcie, tekst w kolorach tekstu. Pomarańcz tylko u lidera. Bez czerwieni i zieleni: wzrost w kolorze nagłówków, spadek w szarości.
• Wyróżnienia: najważniejsza miara, najlepszy w wierszu i lider. Nic nie jest grubsze niż 500. Linie pionowe tylko po najważniejszej mierze i na bokach grupy.
• Mapa ciepła: 5 kroków kobaltu, domyślnie włączona, z przełącznikiem w legendzie; w PDF i grafikach zawsze włączona.
• Sortowanie i filtrowanie: wzoru jeszcze nie ma. Do tego czasu tabela jest posortowana malejąco po najważniejszej mierze, a opis pod tytułem mówi, po czym.
• Partner: wspólny nagłówek i stopka „PromptEye × Partner”; kolor partnera tylko jako druga seria danych, nigdy w nagłówkach, liniach ani mapie ciepła (Raport z partnerem).
• Brak danych: „—” w szarości, nigdy „0”.

Tabela w kodzie

Warstwy dokładasz klasami w znacznikach, style są w css/dane.css, pełny opis klas w docs/dane.md. Gotowe tabele kopiujesz z arkusza guidelines/dane.html (#t4, #t3) i podmieniasz dane. Szerokości kolumn wpisuj w style na komórkach nagłówka, nie w <colgroup>, którego Claude Design nie obsługuje.

<!-- warstwa 1: tabela minimalna; szerokości w style na nagłówkach -->
<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&nbsp;%</span></td></tr></tbody>
</table>

<!-- warstwa 2: figura wokół tabeli -->
<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>

Ikony modeli AI

• ChatGPTllm-gpt
• Geminillm-gemini
• Perplexityllm-perplexity
• AI Overviewsllm-ai-overview
• Claudellm-claude
• Grokllm-grok
• DeepSeekllm-deepseek

W nagłówkach kolumn znaki modeli są w kolorze: pliki assets/llm/<model>.svg, na czerni ChatGPT i Grok w wersji -jasny.svg. W komórkach danych (np. obecność w modelach) ikony są jednobarwne, w kolorze tekstu, a brak modelu to ikona przygaszona (.mic.off). Wklej raz do strony sprite assets/llm/sprite.svg, potem odwołuj się do ikon przez <use>. Bez sprite’a ikony w tabeli są puste.

<!-- raz na stronie: zawartość assets/llm/sprite.svg -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">…</svg>

<!-- ikona w komórce danych; brak modelu: class="mic off" -->
<svg class="mic" width="18" height="18" viewBox="0 0 24 24"><use href="#llm-gpt" width="24" height="24"/></svg>

Tabela do udostępnienia

Pionowy post 1080 × 1350 na LinkedIn i do prezentacji: tytuł 64, wiersze 24, tabela .dt.xl. Bez rozbicia na modele: cztery kolumny modeli na grafice w kanale miałyby na ekranie telefonu ok. 8 px. Logo, tytuł, źródło i adres są częścią grafiki. Wykresy do udostępnienia: rozdział Wykresy.