Utilia
Kategorie ▾
Jazyk: cs ▾

Generátor HTML tabulek

Vytvoř kód HTML tabulky z upravitelné mřížky nebo vloženého CSV s popiskem, záhlavím, atributem th scope, třídou CSS či vloženými styly a živým náhledem.

Klávesou Enter přejdeš o řádek níž. Vložením buněk zkopírovaných z tabulkového procesoru do libovolné buňky vyplníš mřížku od tohoto místa.

Styly

Náhled

Importovat data CSV nebo z tabulkového procesoru

Jak vygenerovat HTML tabulku

  1. Vyplň mřížku. Použij Přidat řádek, Přidat sloupec, Odebrat poslední řádek a Odebrat poslední sloupec, nebo tlačítka × u každého řádku a sloupce. Nová prázdná tabulka začne znovu od prázdné mřížky 3 × 3.
  2. Chceš-li využít existující data, vlož CSV nebo buňky zkopírované z Excelu, LibreOffice či Google Sheets do pole Importovat data CSV nebo z tabulkového procesoru, zkontroluj Oddělovač a klikni na Importovat. Blok buněk z tabulkového procesoru můžeš také vložit přímo do libovolné buňky mřížky.
  3. Přidej Popisek a rozhodni, zda První řádek je záhlaví a První sloupec je záhlaví.
  4. V části Styly vyber Bez stylů, Třída CSS nebo Vložené styly a podle potřeby uprav Barvu ohraničení, Pozadí záhlaví a Pruhované řádky.
  5. Zkontroluj Náhled a klikni na Kopírovat HTML, nebo si stáhni kód jako soubor .html.

Přístupné značení tabulky

Tabulka je přístupná, jen když čtečky obrazovky poznají, které buňky jsou záhlaví a co popisují. Nástroj zapisuje strukturu, kterou doporučují standard HTML a techniky WCAG:

  • <caption> dává tabulce název. Čtečky obrazovky ho oznámí při vstupu do tabulky a pomáhá každému čtenáři pochopit, co vidí. Drž ho krátký a výstižný.
  • <thead> a <tbody> oddělují řádek záhlaví od datových řádků. Prohlížeče mohou <thead> opakovat na každé vytištěné stránce.
  • <th scope="col"> označuje každé záhlaví sloupce a s volbou První sloupec je záhlaví označuje <th scope="row"> první buňku každého řádku. Když uživatel čtečky obrazovky přejde na datovou buňku, může si nechat nahlas přečíst příslušná záhlaví, například „Pro, Cena, 12 Kč“.

Tabulky používej jen pro tabulková data, nikdy pro rozvržení stránky. Pokud můžeš, vyhni se sloučeným buňkám: jednoduché mřížky s jedním řádkem záhlaví a případně jedním sloupcem záhlaví se s asistivními technologiemi čtou nejsnáze.

Možnosti stylů

  • Bez stylů zapíše čisté značky, které dědí styly tabulek tvého webu. Je to nejlepší volba pro redakční systém nebo web s designovým systémem.
  • Třída CSS přidá class="…" k <table> a zobrazí odpovídající blok CSS k vložení do šablony stylů. Název třídy se očistí na písmena, číslice, pomlčky a podtržítka, takže je to vždy platný selektor.
  • Vložené styly umístí atributy style na každý prvek. Je to rozvláčné, ale právě to potřebují e-maily v HTML, protože mnoho e-mailových klientů bloky <style> ignoruje. Tlačítko Stáhnout při použití třídy přidá CSS do prvku <style>.

Do CSS se zapisují jen skutečné šestnáctkové barvy z výběrů barev, takže se do tvých stylů nemůže dostat nic nečekaného.

Escapování a bezpečnost

Každá buňka se escapuje: <, > a & se změní na &lt;, &gt; a &amp;, takže text jako <b> nebo a < b se zobrazí přesně tak, jak byl napsán, a nebude se vykládat jako značky. Konce řádků uvnitř importovaných buněk se změní na <br>. Náhled se sestavuje jen z těchto escapovaných značek a prochází čističem, který ponechává pouze prvky tabulky, takže vložený skript se nikdy nespustí.

Časté dotazy

Mohu do buňky vložit odkazy nebo tučný text?

Z mřížky ne: obsah buněk se vždy escapuje, což udržuje kód platný a bezpečný. Odkazy nebo formátování přidej do vygenerovaného kódu dodatečně, pokud je potřebuješ.

Proč používat popisek místo nadpisu nad tabulkou?

<caption> je ve stromu přístupnosti svázán s tabulkou, takže ho čtečky obrazovky oznámí spolu s ní. Nadpis nad tabulkou s ní spojen není.

Podporuje nástroj sloučené buňky (colspan a rowspan)?

Ne. Mřížka vytváří jednu buňku na každé pozici. Sloučené buňky ztěžují čtení tabulek asistivním technologiím, proto je nech pro případy, kdy jsou opravdu nutné, a přidej je ručně.

Nahrávají se moje data?

Ne. Mřížka, import, kód i náhled vznikají ve tvém prohlížeči. Nic, co vložíš, se neodesílá na server.

Jak velká může tabulka být?

Mřížka pojme až 500 řádků a 30 sloupců. U větších datových sad je obvykle užitečnější datová mřížka s řazením nebo ke stažení soubor CSV než statická tabulka HTML.

Související nástroje