Utilia
Kategorije ▾
Jezik: hr ▾

HTML generator tablica

Izradi HTML kôd tablice iz uredive mreže ili zalijepljenog CSV-a, s naslovom, ćelijama zaglavlja, th scope, CSS klasom ili ugrađenim stilovima i pregledom.

Pritisni Enter za prelazak u idući redak. Zalijepi ćelije kopirane iz proračunske tablice u bilo koju ćeliju da od nje ispuniš mrežu.

Stiliziranje

Pregled

Uvezi CSV ili podatke iz proračunske tablice

Kako generirati HTML tablicu

  1. Ispuni mrežu. Koristi Dodaj redak, Dodaj stupac, Ukloni zadnji redak i Ukloni zadnji stupac ili gumbe × pokraj svakog retka i stupca. Nova prazna tablica počinje ispočetka s praznom mrežom 3 × 3.
  2. Da ponovno upotrijebiš postojeće podatke, zalijepi CSV ili ćelije kopirane iz Excela, LibreOfficea ili Google tablica u Uvezi CSV ili podatke iz proračunske tablice, provjeri Razdjelnik i klikni Uvezi. Blok ćelija iz proračunske tablice možeš zalijepiti i izravno u bilo koju ćeliju mreže.
  3. Dodaj Naslov tablice i odaberi je li Prvi redak je zaglavlje i Prvi stupac je zaglavlje.
  4. Pod Stiliziranje odaberi Bez stilova, CSS klasa ili Ugrađeni stilovi te po želji prilagodi Boja obruba, Pozadina zaglavlja i Prugasti retci.
  5. Provjeri Pregled, zatim klikni Kopiraj HTML ili preuzmi kôd kao datoteku .html.

Pristupačna oznaka tablice

Tablica je pristupačna tek kad čitači zaslona mogu razlikovati koje su ćelije zaglavlja i što opisuju. Ovaj alat piše strukturu koju preporučuju HTML standard i WCAG tehnike:

  • <caption> daje tablici naziv. Čitači zaslona ga najavljuju pri ulasku u tablicu, a pomaže i svakom čitatelju da razumije što gleda. Neka bude kratak i opisan.
  • <thead> i <tbody> odvajaju redak zaglavlja od redaka s podacima. Preglednici mogu ponoviti <thead> na svakoj ispisanoj stranici.
  • <th scope="col"> označava zaglavlje svakog stupca, a uz Prvi stupac je zaglavlje <th scope="row"> označava prvu ćeliju svakog retka. Kad korisnik čitača zaslona prijeđe na ćeliju s podacima, čitač može naglas pročitati pripadajuća zaglavlja, na primjer „Pro, Cijena, 12 €“.

Tablice koristi samo za tablične podatke, nikada za raspored stranice. Izbjegavaj spojene ćelije kad možeš: jednostavne mreže s jednim retkom zaglavlja i, po potrebi, jednim stupcem zaglavlja najlakše je čitati potpornom tehnologijom.

Mogućnosti stiliziranja

  • Bez stilova piše običnu oznaku koja nasljeđuje stilove tablica tvoje web-stranice. To je najbolji izbor za sustav za upravljanje sadržajem ili web-mjesto s dizajnerskim sustavom.
  • CSS klasa dodaje class="…" elementu <table> i prikazuje odgovarajući blok CSS-a koji možeš zalijepiti u svoju stilsku tablicu. Naziv klase se čisti na slova, znamenke, crtice i podcrte pa je uvijek valjan selektor.
  • Ugrađeni stilovi stavlja atribute style na svaki element. Opširno je, ali je to ono što HTML poruke e-pošte trebaju jer mnogi klijenti e-pošte zanemaruju blokove <style>. Gumb Preuzmi dodaje CSS u element <style> kad koristiš klasu.

U CSS se upisuju samo prave heksadecimalne boje iz birača boja, pa u tvoje stilove ne može dospjeti ništa neočekivano.

Escapeanje i sigurnost

Svaka ćelija je escapeana: <, > i & postaju &lt;, &gt; i &amp;, pa se tekst poput <b> ili a < b prikazuje točno kako je upisan umjesto da se tumači kao oznaka. Prijelomi redaka unutar uvezenih ćelija postaju <br>. Pregled se gradi samo iz te escapeane oznake i prolazi kroz sanitizer koji zadržava samo elemente tablice, pa zalijepljena skripta nikada ne može raditi.

Česta pitanja

Mogu li u ćeliju staviti poveznice ili podebljani tekst?

Ne iz mreže: sadržaj ćelija uvijek se escapea, što kôd održava valjanim i sigurnim. Poveznice ili oblikovanje dodaj generiranom kôdu naknadno ako ti trebaju.

Zašto koristiti caption umjesto naslova iznad tablice?

<caption> je u stablu pristupačnosti povezan s tablicom, pa ga čitači zaslona najavljuju zajedno s tablicom. Naslov iznad nje nije povezan s tablicom.

Podržava li alat spojene ćelije (colspan i rowspan)?

Ne. Mreža daje jednu ćeliju po položaju. Spojene ćelije otežavaju čitanje tablica potpornoj tehnologiji, pa ih ostavi za slučajeve u kojima su doista potrebne i dodaj ih ručno.

Šalju li se moji podaci?

Ne. Mreža, uvoz, kôd i pregled stvaraju se u tvom pregledniku. Ništa što zalijepiš ne šalje se na poslužitelj.

Koliko velika smije biti tablica?

Mreža prima do 500 redaka i 30 stupaca. Za veće skupove podataka sortabilna podatkovna mreža ili CSV datoteka za preuzimanje obično su korisniji od statične HTML tablice.

Slični alati