CKEditori mobiilisobiva tabeli generaatori kasutusjuhend

See tööriist aitab teha tavalisest tabelist CKEditorisse sobiva HTML-ploki, kus arvutivaates kuvatakse tavaline tabel ja mobiilivaates iga tabelirida eraldi kaardina.

Milleks tööriist on mõeldud?

CKEditorisse lisatud laiad tabelid võivad telefonis tekitada paremale-vasakule kerimise. Generaator loob samadest andmetest kaks vaadet:

arvutivaates tavaline tabel;
mobiilivaates andmekaardid, kus iga rida on eraldi kaart ja veerupäised on siltidena vasakus tulbas.

Algne tabel / arvutivaade

Näidistabel koolibussi peatuste ja aegadega
Peatus	Hommikul	Pärastlõunal
Kooli peatus	07:35	15:10
Rahvamaja	07:47	15:22

Genereeritud mobiilivaade

Peatus: Kooli peatus
Hommikul: 07:35
Pärastlõunal: 15:10

Peatus: Rahvamaja
Hommikul: 07:47
Pärastlõunal: 15:22

Valmis tulemus on üks HTML-plokk. Seda saab kopeerida ja CKEditori HTML/source vaatesse kleepida.

Kasutamine

Ava fail mobile-table-generator.html brauseris.
Kopeeri oma algne tabel CKEditorist, Excelist, Google Sheetsist või muust allikast.
Kleebi tabel väljale Source table.
Vali sisendi tüüp. Enamasti sobib Auto detect.
Vajuta Generate.
Kontrolli all olevat eelvaadet.
Vajuta Copy HTML.
Ava CKEditoris HTML/source vaade ja kleebi kopeeritud kood sinna.
Salvesta sisu ning kontrolli tulemust nii arvutis kui telefonis.

Sisendi tüübid

Auto detect

Tööriist püüab ise aru saada, kas kleebitud sisu on HTML-tabel või tabelina kopeeritud tekst. See on vaikimisi soovitatav valik.

HTML table

Kasuta seda siis, kui kleebid CKEditorist või veebilehelt saadud HTML-tabeli. Sisend võib välja näha näiteks nii:

<table>
  <tr><td>Peatus</td><td>Hommikul</td></tr>
  <tr><td>Kooli peatus</td><td>07:35</td></tr>
</table>

Spreadsheet rows

Kasuta seda siis, kui kopeerid andmed tabelarvutusprogrammist. Veerud eraldatakse tavaliselt tabulaatoriga ning read reavahetusega.

Olulised reeglid

Esimest rida kasutatakse veerupäistena ja mobiilikaartide siltidena.
Tabelis peab olema vähemalt üks päiserida ja üks andmerida.
Tabelis peab olema vähemalt kaks veergu.
Täiesti tühjad read jäetakse välja.
Algse tabeli keerulisemad kujundused, näiteks lahtrite eraldi stiilid, ei pruugi väljundisse üle tulla.

Nupud

Generate loob CKEditorisse kleepimiseks valmis HTML-i.
Reset tühjendab sisendi, väljundi ja eelvaate ning taastab valiku Auto detect.
Load sample lisab näidistabeli, millega saab tööriista proovida.
Copy HTML kopeerib valmis HTML-ploki lõikelauale.
Select all märgib kogu väljundkoodi käsitsi kopeerimiseks.

Kuidas väljund töötab?

Generaator loob ühe HTML-ploki, mille sees on:

<style> plokk kujunduse ja mobiilireeglite jaoks;
arvutivaate tabel;
mobiilivaate kaardid.

Alla 768px laiuse ekraani puhul peidetakse tavaline tabel ja kuvatakse kaardid. Kaardivaates on iga algse tabeli rida eraldi kaart.

Probleemide lahendamine

Mobiilis on ikka näha suur tabel

Kui mobiilis kuvatakse endiselt tavaline tabel ja leht kerib külgsuunas, võib CKEditor või veebilehe süsteem eemaldada <style> ploki või @media reegli. Sel juhul tuleb sama CSS lisada veebilehe üldisesse kujundusse või lubada CKEditoris stiiliploki kasutamine.

Kaartidel on valed sildid

Kontrolli, et tabeli esimene rida sisaldaks veerupäiseid, näiteks Teenus, Ühik ja Hind. Kui esimene rida on tegelik andmerida, kasutatakse seda ekslikult siltidena.

Mõni rida on kadunud

Täiesti tühjad read eemaldatakse automaatselt. Kui rida peab alles jääma, lisa vähemalt ühte lahtrisse nähtav tekst.

Kopeerimine ei tööta

Vajuta Select all, seejärel kasuta klaviatuuril Ctrl+C või Macis Cmd+C.