Tabela w tekście. Kiedy pomaga czytelnikowi i jak przygotować ją na telefon?

Tabela potrafi w kilka sekund pokazać to, co w zwykłym tekście zajęłoby pół strony: różnice między pakietami, wymiary, terminy, zakres usługi. Ta sama tabela otwarta na telefonie bywa jednak nieczytelna. Kolumny ściskają się do kilku liter, tekst łamie się po jednym wyrazie, a część danych ucieka poza krawędź ekranu.

Ta instrukcja jest przeznaczona dla właścicieli firm i osób, które same dodają treści na stronę, najczęściej w WordPressie. Nie wymaga znajomości programowania. Jedyny fragment kodu, jaki się tu pojawia, to dwa wiersze do wklejenia w gotowe pole.

Po lekturze czytelnik będzie umiał ocenić, czy dana treść w ogóle nadaje się na tabelę, zaplanować ją tak, aby mieściła się na wąskim ekranie, wstawić ją poprawnie w edytorze, sprawdzić wynik na telefonie i naprawić najczęstsze usterki. Osobna część dotyczy tego, jak tabelę odczytuje wyszukiwarka i czytnik ekranu.

Kiedy tabela naprawdę pomaga czytelnikowi?

Tabela służy do pokazywania danych, które mają dwa wymiary. W wierszach znajdują się rzeczy tego samego rodzaju, na przykład pakiety, modele albo terminy. W kolumnach znajdują się cechy, którymi te rzeczy się różnią. Jeżeli czytelnik ma porównać kilka pozycji pod kilkoma względami, tabela jest najlepszą formą.

Prosty sprawdzian wygląda tak: należy zadać sobie pytanie, czy czytelnik będzie czytał treść w poprzek i w dół. Jeśli będzie porównywał wartości w jednej kolumnie albo szukał jednego wiersza, który go dotyczy, tabela ma sens. Jeśli będzie czytał wszystko po kolei, od lewej do prawej, jak zdania, lepszy okaże się zwykły tekst.

W praktyce tabela sprawdza się w kilku typowych sytuacjach:

• porównanie dwóch, trzech lub czterech wariantów usługi albo produktu pod tymi samymi względami,
• zestawienie parametrów technicznych, wymiarów, rozmiarów i wag,
• harmonogram, godziny przyjęć, terminy dostaw dla różnych miejscowości,
• zestawienie zakresu prac z informacją, co jest w cenie, a co poza nią,
• słowniczek, w którym krótkiemu pojęciu odpowiada krótkie objaśnienie.

Wspólna cecha tych przykładów to krótkie treści w komórkach. Liczba, jedno słowo, kilka wyrazów. Tabela przestaje pomagać w chwili, gdy w komórkach pojawiają się całe zdania. Czytelnik nie porównuje wtedy wartości, tylko czyta kilka wąskich kolumn tekstu ułożonych obok siebie.

Tabele są szczególnie przydatne na stronach, na których klient podejmuje decyzję. Dobrze widać to przy zapytaniach o koszty, o których piszę osobno w tekście o tym, jak przygotować stronę odpowiadającą na frazy ze słowem „cena” i „cennik”. Osoba, która szuka cennika, chce zobaczyć zestawienie, a nie opis.

Kiedy lepiej zrezygnować z tabeli?

Tabela bywa nadużywana, ponieważ wygląda poważnie i porządkuje stronę wizualnie. Są jednak treści, którym szkodzi. Rozpoznanie ich przed pracą w edytorze oszczędza najwięcej czasu, bo źle dobranej formy nie naprawi żadne ustawienie.

Treść ma tylko jeden wymiar

Jeżeli tabela miałaby jedną kolumnę z treścią albo dwie kolumny, z których pierwsza to tylko numer porządkowy, jest to lista. Lista wypunktowana lub numerowana układa się na telefonie bez żadnych problemów, bo każdy punkt zajmuje pełną szerokość ekranu.

W komórkach są długie opisy

Gdy każda komórka zawiera dwa lub trzy zdania, lepiej podzielić treść nagłówkami. Każdy wariant dostaje własny śródtytuł, a pod nim krótki akapit lub listę cech. Zasady układania takich śródtytułów opisałem w tekście o tym, jak ułożyć strukturę nagłówków H2 i H3.

Tabela ma służyć do ustawienia elementów obok siebie

Tabela nie jest narzędziem do budowania układu strony. Dokumentacja WordPressa mówi o tym wprost: blok tabeli jest przeznaczony do danych tabelarycznych, a do ustawiania treści obok siebie służy blok kolumn. Zdjęcie po lewej i tekst po prawej to zadanie dla kolumn, które na telefonie same układają się jedna pod drugą.

Kolumn jest więcej, niż zmieści ekran telefonu

Na wąskim ekranie wygodnie czyta się dwie kolumny, a przy krótkich wartościach trzy lub cztery. To nie jest oficjalny limit, tylko wniosek z praktyki, który każdy może sprawdzić na własnym telefonie. Tabela z ośmioma kolumnami wymaga osobnego rozwiązania, o którym mowa w dalszej części.

Jak zaplanować tabelę, zanim powstanie w edytorze?

Większość kłopotów z tabelą na telefonie powstaje na etapie planowania, a nie ustawień. Zalecam przygotowanie tabeli najpierw na kartce albo w arkuszu kalkulacyjnym, w kolejności podanej niżej.

1. Określenie jednego pytania, na które tabela ma odpowiedzieć, na przykład „Czym różnią się pakiety?” albo „Ile trwa dostawa do danego miasta?”. Dane, które nie pomagają odpowiedzieć na to pytanie, nie trafiają do tabeli.
2. Ustalenie, co będzie wierszem, a co kolumną. Rzeczy porównywane, których jest mało, lepiej umieścić w kolumnach. Cechy, których jest dużo, lepiej umieścić w wierszach. Tabela rośnie wtedy w dół, a przewijanie w dół jest na telefonie naturalne.
3. Policzenie kolumn. Jeżeli wychodzi więcej niż cztery, należy sprawdzić, czy część z nich da się połączyć, usunąć albo przenieść do drugiej tabeli.
4. Skrócenie nagłówków kolumn do jednego lub dwóch wyrazów. Długi nagłówek wymusza szeroką kolumnę nawet wtedy, gdy pod nim stoją same liczby.
5. Skrócenie treści komórek. Jednostkę miary wystarczy podać raz, w nagłówku. Zamiast zdania „Usługa jest dostępna w tym pakiecie” wystarczy słowo „tak”.
6. Przygotowanie zdania, które stanie nad tabelą i powie, co w niej jest, oraz zdania pod tabelą, które podaje najważniejszy wniosek. Czytelnik, który tabelę pominie, i tak pozna sedno.

W komórkach radzę unikać samych znaków graficznych, takich jak ptaszek i krzyżyk wstawione jako obrazki. Słowa „tak” i „nie” są zrozumiałe dla każdego, także dla osoby korzystającej z czytnika ekranu. Puste komórki również wprowadzają w błąd, bo nie wiadomo, czy oznaczają „nie dotyczy”, czy brak danych. Lepiej wpisać „brak” albo „nie dotyczy”.

Liczby w jednej kolumnie powinny mieć ten sam zapis: tę samą jednostkę i tę samą liczbę miejsc po przecinku. Dzięki temu wzrok od razu wychwytuje, która wartość jest większa.

Jak wstawić tabelę w edytorze WordPressa?

Edytor blokowy WordPressa ma własny blok tabeli i w większości przypadków nie potrzeba do tego dodatkowej wtyczki. Nazwy opcji podaję zgodnie z polską wersją panelu oraz z oficjalną dokumentacją bloku. W zależności od wersji WordPressa i motywu pojedyncze etykiety mogą się nieznacznie różnić.

1. W edytorze wpisu lub strony należy kliknąć znak plusa w miejscu, w którym ma stanąć tabela, i wyszukać blok „Tabela”. Szybszy sposób to wpisanie w pustym akapicie ukośnika i słowa /tabela (w angielskiej wersji panelu /table).
2. W oknie, które się pojawi, podaje się liczbę kolumn i liczbę wierszy, a następnie klika „Utwórz tabelę”. Wiersze i kolumny można później dokładać i usuwać, więc nie trzeba trafić od razu.
3. Po zaznaczeniu tabeli należy otworzyć boczny panel ustawień bloku. W części z ustawieniami znajdują się trzy przełączniki: stała szerokość komórek tabeli, „Sekcja nagłówka” i „Sekcja stopki”.
4. Należy włączyć „Sekcja nagłówka”. Nad tabelą pojawi się dodatkowy wiersz, w który wpisuje się nazwy kolumn. To ważne: tylko wtedy nazwy kolumn są w kodzie strony oznaczone jako nagłówki, a nie jako zwykłe komórki z pogrubionym tekstem.
5. Kolejna czynność to uzupełnienie komórek. Do następnej komórki przechodzi się klawiszem Tab.
6. Na pasku narzędzi bloku znajduje się przycisk „Edytuj tabelę”. Rozwija on polecenia wstawienia wiersza przed zaznaczonym lub po nim, wstawienia kolumny oraz usunięcia wiersza i kolumny.
7. Na tym samym pasku jest przycisk dodawania podpisu. Podpis pojawia się pod tabelą i powinien w kilku słowach mówić, co ona zawiera, na przykład „Porównanie zakresu trzech pakietów opieki nad stroną”.
8. Na koniec należy zapisać wpis i obejrzeć go w podglądzie, najlepiej od razu w widoku dla telefonu.

Najwięcej nieporozumień budzi przełącznik stałej szerokości komórek, w dokumentacji opisany jako „Fixed width table cells”. Gdy jest włączony, wszystkie kolumny mają taką samą szerokość, niezależnie od tego, ile jest w nich treści. Gdy jest wyłączony, szerokość kolumn dopasowuje się do zawartości. Według dokumentacji od wersji 6.6 opcja ta jest włączona domyślnie.

Równe kolumny wyglądają porządnie przy tabeli z dwiema lub trzema kolumnami o podobnej ilości treści. Jeżeli jednak pierwsza kolumna zawiera nazwy, a pozostałe krótkie liczby, równy podział marnuje miejsce: kolumna z nazwami jest za wąska, a kolumny z liczbami za szerokie. W takim układzie lepiej wyłączyć stałą szerokość i pozwolić przeglądarce rozłożyć miejsce według treści.

W panelu bocznym znajduje się też zakładka ze stylami. Dokumentacja wymienia dwa: domyślny, z obramowaniem komórek, oraz styl z naprzemiennie cieniowanymi wierszami, oznaczony w dokumentacji jako „Stripes”. Cieniowanie co drugiego wiersza ułatwia prowadzenie wzroku w dłuższych tabelach. Ostateczny wygląd zależy od motywu.

Pasek narzędzi pozwala również zmienić wyrównanie tekstu w kolumnie. Tekst najlepiej wyrównać do lewej, a liczby, które czytelnik ma porównywać, do prawej. Wyśrodkowanie wszystkiego utrudnia czytanie dłuższych kolumn.

Kto woli nie zajmować się tym samodzielnie, może zadzwonić pod numer 533 525 168 albo napisać na info@lukaszwudyka.pl, a ja przejmę sprawę: przejrzę tabele na stronie, zdecyduję, które zostawić, a które zamienić na inną formę, i ustawię je tak, aby były czytelne na telefonie.

Dlaczego tabela rozjeżdża się na telefonie?

Ekran telefonu w pionie jest kilka razy węższy niż monitor. Tabela, która na komputerze zajmuje wygodną szerokość, na telefonie ma do dyspozycji ułamek tego miejsca. Przeglądarka próbuje ją zmieścić na jeden z dwóch sposobów, a każdy z nich daje inny objaw.

Kolumny ściśnięte do kilku liter

Tak wygląda tabela ze stałą szerokością komórek i dużą liczbą kolumn. Przeglądarka dzieli szerokość ekranu po równo, więc przy sześciu kolumnach każda dostaje wąski pasek. Wyrazy łamią się w środku albo ustawiają jeden pod drugim, a wiersze robią się bardzo wysokie.

Tabela wychodzi poza ekran i przesuwa całą stronę

Tak dzieje się, gdy tabela nie może się zwęzić, bo zawiera długie wyrazy, adresy internetowe albo nagłówki bez spacji, a motyw nie przewidział dla niej przewijania. Cała strona staje się wtedy szersza niż ekran i daje się przesuwać na boki. To poważniejsza usterka, ponieważ psuje czytanie całego wpisu, a nie tylko tabeli.

Tabela przewija się w bok, ale nikt o tym nie wie

Wiele motywów pozwala przesuwać palcem samą tabelę. Jest to rozwiązanie poprawne, pod warunkiem że czytelnik widzi, iż dalej coś jest. Jeżeli ekran ucina tabelę dokładnie na granicy kolumny, wygląda ona na kompletną i ukryte kolumny pozostają nieprzeczytane.

Tabela jest obrazkiem

Zrzut ekranu z arkusza kalkulacyjnego wklejony jako zdjęcie zmniejsza się razem z ekranem, więc litery stają się zbyt małe, aby je przeczytać bez powiększania. Takiej tabeli nie odczyta też czytnik ekranu ani wyszukiwarka, o czym więcej w dalszej części.

Motyw lub wtyczka nadpisują wygląd tabel

Zdarza się, że ta sama tabela wygląda poprawnie w edytorze, a na opublikowanej stronie inaczej. Przyczyną są zwykle style motywu albo wtyczki do tabel, która działa równolegle z blokiem. Rozpoznaje się to po tym, że wszystkie tabele w serwisie zachowują się tak samo, niezależnie od ustawień pojedynczego bloku.

Jak sprawdzić tabelę na telefonie przed publikacją?

Podgląd w edytorze jest przydatny, ale nie zastępuje prawdziwego urządzenia. Sprawdzenie zajmuje kilka minut i najlepiej wykonać je przy każdej nowej tabeli.

1. W edytorze należy otworzyć podgląd wpisu i przełączyć go na widok telefonu. To pierwsze, zgrubne sito: widać, czy tabela w ogóle mieści się w szerokości.
2. Następnie trzeba zapisać wpis jako szkic i otworzyć jego podgląd na własnym telefonie, trzymanym w pionie.
3. Należy spróbować przesunąć palcem całą stronę w lewo i w prawo. Strona nie powinna się ruszać na boki. Jeśli się rusza, tabela jest szersza niż ekran i rozpycha układ.
4. Potem przesuwa się palcem samą tabelę. Jeśli się przewija, trzeba ocenić, czy widać, że dalej są kolejne kolumny.
5. Trzeba przeczytać nagłówki kolumn i dwa dowolne wiersze bez powiększania ekranu. Jeżeli wymaga to rozsuwania palcami, tekst jest za mały albo kolumny są za wąskie.
6. Na koniec warto obrócić telefon do poziomu i sprawdzić, czy tabela wygląda wtedy poprawnie. Nie można jednak zakładać, że czytelnik obróci telefon.

Osoby pracujące na komputerze mogą dodatkowo użyć trybu urządzenia mobilnego w narzędziach dla programistów przeglądarki Chrome, które otwiera klawisz F12. Tryb ten pozwala płynnie zwężać okno i zobaczyć, przy jakiej szerokości tabela zaczyna sprawiać kłopot. Ostatnie słowo powinien mieć jednak prawdziwy telefon.

Jak dopasować tabelę do wąskiego ekranu?

Nie ma jednego ustawienia, które naprawia każdą tabelę. Jest kilka sposobów, od najprostszych po bardziej techniczne. Radzę próbować ich w podanej kolejności, bo pierwsze trzy nie wymagają niczego poza edycją treści.

Mniej kolumn

Najskuteczniejsza poprawka to usunięcie kolumn, które nie służą porównaniu. Kolumna z numerem porządkowym, kolumna z uwagami wypełniona w dwóch wierszach na dziesięć, kolumna powtarzająca tę samą wartość w każdym wierszu. Uwagi można przenieść pod tabelę, a powtarzającą się wartość podać raz w zdaniu wprowadzającym.

Zamiana wierszy z kolumnami

Jeżeli porównywane są trzy pakiety pod dziesięcioma względami, pakiety powinny być kolumnami, a cechy wierszami. Odwrotny układ daje tabelę z jedenastoma kolumnami, której nie zmieści żaden telefon. Przestawienie wymaga przepisania tabeli, ale często rozwiązuje problem całkowicie.

Krótsze nagłówki i treści

Szerokość kolumny wyznacza zwykle najdłuższy wyraz, który się w niej znajduje. Nagłówek „Czas realizacji zamówienia” można zastąpić słowem „Termin”, a „Cena netto za miesiąc” słowem „Cena” z dopiskiem pod tabelą, że podane kwoty są kwotami netto za miesiąc. Długie adresy internetowe należy zastąpić linkiem z krótkim opisem.

Podział na dwie tabele

Szeroką tabelę często da się rozciąć na dwie węższe, każdą z własnym śródtytułem. Pierwsza pokazuje na przykład zakres prac, druga terminy i warunki. Pierwsza kolumna z nazwami powtarza się w obu, dzięki czemu każda tabela jest zrozumiała osobno.

Przewijanie tabeli w poziomie

Gdy tabeli nie da się zwęzić, bo każda kolumna jest potrzebna, uczciwym rozwiązaniem jest przewijanie samej tabeli w bok, przy nieruchomej reszcie strony. Wiele motywów WordPressa robi to samodzielnie. Jeśli motyw tego nie zapewnia, wystarczy krótki fragment stylów:

.wp-block-table { overflow-x: auto; }
.wp-block-table table { min-width: 600px; }

Pierwszy wiersz pozwala przewijać w bok element, w którym WordPress umieszcza tabelę. Drugi ustala najmniejszą szerokość tabeli, poniżej której kolumny przestają się ściskać, a zaczyna się przewijanie. Wartość 600 jest przykładem i należy ją dobrać do liczby kolumn. Fragment wkleja się w pole dodatkowych stylów CSS, które w zależności od motywu znajduje się w ustawieniach wyglądu witryny albo w zaawansowanych ustawieniach bloku.

Przewijanie ma sens tylko wtedy, gdy czytelnik je zauważy. Pomagają dwie rzeczy. Po pierwsze, szerokość tabeli warto dobrać tak, aby ostatnia widoczna kolumna była ucięta w połowie, a nie na granicy. Po drugie, nad tabelą można dodać krótkie zdanie: „Tabelę można przesuwać palcem w bok”.

Uprzedzam o jednym ryzyku. Zmiana stylów dotyczy wszystkich tabel w serwisie, więc po jej wprowadzeniu trzeba obejrzeć także starsze wpisy. Przed zmianami w stylach motywu rozsądnie jest też wykonać kopię zapasową strony.

Zamiana na listę lub osobne bloki

Jeżeli w tabeli są trzy lub cztery pozycje, a każda ma kilka cech, czytelniej bywa pokazać je jako osobne bloki: śródtytuł z nazwą pozycji i pod nim lista cech. Na telefonie każdy blok zajmuje pełną szerokość, a na komputerze można je ustawić obok siebie blokiem kolumn. Czytelnik traci możliwość porównania w jednym rzucie oka, ale zyskuje tekst, który da się przeczytać bez wysiłku.

Wtyczka do tabel

Przy bardzo dużych zestawieniach, z kilkudziesięcioma wierszami, sortowaniem i wyszukiwaniem, blok tabeli przestaje wystarczać i stosuje się wyspecjalizowaną wtyczkę. Każda dodatkowa wtyczka to jednak kolejne skrypty do wczytania. Jeśli strona już działa wolno, lepiej najpierw ustalić przyczynę, co opisałem w tekście o tym, co spowalnia WordPressa. Dla jednej tabeli z pięcioma wierszami wtyczka nie jest potrzebna.

Jak przygotować tabelę, którą rozumie wyszukiwarka i czytnik ekranu?

Osoba widząca rozpoznaje nagłówki tabeli po pogrubieniu i położeniu. Program odczytujący stronę na głos oraz robot wyszukiwarki opierają się na kodzie. Dlatego liczy się nie tylko wygląd tabeli, ale też jej budowa. Dobra wiadomość jest taka, że blok tabeli w WordPressie większość tej pracy wykonuje samodzielnie, o ile zostanie użyty zgodnie z przeznaczeniem.

Prawdziwa tabela zamiast obrazka

Tabela powinna być tekstem, a nie zdjęciem. Wytyczne Google dotyczące grafik zalecają, aby nie umieszczać ważnego tekstu wewnątrz obrazów, ponieważ nie wszyscy użytkownicy mają do niego dostęp. Tekst w obrazku nie powiększa się czytelnie, nie da się go skopiować ani przetłumaczyć narzędziem w przeglądarce. Jeżeli tabela istnieje dziś tylko jako zrzut ekranu, należy ją przepisać do bloku tabeli.

Wiersz nagłówka oznaczony jako nagłówek

Włączenie przełącznika „Sekcja nagłówka” sprawia, że nazwy kolumn trafiają do kodu jako komórki nagłówkowe, zapisywane znacznikiem <th>. Czytnik ekranu potrafi wtedy przy każdej wartości odczytać nazwę kolumny, do której ona należy. Samo pogrubienie tekstu w pierwszym wierszu tego nie daje, choć wygląda podobnie.

Osoby, które piszą kod tabeli ręcznie, mogą dodatkowo wskazać, czego dotyczy nagłówek, atrybutem scope. Zapis <th scope="col"> oznacza nagłówek kolumny, a <th scope="row"> nagłówek wiersza. Dokumentacja MDN podaje, że w większości tabel taki zapis wystarcza.

Podpis mówiący, co zawiera tabela

Podpis dodany przyciskiem na pasku narzędzi pozwala czytelnikowi zdecydować, czy tabela go dotyczy, zanim zacznie ją czytać. Jest to szczególnie ważne dla osób korzystających z czytnika ekranu, które bez podpisu musiałyby wysłuchać kolejnych komórek, aby zrozumieć, o czym jest zestawienie.

Bez scalania komórek i bez tabel w tabelach

Im prostsza siatka, tym lepiej. Blok tabeli w WordPressie nie zachęca do scalania komórek i uważam to za jego zaletę. Scalone komórki oraz tabele zagnieżdżone jedna w drugiej są trudne do odczytania przez programy i najgorzej znoszą wąski ekran.

Czego nie obiecuje sama tabela

Tabela nie jest sposobem na wyższą pozycję w Google. Wyszukiwarka nie nagradza formy, tylko treść, która odpowiada na zapytanie. Zdarza się, że Google pokazuje w wynikach fragment strony w postaci zestawienia, ale nie ma ustawienia, które to gwarantuje. Tabelę wstawia się dla czytelnika. Jeśli pomaga mu szybciej znaleźć odpowiedź, strona na tym zyskuje.

Po czym poznać, że tabela działa, i co zrobić, gdy nadal sprawia kłopot?

Dobrze przygotowana tabela spełnia na telefonie kilka warunków jednocześnie. Strona nie przesuwa się na boki. Nagłówki kolumn i treść komórek da się przeczytać bez powiększania. Wyrazy nie są łamane w środku. Jeżeli tabela się przewija, widać to od pierwszego spojrzenia. Osoba, która nie zna tematu, potrafi w kilkanaście sekund znaleźć w tabeli wskazaną wartość.

Ten ostatni sprawdzian polecam szczególnie. Wystarczy pokazać telefon komuś spoza firmy i poprosić o odczytanie jednej informacji, na przykład terminu dostawy do konkretnego miasta. Jeśli szuka długo albo podaje złą wartość, tabela wymaga poprawy, niezależnie od tego, jak wygląda.

Gdy mimo poprawek tabela nadal wygląda źle, przyczyny szuka się po kolei:

• jeśli opublikowana strona pokazuje starą wersję tabeli, należy wyczyścić pamięć podręczną strony i odświeżyć widok w telefonie,
• jeśli kolumny są nadal ściśnięte, trzeba sprawdzić przełącznik stałej szerokości komórek i wypróbować oba położenia,
• jeśli strona nadal przesuwa się na boki, należy poszukać w tabeli długiego wyrazu bez spacji, adresu internetowego albo szerokiego obrazka w komórce,
• jeśli wszystkie tabele w serwisie zachowują się tak samo, przyczyna leży w stylach motywu lub wtyczki, a nie w pojedynczej tabeli,
• jeśli tabela była wklejona z edytora tekstu lub arkusza, mogła przenieść własne ustawienia szerokości i wtedy najpewniej jest zbudować ją od nowa w bloku tabeli.

Ostatni punkt jest częstszy, niż się wydaje. Tabela skopiowana z dokumentu tekstowego zabiera ze sobą sztywne szerokości kolumn podane w jednostkach, które nie pasują do ekranu telefonu. Ręczne przepisanie kilku wierszy trwa krócej niż szukanie, które ustawienie przeszkadza.

Po większych zmianach warto zajrzeć do Google Search Console, do raportu podstawowych wskaźników internetowych, i obserwować wyniki dla urządzeń mobilnych. Sposób odczytywania tego raportu opisałem w tekście o tym, jak czytać wyniki Core Web Vitals. Dane zbierają się tam z opóźnieniem, więc nie należy oczekiwać zmiany następnego dnia.

Jakich błędów unikać przy tabelach?

Poniższe błędy powtarzają się na stronach firmowych najczęściej. Każdy z nich da się usunąć bez pomocy programisty.

• Cała oferta zamknięta w jednej dużej tabeli, bez ani jednego zdania objaśnienia. Tabela uzupełnia tekst, ale go nie zastępuje.
• Tabela zapisana jako obrazek albo plik do pobrania, podczas gdy te same dane mogłyby być zwykłym tekstem na stronie.
• Nagłówki kolumn udawane pogrubieniem, bez włączonej sekcji nagłówka.
• Zmniejszanie czcionki po to, aby zmieścić więcej kolumn. Na telefonie daje to tekst, którego nie da się przeczytać.
• Kolor jako jedyny nośnik informacji, na przykład zielone i czerwone komórki bez słów. Część osób nie rozróżnia tych barw, a czytnik ekranu ich nie odczyta.
• Tabela użyta do ustawienia zdjęć i tekstu obok siebie zamiast bloku kolumn.
• Sprawdzenie tabeli wyłącznie na dużym monitorze, na którym powstawała.

Osobną sprawą jest aktualność danych. Tabela z terminami, zakresem albo warunkami jest czytana uważniej niż zwykły akapit i klienci powołują się na nią w rozmowie. Nieaktualna wartość w tabeli szkodzi bardziej niż nieaktualne zdanie w tekście, dlatego przy każdej zmianie oferty tabele należy przejrzeć w pierwszej kolejności.

Najczęstsze pytania

Ile kolumn może mieć tabela, aby była czytelna na telefonie?

Nie istnieje oficjalny limit. Z praktyki wynika, że na ekranie telefonu trzymanego w pionie dobrze czytają się dwie kolumny, a przy krótkich wartościach, takich jak liczby lub pojedyncze słowa, trzy lub cztery. Przy większej liczbie kolumn należy tabelę podzielić, przestawić wiersze z kolumnami albo zastosować przewijanie w poziomie.

Czy tabela pomaga w pozycjonowaniu strony?

Sama obecność tabeli nie podnosi pozycji. Pomaga pośrednio: porządkuje dane, dzięki czemu czytelnik szybciej znajduje odpowiedź, a wyszukiwarka łatwiej odczytuje, które wartości należą do których nagłówków. Warunkiem jest tabela zapisana jako tekst, z prawdziwym wierszem nagłówka, a nie obrazek.

Czy przewijanie tabeli w bok jest błędem?

Nie, o ile przewija się sama tabela, a nie cała strona, i o ile czytelnik widzi, że tabela ma dalszy ciąg. Błędem jest sytuacja, w której szeroka tabela rozpycha układ i cały wpis przesuwa się na boki, albo taka, w której ukryte kolumny pozostają niezauważone.

Czy do tabel w WordPressie potrzebna jest wtyczka?

W większości przypadków nie. Wbudowany blok tabeli obsługuje wiersz nagłówka, stopkę, podpis, wyrównanie kolumn i dwa style. Wtyczka staje się uzasadniona przy dużych zestawieniach, które wymagają sortowania, wyszukiwania lub podziału na strony.

Jak przenieść tabelę z arkusza kalkulacyjnego na stronę?

Najpewniejszy sposób to utworzenie pustego bloku tabeli o właściwej liczbie wierszy i kolumn i przepisanie albo wklejenie wartości komórka po komórce. Wklejenie całej tabeli z arkusza bywa szybsze, ale może przenieść sztywne szerokości i formatowanie, które psują widok na telefonie. Po wklejeniu trzeba więc zawsze obejrzeć wynik na wąskim ekranie.

Do czego służy sekcja stopki w tabeli?

Stopka to dodatkowy wiersz na dole tabeli, przeznaczony na podsumowanie, na przykład sumę albo wiersz „razem”. W krótkich tabelach porównawczych zwykle nie jest potrzebna. Nie należy wpisywać w nią uwag i zastrzeżeń, bo te czytelniej wyglądają jako zwykły akapit pod tabelą.

Czy w komórkach tabeli można umieszczać linki i zdjęcia?

Linki tak, pod warunkiem że mają krótki opis zamiast pełnego adresu, który poszerza kolumnę. Zdjęcia w komórkach odradzam, ponieważ wymuszają minimalną szerokość kolumny i na telefonie najczęściej są przyczyną wychodzenia tabeli poza ekran. Jeśli zdjęcia są niezbędne, lepszy będzie układ osobnych bloków.

Brak czasu albo ochoty, żeby zająć się tym samodzielnie?

To zrozumiałe, bo porządkowanie tabel jest pracą żmudną, zwłaszcza gdy na stronie zebrało się ich kilkanaście. Mogę zająć się tym od początku do końca: przejrzę wszystkie tabele w serwisie na telefonie, wskażę, które naprawdę pomagają czytelnikowi, a które lepiej zamienić na listę lub osobne bloki, uproszczę ich układ, ustawię nagłówki i podpisy oraz sprawdzę, czy po zmianach żadna strona nie przesuwa się na boki.

Wystarczy zadzwonić pod numer 533 525 168 albo napisać na adres info@lukaszwudyka.pl i podać adres strony. Odpowiem, co widzę i od czego warto zacząć.