Jak zrobić tabelę HTML, która działa także na telefonie?

Od prostego wiersza do tabeli gotowej na urządzenia mobilne

• Znacznik
  tworzy tabelę, a , , i porządkują strukturę i ułatwiają jej interpretację.

  poprawiają dostępność dla czytników ekranu.

  CSS odpowiada za obramowanie, odstępy, kolory i zachowanie tabeli na małych ekranach.

  Tabele służą do danych, a nie do budowania układu całej strony.

  

  Jak zrobić tabelę w HTML z podstawowych znaczników

  Najprostsza tabela składa się z kontenera

  i atrybut scope

  i	budują jej wiersze oraz komórki.

  , wierszy oznaczanych przez oraz komórek. Zwykłe dane umieszczamy w i . Dzięki temu kod pozostaje czytelny, a późniejsze stylowanie lub modyfikowanie danych jest znacznie prostsze.

  , natomiast nagłówki kolumn lub wierszy w	. Taki podział ma znaczenie nie tylko wizualne, ale również semantyczne, czyli opisuje przeglądarce, czym jest konkretny fragment treści. Produkt Cena Klawiatura 199 zł Ten kod utworzy tabelę z dwiema kolumnami i dwoma wierszami. W praktyce od razu używam jednak pełniejszej struktury z sekcjami

  Produkt	Cena	Dostępność
  Klawiatura	199 zł	Tak
  Mysz	89 zł	Tak

  Każdy wiersz powinien mieć logicznie zgodną liczbę komórek. Jeżeli nagłówek ma trzy komórki, dane również powinny mieć trzy komórki, chyba że świadomie korzystasz z łączenia kolumn lub wierszy.

  Jak uporządkować tabelę, żeby była czytelna

  Sama tabela może działać bez dodatkowego opisu, ale użytkownik nie zawsze od razu wie, czego dotyczą liczby lub nazwy. Do tego służy , czyli widoczny tytuł tabeli. Umieszczam go bezpośrednio po znaczniku

  , zanim pojawi się nagłówek kolumn.

  Cennik hostingu dla małych stron

  Pakiet	Cena miesięczna	Powierzchnia
  Start	15 zł	10 GB
  Pro	35 zł	50 GB

  Atrybut scope="col" mówi, że nagłówek opisuje kolumnę, a scope="row" wskazuje nagłówek konkretnego wiersza. W małej tabeli różnica może być niewidoczna, lecz dla technologii asystujących jest ważną informacją o relacji między komórkami.

  W większych zestawieniach możesz dodać także stopkę tabeli za pomocą . Sprawdza się przy sumach, podaniu źródła danych albo krótkiej informacji końcowej.

  
    
      Razem
      50 zł
      60 GB
    
  

  Nie każda komórka w pierwszej kolumnie jest automatycznie nagłówkiem. Jeśli zawiera zwykłą wartość, użyj . Jeżeli identyfikuje cały wiersz, jak nazwa pakietu lub miesiąca, lepszym wyborem będzie .

  Jak połączyć komórki za pomocą colspan i rowspan

  Czasami jedna informacja powinna zajmować miejsce kilku kolumn albo wierszy. Atrybut colspan łączy komórki poziomo, natomiast rowspan robi to pionowo. To przydatne w harmonogramach, raportach i tabelach z grupami produktów, ale używam tych atrybutów oszczędnie, bo zbyt skomplikowana siatka szybko traci czytelność.

  Łączenie kolumn

  
    
  
      
  
        
  Wyniki sprzedaży
      
      
  
        
  Produkt
        
  Styczeń
        
  Luty
      
    
    
  
      
  
        
  Monitor
        
  12
        
  18
      
    
  

  Wartość colspan="3" oznacza, że komórka zajmuje szerokość trzech kolumn. Jeśli pomylisz liczbę, układ tabeli może się rozjechać, dlatego po każdej zmianie sprawdzam zarówno kod, jak i widok w przeglądarce.

  Przeczytaj również: Jak stworzyć szablon Allegro HTML? Ograniczenia i skuteczne tricki

  Łączenie wierszy

  
    
  
      
  Dzień
      
  Godzina
      
  Zajęcia
    
    
  
      
  Poniedziałek
      
  9:00
      
  HTML
    
    
  
      
  11:00
      
  CSS
    
  

  Atrybut rowspan="2" sprawia, że komórka „Poniedziałek” obejmuje dwa wiersze. W drugim wierszu nie dodajesz już kolejnego dla dnia, ponieważ jego miejsce zostało zajęte przez połączoną komórkę.

  Jak ostylować tabelę za pomocą CSS

  HTML opisuje zawartość, a CSS odpowiada za wygląd. Domyślna tabela przeglądarki jest funkcjonalna, ale zwykle brakuje jej obramowania, odstępów i wyraźnego rozróżnienia nagłówka. Najprostszy zestaw stylów może wyglądać tak:

  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th,
  td {
    border: 1px solid #d9d9d9;
    padding: 12px;
    text-align: left;
  }
  
  thead {
    background-color: #f2f4f7;
  }
  
  tbody tr:nth-child(even) {
    background-color: #fafafa;
  }

  Właściwość border-collapse: collapse scala sąsiadujące obramowania, dzięki czemu tabela nie wygląda jak siatka z podwójnymi liniami. Padding tworzy wewnętrzny odstęp w komórkach, a naprzemienne tło wierszy pomaga śledzić dane w szerokich zestawieniach.

  Do wyrównywania liczb często stosuję text-align: right, zwłaszcza w kolumnach z cenami lub procentami. Nagłówki pozostawiam wyrównane do lewej, bo wtedy łatwiej skanować nazwy produktów i kategorii.

  .cena,
  .procent {
    text-align: right;
    white-space: nowrap;
  }

  Unikaj stylowania tabel wyłącznie za pomocą atrybutów takich jak border, width czy align zapisanych w HTML. Takie rozwiązanie bywa spotykane w starych materiałach, ale CSS daje większą kontrolę i pozwala zmieniać wygląd całego serwisu bez poprawiania każdej tabeli osobno.

  Jak przygotować tabelę na telefon

  Szeroka tabela może wyglądać poprawnie na monitorze, a na telefonie wypychać całą stronę poza ekran. Najprostsze rozwiązanie polega na opakowaniu jej w dodatkowy element z przewijaniem poziomym.

  
    
  
      
  Porównanie planów abonamentowych
      
  
        
  
          
  Plan
          
  Cena
          
  Użytkownicy
          
  Przestrzeń
          
  Wsparcie
        
      
      
  
        
  
          
  Basic
          
  19 zł
          
  1
          
  20 GB
          
  E-mail
        
      
    
  

  .table-wrapper {
    overflow-x: auto;
    max-width: 100%;
  }
  
  .table-wrapper table {
    min-width: 600px;
  }

  Przewijanie jest uczciwym rozwiązaniem, gdy tabela zawiera dużo kolumn i nie da się jej sensownie skrócić. Zanim je zastosuję, sprawdzam jednak, czy nie można usunąć powtarzających się informacji albo podzielić jednego dużego zestawienia na dwie prostsze tabele.

  Przy niewielkiej liczbie kolumn można użyć układu responsywnego, który na telefonie zmieni wiersze w karty. To wymaga większej liczby reguł CSS i starannego oznaczenia danych, więc do zwykłego cennika przewijany kontener jest zazwyczaj szybszy, stabilniejszy i łatwiejszy w utrzymaniu.

  Najczęstsze błędy przy tworzeniu tabel HTML

  Najwięcej problemów nie wynika ze składni, lecz z niewłaściwego zastosowania tabeli. Poniższe błędy często pojawiają się w pierwszych projektach i potrafią później utrudnić zarówno stylowanie, jak i korzystanie ze strony.

  • Budowanie układu strony za pomocą tabel. Tabela powinna prezentować dane zależne od siebie, a nie ustawiać logo, menu i kolumn serwisu. Do układu służą CSS Grid i Flexbox.
  • Brak nagłówków. Zastępowanie wszystkich komórek przez odbiera tabeli część znaczenia i utrudnia interpretację danych.
  • Brak tytułu tabeli. Przy kilku tabelach na jednej stronie użytkownik może nie wiedzieć, czego dotyczy konkretne zestawienie. rozwiązuje ten problem.
  • Niespójna liczba komórek. Każdy wiersz powinien pasować do liczby kolumn, z uwzględnieniem wartości colspan i rowspan.
  • Wstawianie pustych komórek dla odstępu. Do odległości używaj CSS, a nie pustych zawierających spacje lub znaki nbsp.
  • Brak wersji mobilnej. Tabela z ośmioma kolumnami bez przewijania lub alternatywnego układu będzie trudna do obsługi na ekranie telefonu.

  Osobny problem stanowi nadmiar łączenia komórek. Efekt może wyglądać efektownie w raporcie, ale czytnik ekranu musi wtedy odtworzyć bardziej złożone zależności. Gdy tabela zaczyna przypominać układankę, zwykle lepiej uprościć strukturę niż dodawać kolejne rowspan.

  Praktyczna kolejność pracy nad tabelą

  Najsprawniej buduję tabelę w kilku krótkich etapach. Najpierw określam, jakie dane mają być porównywane i czy rzeczywiście tworzą relacje wierszy oraz kolumn. Jeżeli odpowiedź brzmi tak, przechodzę do struktury HTML, a wygląd zostawiam na później.

  1. Zapisz dane w zwykłej liście. Ustal, co jest nagłówkiem, co wartością, a co podsumowaniem.
  2. Zbuduj szkielet. Dodaj
     , , i ewentualnie .

     Oznacz relacje. Użyj

     ,

     dla nagłówków oraz scope dla nagłówków kolumn i wierszy. Wstaw dane. Zwykłe wartości umieść w

     , pilnując liczby komórek w każdym wierszu. Dodaj CSS. Ustaw szerokość, obramowanie, odstępy, wyrównanie i wyróżnienie nagłówka. Sprawdź telefon i klawiaturę. Tabela powinna dać się przewijać oraz odczytać bez polegania wyłącznie na kolorze. Takie podejście ogranicza poprawki. Z mojego doświadczenia wynika, że największą oszczędność czasu daje zaplanowanie nagłówków przed napisaniem kodu, ponieważ późniejsza zmiana struktury tabeli jest bardziej kłopotliwa niż zmiana jej kolorów. Mała tabela może być pełnoprawnym elementem interfejsu Dobrze przygotowana tabela HTML nie wymaga skomplikowanych narzędzi. Wystarczy poprawna hierarchia znaczników, jasne nagłówki, krótki opis i kilka reguł CSS. Najpierw zadbaj o sens danych, później o wygląd, a na końcu sprawdź zachowanie na małym ekranie. Jeżeli zestawienie jest bardzo szerokie, rozważ przewijanie poziome, podział informacji albo osobny widok mobilny. Tabela nie musi mieścić wszystkiego za wszelką cenę. Ma przede wszystkim pomóc szybko zrozumieć dane, a nie imponować liczbą kolumn.