Generátor HTML tabuliek

Ako vygenerovať tabuľku HTML

1. Vyplň mriežku. Použi Pridať riadok, Pridať stĺpec, Odstrániť posledný riadok a Odstrániť posledný stĺpec, alebo tlačidlá × pri každom riadku a stĺpci. Nová prázdna tabuľka začne odznova z prázdnej mriežky 3 × 3.
2. Ak chceš použiť existujúce údaje, vlož CSV alebo bunky skopírované z Excelu, LibreOffice či Tabuliek Google do Importovať údaje CSV alebo z tabuľky, skontroluj Oddeľovač a klikni na Importovať. Blok buniek z tabuľky môžeš vložiť aj priamo do ľubovoľnej bunky mriežky.
3. Pridaj Popisok a vyber, či Prvý riadok je hlavička a Prvý stĺpec je hlavička.
4. V sekcii Štýlovanie vyber Bez štýlov, Trieda CSS alebo Vložené štýly a podľa potreby uprav Farba okraja, Pozadie hlavičky a Pruhované riadky.
5. Skontroluj Náhľad a potom klikni na Kopírovať HTML, alebo stiahni kód ako súbor .html.

Prístupné značkovanie tabuľky

Tabuľka je prístupná len vtedy, keď čítače obrazovky vedia určiť, ktoré bunky sú hlavičky a čo opisujú. Tento nástroj zapisuje štruktúru, ktorú odporúča štandard HTML a techniky WCAG:

• <caption> dáva tabuľke názov. Čítače obrazovky ho oznámia pri vstupe do tabuľky a pomáha každému čitateľovi pochopiť, na čo sa pozerá. Drž ho krátky a výstižný.
• <thead> a <tbody> oddeľujú riadok hlavičky od riadkov s údajmi. Prehliadače môžu <thead> zopakovať na každej vytlačenej strane.
• <th scope="col"> označuje hlavičku každého stĺpca a pri Prvý stĺpec je hlavička označuje <th scope="row"> prvú bunku každého riadka. Keď používateľ čítača obrazovky prejde na bunku s údajmi, môže si nechať prečítať príslušné hlavičky, napríklad „Pro, Cena, 12 €“.

Tabuľky používaj len na tabuľkové údaje, nikdy na rozloženie stránky. Ak sa dá, vyhni sa zlúčeným bunkám: jednoduché mriežky s jedným riadkom hlavičky a prípadne jedným stĺpcom hlavičky sa s asistenčnými technológiami čítajú najľahšie.

Možnosti štýlovania

• Bez štýlov zapíše čisté značkovanie, ktoré preberá štýly tabuliek tvojho webu. Je to najlepšia voľba pre CMS alebo web s dizajnovým systémom.
• Trieda CSS pridá class="…" do <table> a zobrazí zodpovedajúci blok CSS na vloženie do tvojho štýlového predpisu. Názov triedy sa očistí na písmená, číslice, spojovníky a podčiarkovníky, takže je vždy platným selektorom.
• Vložené štýly dajú atribúty style na každý prvok. Je to rozsiahle, ale e‑mailové správy HTML to potrebujú, pretože mnohé e‑mailové klienty ignorujú bloky <style>. Pri použití triedy pridá tlačidlo Stiahnuť CSS do prvku <style>.

Do CSS sa zapisujú iba skutočné hexadecimálne farby z výberov farieb, takže sa do tvojich štýlov nemôže dostať nič neočakávané.

Ošetrenie znakov a bezpečnosť

Každá bunka je ošetrená: <, > a & sa zmenia na <, > a &, takže text ako <b> alebo a < b sa zobrazí presne tak, ako je napísaný, a nevyloží sa ako značkovanie. Zalomenia riadkov v importovaných bunkách sa zmenia na <br>. Náhľad sa skladá iba z tohto ošetreného značkovania a prechádza čističom, ktorý ponecháva iba prvky tabuľky, takže vložený skript sa nikdy nespustí.