HTML-tabeli generaator

Kuidas HTML-tabelit luua

1. Täida ruudustik. Kasuta nuppe Lisa rida, Lisa veerg, Eemalda viimane rida ja Eemalda viimane veerg või iga rea ja veeru kõrval olevaid ×-nuppe. Uus tühi tabel alustab uuesti tühjast 3 × 3 ruudustikust.
2. Olemasolevate andmete taaskasutamiseks kleebi CSV või Excelist, LibreOffice’ist või Google Sheetsist kopeeritud lahtrid väljale Impordi CSV- või arvutustabeli andmed, kontrolli Eraldajat ja klõpsa Impordi. Arvutustabeli lahtrite ploki võid kleepida ka otse suvalisse ruudustiku lahtrisse.
3. Lisa Pealdis ja vali, kas Esimene rida on päiserida ja Esimene veerg on päiseveerg.
4. Vali jaotises Stiilid Ilma stiilideta, CSS-klass või Reasisesed stiilid ning soovi korral kohanda Äärise värvi, Päise tausta ja Triibulised read.
5. Vaata Eelvaadet, seejärel klõpsa Kopeeri HTML või laadi kood alla .html-failina.

Ligipääsetav tabelimärgistus

Tabel on ligipääsetav ainult siis, kui ekraanilugejad suudavad eristada, millised lahtrid on päised ja mida need kirjeldavad. Tööriist kirjutab struktuuri, mida HTML-i standard ja WCAG tehnikad soovitavad:

• <caption> annab tabelile nime. Ekraanilugejad teatavad selle tabelisse sisenedes ja see aitab igal lugejal mõista, mida ta vaatab. Hoia see lühike ja kirjeldav.
• <thead> ja <tbody> eraldavad päisrea andmeridadest. Brauserid saavad <thead> iga prinditud lehel kordada.
• <th scope="col"> märgib iga veerupäise ning valikuga Esimene veerg on päiseveerg märgib <th scope="row"> iga rea esimese lahtri. Kui ekraanilugeja kasutaja liigub andmelahtrisse, saab see vastavad päised valjusti ette lugeda, näiteks „Pro, Hind, 12 €“.

Kasuta tabeleid ainult tabeliandmete jaoks, mitte kunagi lehe paigutuseks. Väldi võimaluse korral liidetud lahtreid: lihtsad ruudustikud ühe päiserea ja vajadusel ühe päiseveeruga on abitehnoloogiaga kõige lihtsamini loetavad.

Stiilivalikud

• Ilma stiilideta kirjutab lihtsa märgistuse, mis pärib sinu saidi tabelistiilid. See on parim valik CMS-i või disainisüsteemiga saidi jaoks.
• CSS-klass lisab elemendile <table> atribuudi class="…" ja näitab vastavat CSS-i plokki, mille saad oma stiililehele kleepida. Klassi nimi puhastatakse tähtedeks, numbriteks, sidekriipsudeks ja alakriipsudeks, nii et see on alati korrektne selektor.
• Reasisesed stiilid paneb style-atribuudid igale elemendile. See on paljusõnaline, kuid just seda vajavad HTML-kirjad, sest paljud e-posti kliendid ignoreerivad <style>-plokke. Nupp Laadi alla lisab CSS-i <style>-elementi, kui kasutad klassi.

CSS-i kirjutatakse ainult värvivalijatest pärit tõelised kuueteistkümnendvärvid, nii et sinu stiilidesse ei saa sattuda midagi ootamatut.

Escape’imine ja turvalisus

Iga lahter escape’itakse: <, > ja & muutuvad kujuks <, > ja &, nii et tekst nagu <b> või a < b ilmub täpselt nii, nagu on kirjutatud, mitte ei tõlgendata märgistusena. Imporditud lahtrite reavahetused muutuvad kujuks <br>. Eelvaade ehitatakse ainult sellest escape’itud märgistusest ja läbib puhastaja, mis jätab alles ainult tabelielemendid, seega kleebitud skript ei saa kunagi käivituda.