tabela z produktami

Tabela z produktami to sekcja wiadomości prezentująca ofertę w uporządkowanym, tabelarycznym układzie.

Układ danych w tabeli z produktami

Tabela z produktami jest elementem strony internetowej, który przedstawia wiele ofert w uporządkowanych wierszach i kolumnach. Każdy wiersz może odpowiadać jednemu produktowi, a kolumny mogą zawierać jego nazwę, opis, cenę, dostępność, numer katalogowy oraz odnośnik do szczegółów. Taki układ sprawdza się wtedy, gdy odbiorca powinien szybko porównać te same właściwości kilku pozycji bez przechodzenia między osobnymi podstronami.

W kodzie HTML strukturę tabeli tworzą między innymi znaczniki <table>, <thead>, <tbody>, <tr>, <th> i <td>. Nagłówki kolumn powinny znajdować się w komórkach <th>, ponieważ przeglądarka oraz technologie asystujące mogą wtedy rozpoznać relację między opisem kolumny a wartościami w poszczególnych wierszach. Atrybut scope="col" wskazuje, że komórka nagłówkowa opisuje kolumnę, natomiast scope="row" służy do oznaczenia nagłówka dotyczącego konkretnego wiersza.

Informacje techniczne prezentowane przy ofercie

Zakres kolumn powinien wynikać z właściwości produktów, które rzeczywiście mają znaczenie dla porównania. W sklepie z podzespołami mogą to być na przykład model, producent, pojemność, interfejs, format, cena brutto i status dostępności. Przy akcesoriach komputerowych przydatne bywają typ złącza, długość przewodu, zgodność z systemem oraz informacja o sposobie zasilania. Nie należy umieszczać w tabeli parametrów, których wartości nie są zweryfikowane albo które dotyczą innej wersji produktu.

Cena powinna być powiązana z jednoznaczną walutą, na przykład PLN, a status dostępności powinien mieć ustalone znaczenie. „Dostępny” może oznaczać możliwość zamówienia, lecz niekoniecznie natychmiastową wysyłkę, dlatego opis powinien być zgodny z rzeczywistym mechanizmem magazynowym. Jeżeli dane są pobierane automatycznie z bazy, aplikacja powinna poprawnie obsługiwać brak wartości, zmianę ceny i usunięcie produktu. Wstawienie pustej komórki bez wyjaśnienia może utrudnić interpretację tabeli, szczególnie gdy użytkownik porównuje kilka podobnych pozycji.

Responsywność i dostępność tabeli

Tabela zawierająca wiele kolumn może przekraczać szerokość ekranu telefonu. Typowym rozwiązaniem jest umieszczenie elementu <table> w kontenerze z przewijaniem poziomym, na przykład z właściwością CSS overflow-x: auto. Samo zmniejszenie rozmiaru tekstu nie rozwiązuje problemu, ponieważ długie nazwy i wartości techniczne mogą stać się nieczytelne. Na małych ekranach można również zmienić sposób prezentacji danych, ale nie wolno przy tym gubić relacji między nazwą produktu a jego parametrami.

Dostępność zależy także od kontrastu, kolejności fokusu i zrozumiałych etykiet. Nagłówki kolumn nie powinny być zastępowane wyłącznie ikonami, a linki i przyciski muszą mieć opis wskazujący działanie, na przykład „Zobacz szczegóły dysku SSD”. Kolor nie może być jedynym nośnikiem informacji o dostępności, ponieważ część użytkowników nie rozróżnia wszystkich barw. Dla długich tabel warto rozważyć wyróżnienie nagłówka podczas przewijania oraz zapewnić logiczną kolejność odczytu przez klawiaturę i czytnik ekranu.

Kontrola tabeli z produktami w serwisie komputerowym

Podczas sprawdzania strony należy zweryfikować, czy każdy produkt ma kompletną nazwę, prawidłową cenę, działający odnośnik i aktualny status. Warto przetestować sortowanie, filtrowanie oraz paginację, jeżeli tabela korzysta z JavaScriptu. Błąd w sortowaniu wartości liczbowych może ustawić ceny jako tekst, przez co pozycja „100” znajdzie się przed „20”. Podobnie sortowanie pojemności wymaga rozpoznania jednostek, ponieważ 1 TB i 512 GB nie powinny być porównywane wyłącznie jako ciągi znaków.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i podzespołów, dlatego przy problemach z wyświetlaniem tabeli można sprawdzić działanie przeglądarki, połączenie z serwisem internetowym, błędy skryptów oraz aktualność sterowników grafiki. Diagnostyka powinna obejmować różne rozdzielczości ekranu, urządzenia wejściowe i przeglądarki, aby odróżnić błąd samej strony od problemu lokalnego komputera. Przydatne są narzędzia deweloperskie przeglądarki, w szczególności konsola JavaScript, inspektor HTML i podgląd reguł CSS.