Softonic

Generator tabel HTML

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>Wyniki sprzedaży Q1</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

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Walidator OpenAPI

Wklej dokument OpenAPI lub Swagger w JSON albo YAML i sprawdź jego podstawową strukturę: pole wersji, obiekt info i paths, z czytelnymi błędami i ostrzeżeniami.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Kreator diagramów ERD

Utwórz lokalnie diagram encja-relacja z maksymalnie 12 encjami, polami, relacjami i licznościami. Eksportuj Mermaid, SVG, PNG lub JSON.

Narzędzie jest dostępne w innych językach