Generator tabeli HTML

Generator tabeli HTML

Generator tabeli HTML zamienia nazwy kolumn i wiersze danych w gotowy kod z elementami table, caption, thead i tbody. Wynik widzisz od razu w podglądzie i kopiujesz jednym przyciskiem: z CSS w bloku <style>, ze stylami inline albo jako czysty HTML.

Nazwy kolumn wpisujesz w jednym polu, oddzielone przecinkiem. Wiersze danych trafiają do drugiego pola: jedna linia to jeden wiersz, a wartości rozdzielasz średnikiem, kreską pionową lub tabulatorem. Tabela przelicza się przy każdej zmianie w formularzu.

Opcje tabeli

Przyciski nad formularzem ustawiają gotowy wygląd: „Zebra + siatka” włącza oba efekty, „Minimalistyczna” zostawia samą zebrę, a „Siatka” same ramki.

Dostępność

Nagłówki kolumn powinny być komórkami th, a tabela powinna mieć caption z krótkim opisem. Generator dodaje do każdego nagłówka atrybut scope="col", a tekst z pola „Podpis tabeli” wstawia jako pierwszy element tabeli. Czytnik ekranu odczytuje wtedy nazwę kolumny przy każdej komórce, więc wartość „29” zostaje powiązana z kolumną „Wiek”.

Jak działa generator tabeli HTML

Generator przetwarza tekst z pola „Wiersze” na strukturę tabeli. Najpierw dzieli całość na wiersze po znakach nowej linii, a puste linie pomija. Każdy taki wiersz staje się elementem tr. Następnie dzieli pojedynczy wiersz na komórki po separatorze: średniku, kresce pionowej lub tabulatorze. Z tych fragmentów powstają komórki td. Nazwy z pola „Kolumny” trafiają do komórek th w sekcji thead, o ile wiersz nagłówka jest włączony. Każda komórka jest traktowana jako zwykły tekst: znaki <, >, & i cudzysłowy zamieniane są na encje, więc kod HTML wpisany do komórki wyświetli się jako tekst, a nie zostanie wykonany.

Liczbę kolumn wyznacza pole „Kolumny”, a nie pierwszy wiersz danych. Gdy wiersz ma mniej wartości, generator dopełnia go pustymi komórkami; gdy ma więcej, nadmiar pomija. W obu przypadkach nad podglądem pojawia się uwaga z liczbą takich wierszy, więc przesunięte dane łatwo wyłapać przed kopiowaniem.

Kafelki nad podglądem liczą tylko dane. Przy N kolumnach i M wierszach danych pokazują M wierszy i N × M komórek, bez wiersza nagłówka. Ostatni kafelek podaje rozmiar kodu w bajtach; polska litera zajmuje w UTF-8 2 bajty.

Na końcu narzędzie składa kod w wybranym stylu. W trybie bloku <style> reguły mają selektor z klasą tabeli, np. .tabela-dane tbody tr:nth-child(even), więc nie zmieniają innych tabel na stronie. W trybie inline każda komórka dostaje własny atrybut style, co jest potrzebne w szablonach e-mail i edytorach usuwających <style>. Tryb bez stylów zwraca czysty HTML: zebra, ramka, wyrównanie, odstęp i czcionka są wtedy pomijane, zostaje tylko kontener responsywny, jeśli go włączysz. Podgląd pokazuje ten sam wynik, który trafi do schowka.

Przykład krok po kroku

1. W polu „Kolumny” wpisz: Imię, Wiek, Miasto. To trzy kolumny.
2. W polu „Wiersze” wpisz dwie linie: Anna; 29; Warszawa oraz Ewa; 31; Poznań. Każda linia ma dwa średniki, czyli trzy wartości.
3. Zostaw włączony wiersz nagłówka. Generator utworzy w thead trzy komórki th: Imię, Wiek, Miasto. Obie linie danych trafią do tbody jako 6 komórek td.
4. Kliknij „Zebra + siatka”. Drugi wiersz danych (Ewa) dostanie szare tło, a wszystkie komórki ramkę.
5. Zaznacz „Kolumny z samymi liczbami do prawej”. Kolumna Wiek zawiera wyłącznie liczby (29 i 31), więc jej komórki w trybie bloku dostaną klasę num i wyrównanie do prawej. Imię i Miasto zostaną przy lewej krawędzi.
6. Sprawdź kafelki: Wierszy 2, Kolumn 3, Komórek 6. Nagłówek nie jest liczony, choć w kodzie tabela ma 3 elementy tr.
7. Zostaw włączoną opcję „Responsywna”, jeśli tabela ma działać na telefonie, i kliknij „Kopiuj kod”.

Struktura kodu generowanego przez narzędzie

Praktyczne wskazówki

• Trzymaj stałą liczbę kolumn — każdy wiersz powinien mieć tyle samo wartości, ile jest nazw w polu „Kolumny”. Brakujące komórki zostaną puste, a nadmiar zniknie, ale kolejne wartości mogą trafić w niewłaściwe miejsca. Sprawdź uwagi nad podglądem.
• Średnik i kreska pionowa zawsze rozdzielają komórki, więc nie wpisuj ich w treści. Przecinek w polu „Wiersze” jest bezpieczny (np. 1 234,50), natomiast w polu „Kolumny” oddziela nazwy.
• Dane z Excela lub Arkuszy Google wklejaj bez przeróbek: skopiowane komórki są rozdzielone tabulatorami, które generator rozpoznaje. Pierwszy wiersz arkusza wklej do pola „Kolumny”, resztę do pola „Wiersze”.
• Krótkie nazwy kolumn — na wąskim ekranie długie nagłówki zwiększają szerokość tabeli i wymuszają przewijanie poziome. Lepiej użyć zwięzłych etykiet i rozwinąć je w caption.
• Sprawdź podgląd przed kopiowaniem — od razu zobaczysz, czy liczba wierszy i kolumn zgadza się z danymi wejściowymi. Popraw tekst źródłowy, zamiast ręcznie naprawiać wygenerowany HTML.

Ograniczenia narzędzia

• Jedna tabela może mieć do 20 kolumn, 300 wierszy i 2000 komórek (wiersze × kolumny), a pole wierszy mieści 30 000 znaków. Większy zestaw danych podziel na kilka tabel.
• Nie scala komórek — narzędzie nie generuje colspan ani rowspan. Scalanie komórek musisz dopisać ręcznie w kodzie, jeśli tabela ma mieć bardziej złożony układ.
• Nie tworzy stopki tfoot ani nagłówków wierszy (scope="row"). Wiersz podsumowania trzeba dodać samodzielnie.
• Nie dodaje interakcji — nie tworzy sortowania, filtrowania ani rozwijanych wierszy, bo wymagałoby to JavaScriptu. Generator zwraca statyczny HTML z CSS.
• Nie projektuje wyglądu za Ciebie — wygenerowany CSS jest podstawowy: jeden kolor zebry i jeden kolor ramki. Pozostałe kolory, typografia i odstępy zależą od Twojego szablonu oraz własnych klas.