HTML-taulukkogeneraattori

Näin luot HTML-taulukon

1. Täytä ruudukko. Käytä painikkeita Lisää rivi, Lisää sarake, Poista viimeinen rivi ja Poista viimeinen sarake tai kunkin rivin ja sarakkeen vieressä olevia ×-painikkeita. Uusi tyhjä taulukko aloittaa alusta tyhjästä 3 × 3 -ruudukosta.
2. Jos haluat käyttää olemassa olevaa dataa, liitä CSV tai Excelistä, LibreOfficesta tai Google Sheetsistä kopioidut solut kenttään Tuo CSV- tai taulukkolaskentadata, tarkista Erotin ja napsauta Tuo. Voit myös liittää taulukkolaskennan solulohkon suoraan mihin tahansa ruudukon soluun.
3. Lisää Otsikkoteksti ja valitse, onko Ensimmäinen rivi otsikkorivi ja onko Ensimmäinen sarake otsikkosarake.
4. Valitse Tyylit-osiossa Ei tyylejä, CSS-luokka tai Rivinsisäiset tyylit ja säädä halutessasi Reunan väri, Otsikon tausta ja Raidalliset rivit.
5. Tarkista Esikatselu ja napsauta sitten Kopioi HTML tai lataa koodi .html-tiedostona.

Saavutettava taulukkomerkintä

Taulukko on saavutettava vain, kun ruudunlukijat erottavat, mitkä solut ovat otsikoita ja mitä ne kuvaavat. Tämä työkalu kirjoittaa rakenteen, jota HTML-standardi ja WCAG-tekniikat suosittelevat:

• <caption> antaa taulukolle nimen. Ruudunlukijat ilmoittavat sen taulukkoon siirryttäessä, ja se auttaa jokaista lukijaa ymmärtämään, mitä hän katsoo. Pidä se lyhyenä ja kuvaavana.
• <thead> ja <tbody> erottavat otsikkorivin datariveistä. Selaimet voivat toistaa <thead>-osan jokaisella tulostetulla sivulla.
• <th scope="col"> merkitsee jokaisen sarakeotsikon, ja Ensimmäinen sarake on otsikkosarake -valinnalla <th scope="row"> merkitsee jokaisen rivin ensimmäisen solun. Kun ruudunlukijan käyttäjä siirtyy datasoluun, se voi lukea vastaavat otsikot ääneen, esimerkiksi ”Pro, Hinta, 12 €”.

Käytä taulukoita vain taulukkomuotoiselle datalle, älä koskaan sivun asetteluun. Vältä yhdistettyjä soluja, kun mahdollista: yksinkertaiset ruudukot, joissa on yksi otsikkorivi ja tarvittaessa yksi otsikkosarake, ovat helpoimpia lukea apuvälineillä.

Tyylivaihtoehdot

• Ei tyylejä kirjoittaa pelkän merkinnän, joka perii sivustosi taulukkotyylit. Se on paras valinta CMS:lle tai sivustolle, jolla on suunnittelujärjestelmä.
• CSS-luokka lisää class="…"-attribuutin <table>-elementtiin ja näyttää vastaavan CSS-lohkon liitettäväksi tyylitiedostoosi. Luokan nimi siivotaan kirjaimiksi, numeroiksi, yhdysmerkeiksi ja alaviivoiksi, joten se on aina kelvollinen valitsin.
• Rivinsisäiset tyylit lisää style-attribuutit jokaiseen elementtiin. Se on monisanaista, mutta sitä HTML-sähköpostit tarvitsevat, koska monet sähköpostiohjelmat ohittavat <style>-lohkot. Lataa-painike lisää CSS:n <style>-elementtiin, kun käytät luokkaa.

CSS:ään kirjoitetaan vain värinvalitsimista saatuja todellisia heksadesimaalivärejä, joten tyyleihisi ei voi päätyä mitään odottamatonta.

Koodaus ja turvallisuus

Jokainen solu koodataan: <, > ja & muuttuvat muotoihin <, > ja &, joten teksti kuten <b> tai a < b näkyy täsmälleen kirjoitettuna sen sijaan, että se tulkittaisiin merkinnäksi. Tuotujen solujen sisäiset rivinvaihdot muuttuvat <br>-elementeiksi. Esikatselu rakennetaan vain tästä koodatusta merkinnästä, ja se kulkee puhdistimen läpi, joka säilyttää vain taulukkoelementit, joten liitetty skripti ei voi koskaan suorittua.