Generator tabel HTML

Kako ustvariti tabelo HTML

1. Izpolni mrežo. Uporabi Dodaj vrstico, Dodaj stolpec, Odstrani zadnjo vrstico in Odstrani zadnji stolpec ali gumbe × ob vsaki vrstici in stolpcu. Nova prazna tabela začne znova s prazno mrežo 3 × 3.
2. Če želiš ponovno uporabiti obstoječe podatke, prilepi CSV ali celice, kopirane iz Excela, LibreOfficea ali Google Preglednic, v Uvozi podatke CSV ali iz preglednice, preveri Ločilo in klikni Uvozi. Blok celic iz preglednice lahko prilepiš tudi neposredno v katero koli celico mreže.
3. Dodaj Naslov tabele in izberi, ali je Prva vrstica je glava in Prvi stolpec je glava.
4. Pod Oblikovanje izberi Brez slogov, Razred CSS ali Vrstični slogi ter po želji prilagodi Barva obrobe, Ozadje glave in Progaste vrstice.
5. Preveri Predogled, nato klikni Kopiraj HTML ali prenesi kodo kot datoteko .html.

Dostopno označevanje tabel

Tabela je dostopna le, če bralniki zaslona lahko ločijo, katere celice so glave in kaj opisujejo. To orodje piše strukturo, ki jo priporočata standard HTML in tehnike WCAG:

• <caption> tabeli da ime. Bralniki zaslona ga naznanijo ob vstopu v tabelo, vsakemu bralcu pa pomaga razumeti, kaj gleda. Naj bo kratek in opisen.
• <thead> in <tbody> ločita vrstico glave od vrstic s podatki. Brskalniki lahko <thead> ponovijo na vsaki natisnjeni strani.
• <th scope="col"> označi glavo vsakega stolpca, z Prvi stolpec je glava pa <th scope="row"> označi prvo celico vsake vrstice. Ko uporabnik bralnika zaslona preide na celico s podatki, lahko ta na glas prebere ustrezne glave, na primer »Pro, Cena, 12 €«.

Tabele uporabljaj samo za tabelarične podatke, nikoli za postavitev strani. Če se da, se izogibaj združenim celicam: preproste mreže z eno vrstico glave in po potrebi enim stolpcem glave so s podporno tehnologijo najlažje berljive.

Možnosti oblikovanja

• Brez slogov zapiše čisto označevanje, ki podeduje sloge tabel tvojega spletnega mesta. To je najboljša izbira za CMS ali spletno mesto z oblikovalskim sistemom.
• Razred CSS doda class="…" elementu <table> in prikaže ustrezen blok CSS za lepljenje v tvojo slogovno datoteko. Ime razreda se počisti do črk, števk, vezajev in podčrtajev, tako da je vedno veljaven izbirnik.
• Vrstični slogi doda atribute style vsakemu elementu. Je obsežno, vendar je to, kar potrebuje e-poštni HTML, saj številni e-poštni odjemalci bloke <style> prezrejo. Gumb Prenesi doda CSS v element <style>, kadar uporabljaš razred.

V CSS se zapišejo samo prave šestnajstiške barve iz izbirnikov barv, zato v tvoje sloge ne more priti nič nepričakovanega.

Zaščita znakov in varnost

Vsaka celica je zaščitena: <, > in & postanejo <, > in &, zato se besedilo, kot sta <b> ali a < b, prikaže natanko tako, kot je vneseno, namesto da bi se razlagalo kot označevanje. Prelomi vrstic v uvoženih celicah postanejo <br>. Predogled je zgrajen samo iz tega zaščitenega označevanja in gre skozi čistilnik, ki ohrani le elemente tabele, zato prilepljen skript ne more nikoli steči.