Generator tabeli HTML

Tabela HTML z danymi i stylem

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Kolumny (przecinek)

Wiersze (jedna linia = wiersz; wartości rozdziel „;”)

Podpis tabeli (opcjonalnie)

Zaawansowane

Wyrównanie

Padding

Czcionka

Nagłówek

Zebra

Obramowanie

Responsywna

Wierszy: 3 Kolumn: 4

Podglad

Lista pracowników
Imię	Wiek	Miasto	Zawód
Anna	29	Warszawa	Programistka
Piotr	35	Kraków	Nauczyciel
Magdalena	41	Gdańsk	Lekarka

Kod HTML

<style type="text/css">
table { font-family: sans-serif; border-spacing: 0; width: 100%; }
table { border-collapse: collapse; }
th, td { border: 1px solid #d1d5db; }
tbody tr:nth-child(even) { background: #f3f4f6; }
th, td { padding: 8px; text-align: left; }
</style>
<div style="overflow-x:auto">
<table>
  <caption>Lista pracowników</caption>
  <thead>
    <tr>
      <th>Imię</th>
      <th>Wiek</th>
      <th>Miasto</th>
      <th>Zawód</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>29</td>
      <td>Warszawa</td>
      <td>Programistka</td>
    </tr>
    <tr>
      <td>Piotr</td>
      <td>35</td>
      <td>Kraków</td>
      <td>Nauczyciel</td>
    </tr>
    <tr>
      <td>Magdalena</td>
      <td>41</td>
      <td>Gdańsk</td>
      <td>Lekarka</td>
    </tr>
  </tbody>
</table>
</div>

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator tabeli HTML

Tabele HTML prezentują dane w wierszach i kolumnach. Dobrze ostylowana tabela jest czytelna na każdym urządzeniu — zwłaszcza gdy dane się nie mieszczą na wąskim ekranie.

Opcje tabeli

Opcja	Efekt
Nagłówek	wiersz nagłówkowy z pogrubieniem
Zebry	naprzemienne tło wierszy
Obramowanie	linie siatki wokół komórek
Responsywność	przewijanie poziome na małych ekranach

Dostępność

Używaj th dla nagłówków i dodaj caption, aby opisać tabelę. Czytniki ekranu odczytują nagłówki przy każdej komórce, co ma ogromne znaczenie dla zrozumienia danych.

Przykład

Wklej kolumny „Imię, Wiek, Miasto” i wiersze „Anna; 29; Warszawa”. Generator zwróci kompletny kod z podglądem i stylami.

Najczęstsze pytania

Czy mogę użyć własnych stylów?

Tak — wygenerowany kod zawiera prosty CSS, który możesz zastąpić własnym lub klasami frameworka.

Jak zrobić tabelę responsywną?

Owinąć ją w kontener z overflow-x:auto — generator robi to automatycznie po włączeniu opcji.

Czy tabele są dobre dla UX?

Do danych tabelarycznych tak. Do układu strony lepiej używać CSS Grid lub Flexbox.

Generator tabeli HTML

Powiązane narzędzia

Generator tabeli HTML

Opcje tabeli

Dostępność

Przykład

Najczęstsze pytania

Zobacz też — powiązane narzędzia