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

Poprawna tabela zaczyna się od semantyki, nie od obramowania

• tworzy tabelę, a definiuje jej wiersz.

  Komórki danych zapisuje się jako

  , i porządkują strukturę większych zestawień.

  Wygląd tabeli najlepiej ustawiać w CSS, nie przestarzałymi atrybutami HTML.

  Na małych ekranach pomaga poziome przewijanie zamiast ściskania kolumn do nieczytelnych rozmiarów.

  Z jakich znaczników składa się tabela HTML

  Najprostsza odpowiedź na pytanie, jak zrobić tabelę w HTML, brzmi: trzeba połączyć tabelę, wiersze i komórki. Element

  , a nagłówki jako	.

  wyznacza całą strukturę, oznacza wiersz, krótko mówi, czego dotyczy zestawienie. Atrybut scope="col" wskazuje nagłówki kolumn, natomiast scope="row" opisuje nagłówki wierszy. Przy prostej tabeli nie zawsze zauważysz różnicę, ale przy danych odczytywanych przez technologie asystujące ma ona duże znaczenie.

  Moja praktyczna zasada jest prosta: jeśli pierwszy wiersz opisuje kolejne kolumny, używam

  zwykłą komórkę, a

  komórkę nagłówkową. Produkt Cena Klawiatura 199 zł Ten kod wyświetli tabelę z dwiema kolumnami i dwoma wierszami. Nie zobaczysz jednak wyraźnego obramowania, ponieważ HTML odpowiada przede wszystkim za strukturę, a nie za prezentację. To dobre rozdzielenie ról: treść pozostaje uporządkowana, natomiast wygląd można później zmienić jednym arkuszem CSS. , oraz . Dzięki nim kod łatwiej czytać, rozwijać i później stylować. Znacznik Zastosowanie Otwiera i zamyka całą tabelę Tworzy pojedynczy wiersz Definiuje nagłówek kolumny lub wiersza Zawiera zwykłą komórkę z danymi Dodaje opis lub tytuł tabeli Najczęstszy błąd początkujących polega na używaniu samych znaczników . Tabela może wtedy wyglądać poprawnie, ale czytnik ekranu nie dostaje jasnej informacji, która komórka opisuje daną kolumnę. Dlatego nagłówki zapisuję jako , nawet jeśli wizualnie można by je wyróżnić samym CSS-em. Jak zbudować tabelę krok po kroku Przy większym zestawieniu warto od razu zastosować semantyczny podział na nagłówek, treść i stopkę. Do tego służą elementy Porównanie planów hostingowych Plan Przestrzeń Cena miesięczna Start 10 GB 19 zł Pro 50 GB 49 zł Ceny zawierają podatek VAT Element

  . Jeśli pierwsza komórka każdego wiersza określa jego kategorię, stosuję

  . Taki zapis ogranicza późniejsze poprawki, gdy tabela zaczyna się rozrastać. Dlaczego kolejność komórek ma znaczenie Każdy wiersz powinien mieć logiczną liczbę komórek. Jeżeli nagłówek ma trzy kolumny, zwykłe wiersze również powinny dostarczać dane dla tych trzech kolumn. Brak jednej komórki może przesunąć zawartość i sprawić, że cena trafi pod niewłaściwy nagłówek. Przed publikacją sprawdzam tabelę wzrokiem, ale także testuję ją z wyłączonym CSS-em. Jeśli dane nadal mają sens, struktura HTML prawdopodobnie jest poprawna. To szybki test, który często wykrywa błędy niewidoczne w gotowym projekcie. Jak nadać tabeli czytelny wygląd za pomocą CSS Sama struktura jest dopiero początkiem. W praktyce użytkownik potrzebuje wyraźnych granic, odpowiednich odstępów i czytelnego kontrastu. Zamiast dodawać do HTML atrybut border, lepiej przygotować kilka prostych reguł CSS. table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 1rem; } caption { margin-bottom: 0.75rem; font-weight: 700; text-align: left; } th, td { padding: 0.75rem 1rem; border: 1px solid #d9dee7; text-align: left; } thead th { background: #172033; color: #ffffff; } tbody tr:nth-child(even) { background: #f5f7fa; } Właściwość border-collapse: collapse łączy sąsiadujące obramowania w jedną linię, dzięki czemu tabela nie wygląda jak siatka z podwójnymi kreskami. Z kolei padding daje tekstowi oddech. To drobiazg, który często poprawia odbiór bardziej niż dekoracyjny kolor tła. Do wyrównywania liczb używam zwykle prawej krawędzi, szczególnie gdy kolumna zawiera ceny, procenty lub wartości techniczne. Tekst opisowy lepiej zostawić wyrównany do lewej. Przy dużych tabelach można też dodać efekt naprzemiennych wierszy, ale powinien on wspierać skanowanie danych, a nie dominować nad treścią. Jak przygotować tabelę na telefon i mniejszy ekran Szeroka tabela często wygląda dobrze na monitorze, a na smartfonie staje się nieczytelna. Zmuszanie wszystkich kolumn do bardzo małej szerokości zwykle kończy się łamaniem słów i wieloma wierszami tekstu. Najbezpieczniejszym rozwiązaniem jest opakowanie tabeli w kontener z poziomym przewijaniem. ... .table-wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrapper table { min-width: 620px; } Na komputerze tabela zajmie dostępną szerokość, a na telefonie użytkownik przesunie ją palcem w bok. Poziome przewijanie jest lepsze niż utrata danych, zwłaszcza w tabelach cenowych, porównawczych i raportowych. Przeczytaj również: VBA co to? Poznaj język automatyzacji Excela i Office Kiedy lepiej zmienić tabelę w karty Nie każda tabela powinna być przewijana. Jeśli masz tylko trzy lub cztery rekordy, na urządzeniu mobilnym można przeformatować je w karty CSS. Taki zabieg wymaga jednak dodatkowego kodu i ostrożnego testowania, dlatego przy dużej liczbie wierszy przewijany układ jest zwykle prostszy i bardziej przewidywalny. Nie ukrywałbym kolumn wyłącznie po to, żeby projekt wyglądał schludniej. Jeżeli informacja jest ważna na komputerze, jej brak na telefonie może wprowadzać użytkownika w błąd. Najpierw ustalam, które dane są naprawdę kluczowe, a dopiero później decyduję o responsywnym układzie. Łączenie komórek za pomocą colspan i rowspan Czasem jedna informacja ma obejmować kilka kolumn albo kilka wierszy. W takich sytuacjach używa się colspan do łączenia komórek w poziomie oraz rowspan do łączenia ich w pionie. Dane kontaktowe Imię i nazwisko Anna Kowalska Wartość colspan="2" sprawia, że nagłówek zajmuje miejsce dwóch kolumn. Przy rowspan sytuacja działa analogicznie, tylko komórka rozciąga się na kilka wierszy. Laptop 16 GB RAM 512 GB SSD Łączenie komórek jest przydatne w zestawieniach wielopoziomowych, ale łatwo przesadzić. Im więcej wyjątków, tym trudniej sprawdzić, czy każda wartość znajduje się pod właściwym nagłówkiem. Gdy tabela zaczyna przypominać diagram, rozważam podzielenie jej na dwa prostsze zestawienia. Dostępność i błędy, których lepiej uniknąć Tabela nie służy do układania całej strony. Dawniej wykorzystywano ją do rozmieszczania kolumn, obrazów i menu, ale współczesny CSS oferuje do tego lepsze narzędzia, takie jak Flexbox i CSS Grid. Znacznik zostawiam więc dla danych, które rzeczywiście mają relacje wierszy i kolumn. Nie zastępuj i logiczna kolejność. Przy bardziej złożonych zestawieniach mogą być potrzebne dodatkowe powiązania między nagłówkami a komórkami, ale nie warto komplikować kodu na zapas. Prosta semantyka jest zwykle bardziej odporna na zmiany i łatwiejsza w utrzymaniu. Dobrym testem jest próba odpowiedzi na trzy pytania: czego dotyczy tabela, co oznacza każda kolumna i czy da się odczytać dane bez patrzenia na kolory. Jeśli na którekolwiek pytanie trudno odpowiedzieć, problem najczęściej leży w strukturze HTML, a nie w stylach. Mały zestaw zasad, który wystarczy w większości projektów Do codziennej pracy nie potrzebuję rozbudowanego frameworka. Zaczynam od zwykłym tylko dlatego, że chcesz samodzielnie ustawić wygląd nagłówka. Nie wpisuj tekstu nagłówka w pustą komórkę bez wyjaśnienia, czego dotyczy kolumna. Nie używaj wielu pustych komórek do tworzenia odstępów. Nie ustawiaj stałej szerokości w pikselach bez sprawdzenia tabeli na mniejszym ekranie. Nie mieszaj danych z prezentacją, jeśli tę samą regułę można zapisać w CSS. Przy prostych tabelach wystarczą poprawne nagłówki, , dodaję , dzielę zawartość na i , a później dopracowuję wygląd w CSS. Przy tabelach finansowych lub technicznych dokładam odpowiednie scope i sprawdzam zachowanie na telefonie. Najważniejsza decyzja zapada jeszcze przed napisaniem pierwszego znacznika. Jeżeli dane da się porównać w wierszach i kolumnach, tabela będzie dobrym wyborem. Jeżeli chodzi tylko o rozmieszczenie elementów na stronie, lepiej użyć semantycznych bloków oraz CSS Grid lub Flexbox. Właśnie takie podejście daje najlepszy efekt: czytelna struktura, rozsądne style i świadome użycie tabeli. Dzięki temu zestawienie działa nie tylko w przeglądarce na dużym ekranie, ale także na telefonie i z technologiami wspomagającymi.