Softonic

Generator tabel HTML

Wklejone dane, zawartość komórek i wygenerowany HTML pozostają w tej przeglądarce. Kolejne kroki korzystają z pamięci sesji tej karty; wartości nie są wysyłane przez nasze serwery ani umieszczane w adresie URL.

Krok 1 / 4

Obsługiwane są pola CSV w cudzysłowach, tabulatory z arkuszy, wiersze rozdzielone średnikami i wiersze rozdzielające Markdown. Maksimum: 50 wierszy, 20 kolumn i 1000 znaków w komórce.

Dane tabeli
Dane tabeli

Ręczne pisanie <table>, <thead>, <tbody> i <tr> dla zestawu danych liczącego dziesięć wierszy jest żmudne. Wklej dane tabeli rozdzielone tabulatorami, w formacie CSV lub Markdown, a ten generator utworzy dobrze ustrukturyzowany kod HTML z tagami semantycznymi, opcjonalnym <caption>, poprawnymi atrybutami scope oraz wybranym naprzemiennym cieniowaniem wierszy (zebra), obramowaniem lub klasami Tailwind – gotowy do umieszczenia w artykule lub panelu.

Jak stworzyć tabelę w HTML

  1. 1

    Wklej swoje dane

    TSV (kopia z arkusza kalkulacyjnego), pliki CSV oraz składnia tabel Markdown są poprawnie interpretowane.

  2. 2

    Wybierz opcje tabeli

    Wiersz nagłówka, podpis, naprzemienne cieniowanie (zebra), wiersze kompaktowe lub przestronne.

  3. 3

    Wybierz tryb stylizacji

    Zwykły HTML, style inline, klasy Bootstrap lub klasy Tailwind.

  4. 4

    Skopiuj kod

    Wynik to poprawny, semantyczny kod HTML – a nie siatka `<div>` udająca tabelę.

Struktura tabeli semantycznej

Tabele stworzone z odpowiednimi tagami są dostępne, kompatybilne z programami do odczytywania ekranu oraz łatwe do formatowania. Generator tworzy następującą strukturę:

<table>
  <caption>Q1 sales figures</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">EU</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

Elementy i ich role

Element Cel
<caption> Podsumowanie tabeli, najpierw odczytywane przez programy do czytania ekranu
<thead> Nagłówki kolumn, renderowane oddzielnie od tekstu głównego
<tbody> Wiersze danych
<tfoot> Sumy i przypisy umieszczane na dole niezależnie od pozycji w kodzie
<th scope="col"> Nagłówek kolumny
<th scope="row"> Nagłówek wiersza (np. pierwsza komórka każdego wiersza)
<td> Komórka danych

Wzorce responsywne

  • Przewijanie poziome: opakuj tabelę w <div style="overflow-x:auto">, aby na wąskich ekranach można ją było przewijać zamiast psuć układ.
  • Zawijanie na urządzeniach mobilnych: powtórz nagłówki jako atrybuty data-label i za pomocą CSS zamień wiersze w pionowe karty – dobre dla małych zbiorów danych.
  • Przebudowa z użyciem siatki: złożone tabele można odtworzyć za pomocą CSS Grid, ale tracą wtedy natywną nawigację klawiaturą; opłacalne tylko dla paneli.

Lista kontrolna dostępności

  • Każdy <th> ma atrybut scope.
  • W przypadku złożonych scaleń komórek użyj headers="...", aby powiązać komórki danych z identyfikatorami nagłówków.
  • Podpis podsumowuje przeznaczenie tabeli.
  • Nie używaj tabel do układu wizualnego – zastosuj CSS Grid lub Flexbox.

Najczęściej zadawane pytania

Tak. Dane ze schowka arkusza kalkulacyjnego mają format TSV (rozdzielony tabulatorami), który generator analizuje natywnie: wiersze stają się <tr>, a komórki rozdzielone tabulatorami – <td>.

Klasy CSS dla wszystkiego, co kontrolujesz; style inline do e-maili (gdzie zewnętrzne arkusze stylów są często blokowane). Tryby Bootstrap i Tailwind generują gotowy do użycia kod klas dla tych frameworków.

Nie automatycznie. Każda zaimportowana wartość staje się osobną komórką. Po skopiowaniu HTML dodaj samodzielnie colspan lub rowspan i sprawdź powiązania nagłówków, ponieważ scalone komórki mogą wymagać atrybutów id i headers.

Tak – dodano atrybuty scope="col" i scope="row", a atrybut <caption> generuje się przy podaniu tego atrybutu. W przypadku złożonych tabel sprawdź wynik za pomocą programu do odczytywania ekranu lub rozszerzenia axe DevTools.

Powiązane narzędzia

Próbnik kolorów HEX

Wybierz lub wpisz kolor HEX i sprawdź RGB, HSL, przybliżone CMYK, luminancję względną oraz kontrast z bielą i czernią.

Generator losowych kolorów

Wygeneruj od 1 do 50 losowych kolorów HEX z próbkami do podglądu, kopiowania i użycia w CSS, testach lub tworzeniu palet.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.

Konwerter Base64 na Hex

Konwertuj ciąg Base64 na jego bazowe bajty zapisane szesnastkowo. Przydatne do inspekcji tokenów, kluczy, certyfikatów i JWT.

Konwerter binarnego na ósemkowy

Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.