Generator tabel HTML

Twórz tabele HTML za pomocą edytora wizualnego i natychmiast kopiuj kod.

WierszeKolumny Wiersz nagłówka Ramka Naprzemienne wierszeWypełnienie

Wynik HTML

<table border="1" cellpadding="8" style="border-collapse: collapse; width: 100%;">
  <thead>
    <tr>
      <th style="padding: 8px; text-align: left;">Header 1</th>
      <th style="padding: 8px; text-align: left;">Header 2</th>
      <th style="padding: 8px; text-align: left;">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 8px;">Cell 1,1</td>
      <td style="padding: 8px;">Cell 1,2</td>
      <td style="padding: 8px;">Cell 1,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 2,1</td>
      <td style="padding: 8px;">Cell 2,2</td>
      <td style="padding: 8px;">Cell 2,3</td>
    </tr>
    <tr>
      <td style="padding: 8px;">Cell 3,1</td>
      <td style="padding: 8px;">Cell 3,2</td>
      <td style="padding: 8px;">Cell 3,3</td>
    </tr>
  </tbody>
</table>

O tym narzędziu

Generator tabel HTML pozwala ustawić liczbę wierszy i kolumn, edytować komórki bezpośrednio i uzyskać gotowy kod HTML tabeli. Można wizualnie skonfigurować wiersz nagłówka, ramkę, naprzemienne wiersze i wypełnienie komórek.

Wygenerowany HTML stosuje znaczniki semantyczne z odpowiednią strukturą thead i tbody, co jest lepsze dla dostępności i czytników ekranu. Kod aktualizuje się w czasie rzeczywistym podczas edycji.

Jak używać

Ustaw liczbę wierszy i kolumn.
Przełącz wiersz nagłówka, ramkę i naprzemienne wiersze za pomocą pól wyboru.
Dostosuj wartość wypełnienia komórki.
Kliknij dowolną komórkę, aby bezpośrednio wpisać treść.
Skopiuj kod pod "Wynik HTML" i użyj go w swoim projekcie.

Przypadki użycia

Świetne do tabel porównania danych, tabel cenowych, harmonogramów, tabel specyfikacji produktów i wszelkich informacji wyświetlanych w formacie tabelarycznym na stronie internetowej.

Często zadawane pytania

Czy mogę stylizować tabelę bez CSS? — Tak. Wygenerowany HTML zawiera atrybuty border i cellpadding, więc podstawowe style są stosowane bez żadnego CSS.
Czy mogę dodać colspan lub rowspan? — Narzędzie generuje podstawową strukturę tabeli. Edytuj wygenerowany kod bezpośrednio, aby dodać atrybuty colspan/rowspan.
Jak zrobić tabelę responsywną? — Opakuj tabelę w div z overflow-x: auto lub użyj media queries CSS, aby umożliwić poziome przewijanie na małych ekranach.