Generator tabel HTML

Jak wygenerować tabelę HTML

1. Wypełnij siatkę. Użyj przycisków Dodaj wiersz, Dodaj kolumnę, Usuń ostatni wiersz i Usuń ostatnią kolumnę albo przycisków × obok każdego wiersza i kolumny. Nowa pusta tabela zaczyna od nowa z pustą siatką 3 × 3.
2. Aby wykorzystać istniejące dane, wklej CSV albo komórki skopiowane z Excela, LibreOffice lub Arkuszy Google w sekcji Import CSV lub danych z arkusza, sprawdź Separator i kliknij Importuj. Blok komórek z arkusza kalkulacyjnego możesz też wkleić bezpośrednio do dowolnej komórki siatki.
3. Dodaj Podpis i zdecyduj, czy Pierwszy wiersz to wiersz nagłówka oraz czy Pierwsza kolumna to kolumna nagłówka.
4. W sekcji Wygląd wybierz Bez stylów, Klasa CSS lub Style inline i w razie potrzeby dostosuj Kolor obramowania, Tło nagłówka oraz Naprzemienne kolory wierszy.
5. Sprawdź Podgląd, a następnie kliknij Kopiuj HTML albo pobierz kod jako plik .html.

Dostępny kod tabeli

Tabela jest dostępna tylko wtedy, gdy czytniki ekranu potrafią rozpoznać, które komórki są nagłówkami i co opisują. To narzędzie generuje strukturę zalecaną przez standard HTML i techniki WCAG:

• <caption> nadaje tabeli nazwę. Czytniki ekranu odczytują ją przy wejściu do tabeli, a każdemu czytelnikowi pomaga zrozumieć, na co patrzy. Niech podpis będzie krótki i opisowy.
• <thead> i <tbody> oddzielają wiersz nagłówka od wierszy danych. Przeglądarki mogą powtarzać <thead> na każdej drukowanej stronie.
• <th scope="col"> oznacza każdy nagłówek kolumny, a przy opcji Pierwsza kolumna to kolumna nagłówka <th scope="row"> oznacza pierwszą komórkę każdego wiersza. Gdy użytkownik czytnika ekranu przechodzi do komórki z danymi, czytnik może odczytać pasujące nagłówki, np. „Pro, Cena, $12”.

Używaj tabel tylko do danych tabelarycznych, nigdy do układu strony. Jeśli to możliwe, unikaj scalonych komórek: proste siatki z jednym wierszem nagłówka i ewentualnie jedną kolumną nagłówka najłatwiej odczytać za pomocą technologii wspomagających.

Opcje wyglądu

• Bez stylów generuje czysty kod, który dziedziczy style tabel z twojej strony. To najlepszy wybór dla CMS-a lub strony z systemem projektowym (design system).
• Klasa CSS dodaje class="…" do elementu <table> i pokazuje pasujący blok CSS do wklejenia do arkusza stylów. Nazwa klasy jest oczyszczana do liter, cyfr, łączników i podkreśleń, więc zawsze jest poprawnym selektorem.
• Style inline umieszcza atrybuty style na każdym elemencie. Kod jest rozwlekły, ale tego wymagają e-maile HTML, bo wiele programów pocztowych ignoruje bloki <style>. Przy użyciu klasy przycisk Pobierz dodaje CSS w elemencie <style>.

Do CSS trafiają tylko prawdziwe kolory szesnastkowe z selektorów kolorów, więc w twoich stylach nie znajdzie się nic nieoczekiwanego.

Escapowanie i bezpieczeństwo

Zawartość każdej komórki jest escapowana: <, > i & stają się <, > i &, więc tekst taki jak <b> czy a < b pojawia się dokładnie tak, jak go wpisano, zamiast być interpretowany jako znacznik. Znaki nowego wiersza w zaimportowanych komórkach zamieniają się w <br>. Podgląd jest budowany wyłącznie z tego escapowanego kodu i przechodzi przez filtr, który zostawia tylko elementy tabeli, więc wklejony skrypt nigdy się nie uruchomi.