2017. szeptember 25., hétfő

Táblázat készítése Bloggerben


Nem tudom, felmerült-e már benned valaha, hogy jó volna táblázatot illeszteni egy Bloggeres bejegyzésbe, amilyen ez is.
Nos, a Blogger felajánlja a képek, videoklipek és linkek beszúrását. Ugyanakkor nincs közvetlen eszköz táblázatok beszúrására, holott egy táblázat nemcsak számadatok közlésére jó, hanem például világosan át lehet tekinteni különböző lehetőségeket is, ahogy a kép mutatja.

Ha közvetlen eszköz nincs is táblázat beszúrására, a dolog megoldható. Egy kicsit bele kell piszkálni a HTML kódba, de hidd el, tök egyszerű az egész. Nem nehezebb, mint egy palack szódát megcsinálni, és még össze sem vizezed magad. Az oldal alján látni fogod, hogy ezt a képet is egy ilyen táblázatról készítettem el.

Így készül egy táblázat

Először is tudnod kell, hogyan kell váltogatni az Írás és a HTML nézet között:

Az Írás és a HTML nézet az eszközléc elején váltogatható.
Itt az Írás nézet van kiválasztva.

Mondjuk, hogy négysoros táblázatot akarsz négy oszloppal, mely egy címsorral kezdődik. Írd be HTML nézetben a következő kódot. Magyarán jelöld ki az alábbi szöveget, másold ki (Ctrl+C), majd illeszd be egyszerű szövegként (Ctrl+Shift+V) ahová akarod:
<table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
<tr>
<th>1. oszlop címe</th>
<th>2. oszlop címe</th>
<th>3. oszlop címe</th>
<th>4. oszlop címe</th>
</tr>
<tr>
<td>1. cella</td>
<td>2. cella</td>
<td>3. cella</td>
<td>4. cella</td>
</tr>
<tr>
<td>1. cella</td>
<td>2. cella</td>
<td>3. cella</td>
<td>4. cella</td>
</tr>
<tr>
<td>1. cella</td>
<td>2. cella</td>
<td>3. cella</td>
<td>4. cella</td>
</tr>
<tr>
<td>1. cella</td>
<td>2. cella</td>
<td>3. cella</td>
<td>4. cella</td></tr>
</table>
A fenti kódot én is beszúrtam HTML nézetben közvetlenül az után a bekezdés után, melyet most olvasol. Az eredmény kb. így néz ki Írás nézetben is:

1. oszlop címe 2. oszlop címe 3. oszlop címe 4. oszlop címe
1. cella 2. cella 3. cella 4. cella
1. cella 2. cella 3. cella 4. cella
1. cella 2. cella 3. cella 4. cella
1. cella 2. cella 3. cella 4. cella

Ha több vagy kevesebb sort akarsz, akkor növeld vagy csökkentsd az alábbi egységek számát a HTML kódban:
<tr>
<td>1. cella</td>
<td>2. cella</td>
<td>3. cella</td>
<td>4. cella</td></tr>
Az oszlopok számát értelemszerűen a következő elemek számának változtatásával tudod módosítani:
<td>n. cella</td>
A címsor nem kötelező, vagyis a következő blokk elhagyható:
<tr>
<th>1. oszlop címe</th>
<th>2. oszlop címe</th>
<th>3. oszlop címe</th>
<th>4. oszlop címe</th>
</tr>
Megteheted, hogy a kész táblázat kódját tartalommal együtt előre elkészíted egy szövegszerkesztőben, felülírva a rizsát (mely egyébként teljesen fölösleges, csak azért írtam oda, hogy tudd, hova kell írni), és a fenti módon beviszed a bejegyzésedbe.
De talán kényelmesebb az "üres" táblázatot bevinni HTML nézetben, és aztán Írás nézetben kitölteni, ahogy én tettem az alábbi konkrét esetben:

Szimuláció neve HTML5 Java Flash
Ágyúgolyó futam
Alfa-bomlás

Arányjáték

Atomtömeg és izotópok

A táblázat celláit úgy használod, ahogy az oldal egyéb részeit. Linkelheted a szövegeket vagy képeket tehetsz oda, ahova akarsz. Ha túl szélesnek találod a táblázatot (100%), keskenyítheted a kód első sorában. Amint látod, 60%-ra véve, a szöveg automatikusan tördelődik, hogy elférjen a cellában. A háttér színét hupikékről (#99ffff) világos szürkére (#eeeeee) állítottam, stb.:

Szimuláció neve
Ágyúgolyó futam
Alfa-bomlás

Arányjáték

Atomtömeg és izotópok

Miközben a táblázatba képeket szúrtam URL megadásával, a Blogger figyelmeztetést adott, hogy probléma van a HTML kóddal. Felajánlotta a javítást. Elfogadtam. Nem tudom, mi volt a hiba, de megszűnt. Talán az volt a baja vele, hogy nem https protokoll szerinti helyen volt a kép, hanem szimpla http helyen. A Google újabban pikkel az ilyenre, és hamarosan "Nem biztonságos | http://..." ajánlást látsz majd ilyenkor a Chrome böngészősorában. Ha Chrome-ot használsz, és felpillantasz, akkor most ezt látod a böngészősor elején: "Biztonságos | https://www.blogger...". 

Végül itt a táblázat, mely alapján a bevezető kép készült:

Elem típusa Beszúrás
Táblázat ✘ nincs!
Kép ✔ van
Videoklip ✔ van
Link ✔ van


1 megjegyzés: