Generator HTML tabela

Kako da generišeš HTML tabelu

1. Popuni mrežu. Koristi Dodaj red, Dodaj kolonu, Ukloni poslednji red i Ukloni poslednju kolonu ili dugmad × pored svakog reda i kolone. Nova prazna tabela počinje iznova od prazne mreže 3 × 3.
2. Da iskoristiš postojeće podatke, nalepi CSV ili ćelije kopirane iz Excela, LibreOffice-a ili Google Sheets-a u Uvezi CSV ili podatke iz tabele, proveri Razdvajač i klikni Uvezi. Blok ćelija iz tabele možeš da nalepiš i direktno u bilo koju ćeliju mreže.
3. Dodaj Naslov tabele i izaberi da li je Prvi red je zaglavlje i Prva kolona je zaglavlje.
4. U odeljku Stilizovanje izaberi Bez stilova, CSS klasa ili Ugrađeni stilovi, pa po želji podesi Boja ivice, Pozadina zaglavlja i Naizmenično obojeni redovi.
5. Proveri Pregled, pa klikni Kopiraj HTML ili preuzmi kod kao .html fajl.

Pristupačan HTML kod tabele

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

• <caption> daje tabeli ime. Čitači ekrana ga najavljuju pri ulasku u tabelu i pomaže svakom čitaocu da shvati šta gleda. Neka bude kratak i opisan.
• <thead> i <tbody> razdvajaju red zaglavlja od redova sa podacima. Pregledači mogu da ponove <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 sa podacima, čitač može da pročita odgovarajuća zaglavlja naglas, na primer „Pro, Cena, 1.200 din“.

Tabele koristi samo za tabelarne podatke, nikada za raspored stranice. Izbegavaj spojene ćelije kad možeš: jednostavne mreže sa 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 kod koji nasleđuje stilove tabela tvog sajta. To je najbolji izbor za sistem za upravljanje sadržajem ili sajt sa sistemom dizajna.
• CSS klasa dodaje class="…" na <table> i prikazuje odgovarajući blok CSS-a za lepljenje u tvoju stilsku tabelu. Naziv klase se čisti na slova, cifre, crtice i donje crte, pa je uvek ispravan selektor.
• Ugrađeni stilovi stavljaju atribute style na svaki element. Opširno je, ali je to ono što HTML e-poruke zahtevaju, jer mnogi klijenti e-pošte ignorišu 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 da završi u tvojim stilovima.

Escape znakova i bezbednost

Svaka ćelija se kodira: <, > i & postaju <, > i &, pa se tekst poput <b> ili a < b pojavljuje tačno onako kako je upisan, umesto da se tumači kao oznaka. Prelomi redova u uvezenim ćelijama postaju <br>. Pregled se gradi samo od ovog kodiranog koda i prolazi kroz sanitajzer koji zadržava samo elemente tabele, pa nalepljena skripta nikada ne može da se izvrši.