Generator HTML tabela

Kako generisati HTML tabelu

1. Popuni mrežu. Koristi Dodaj red, Dodaj kolonu, Ukloni posljednji red i Ukloni posljednju kolonu ili dugmad × pored svakog reda i kolone. Nova prazna tabela počinje ispočetka od prazne mreže 3 × 3.
2. Da iskoristiš postojeće podatke, zalijepi CSV ili ćelije kopirane iz Excela, LibreOfficea ili Google Sheetsa u Uvezi CSV ili podatke iz tabelarnog programa, provjeri Razdjelnik i klikni Uvezi. Blok ćelija iz tabelarnog programa možeš zalijepiti i direktno u bilo koju ćeliju mreže.
3. Dodaj Naslov tabele i odaberi je li Prvi red zaglavlje i je li Prva kolona zaglavlje.
4. Pod Stilizovanje odaberi Bez stilova, CSS klasa ili Ugrađeni stilovi, te po želji podesi Boju okvira, Pozadinu zaglavlja i Prugaste redove.
5. Provjeri Pregled, pa klikni Kopiraj HTML ili preuzmi kod kao .html datoteku.

Pristupačan markup tabele

Tabela je pristupačna samo kad čitači ekrana mogu razlikovati koje su ćelije zaglavlja i šta opisuju. Ovaj alat piše strukturu koju preporučuju HTML standard i WCAG tehnike:

• <caption> daje tabeli naziv. Čitači ekrana ga objavljuju pri ulasku u tabelu i pomaže svakom čitaocu da razumije šta gleda. Neka bude kratak i opisan.
• <thead> i <tbody> razdvajaju red zaglavlja od redova s podacima. Preglednici mogu ponoviti <thead> na svakoj odštampanoj stranici.
• <th scope="col"> označava zaglavlje svake kolone, a uz Prva kolona je zaglavlje <th scope="row"> označava prvu ćeliju svakog reda. Kad korisnik čitača ekrana pređe na ćeliju s podacima, čitač može naglas pročitati odgovarajuća zaglavlja, poput „Pro, Cijena, 12 KM“.

Tabele koristi samo za tabelarne podatke, nikada za raspored stranice. Izbjegavaj spojene ćelije kad god možeš: jednostavne mreže s jednim redom zaglavlja i, po potrebi, jednom kolonom zaglavlja najlakše se čitaju pomoću pomoćnih tehnologija.

Opcije stilizovanja

• Bez stilova piše običan markup koji nasljeđuje stilove tabela tvog sajta. To je najbolji izbor za CMS ili sajt s dizajn-sistemom.
• CSS klasa dodaje class="…" na <table> i prikazuje odgovarajući blok CSS-a koji možeš zalijepiti u svoj stilski dokument. Naziv klase se čisti na slova, cifre, crtice i donje crte, pa je uvijek ispravan selektor.
• Ugrađeni stilovi stavljaju atribute style na svaki element. To je opširno, ali je ono što HTML e-poruke trebaju, jer mnogi klijenti e-pošte zanemaruju blokove <style>. Dugme Preuzmi dodaje CSS u element <style> kad koristiš klasu.

U CSS se upisuju samo prave heksadecimalne boje iz birača boja, pa ništa neočekivano ne može završiti u tvojim stilovima.

Escape-ovanje i sigurnost

Svaka ćelija se escape-uje: <, > i & postaju <, > i &, pa se tekst poput <b> ili a < b pojavljuje tačno kako je upisan, umjesto da se tumači kao markup. Prelomi redova unutar uvezenih ćelija postaju <br>. Pregled se gradi samo iz ovog escape-ovanog markupa i prolazi kroz sanitizer koji zadržava samo elemente tabele, pa zalijepljena skripta nikada ne može da se izvrši.