Ako upraviť blog pomocu tabuliek vytvorených v HTML

Niekto sa možno bude čudovať, prečo píšem návod na tvorbu tabuliek prostredníctvom HTML. Možno si ten niekto povie, že netvorí stránku štatistického úradu a nepotrebuje do tabuliek vkladať rôzne číselne hodnoty. Tabuľky sú však dôležitým stavebným prvkov každej dobrej šablóny. Pomocou tabuliek možno jednoducho vyriešiť zdanlivo ťažko riešiteľné úpravy šablóny blogu. Ak ste zvedaví, čo všetko sa dá pomocou tabuliek vytvoriť, čítajte ďalej.

 zdroj

Najskôr sa naučíme vytvoriť jednoduchú základnú tabuľku, z ktorej budeme neskôr odvodzovať vychytávky na náš blog.Tabuľky budeme vytvárať v gadgetoch, ktoré služba Blogger umožňuje pridávať. Nemusíme sa tak báť, že niečo pokazíme v hlavnej šablóne. Ak sa niečo nepodarí, problematický gadget jednoducho odstránime.

ROZLOŽENIE - PRIDAŤ MODUL GADGET - HTML/JAVASCRIPT

Do gadgetu vložíme HTML kód

 <table border="1"cellpading="10" cellspacing="5" bordercolor="darkgrey" bgcolor="lightgrey"> <tr><td>ľavá horná bunka</td><td>pravá horná bunka</td></tr>
<tr><td>ľavá dolná bunka</td><td>pravá dolná bunka</td></tr></table>

Pomocou tohto kódu vytvoríme našu prvú základnú tabuľku

ZNAČKY	VÝZNAM
<table>ďalšie značky a text </table>	vytvorenie tabuľky
<tr> ďalšie značky a text </tr>	riadok tabuľky
<td>text </td>	bunka tabuľky
width="100"	šírka
height="100"	výška
border="1"	šírka rámu
cellpading="10"	vnútorný okraj buniek
cellspasing="10"	vonkajší okraj buniek
bgcolor="lightgrey"	farba pozadia
bordercolor="darkgrey"	farba orámovania
baground="URL adresa obrázka"	obrázok na pozadí
<center>tabuľka</center>	tabuľka zarovnaná na stred
<left>tabuľka</left>	tabuľka zarovnaná vľavo
< right >tabuľka</right >	tabuľka zarovnaná vpravo

Potom, ako sme sa naučili vytvárať základné tabuľky, je dôležité si uvedomiť, že do buniek tabuľky možno vložiť prakticky čokoľvek (text, obrázky, hypertextový odkaz ...). Po tomto uvedomení si, sa nám otvára široká škála možností, ako tabuľky využiť pri úprave šablóny blogu. Stačí nastaviť nulové orámovanie a vložiť niečo zaujímave.

TABUĽKA S OBRÁZKAMI
Tabuľka s obrázkami sa skvelé hodí na umiestnenie lóg sponzorov, obľúbenej kozmetiky, prečítaných kníh a vlastne všetkého možného.


Do gadgetu vložíme HTML kód

<center><table border="0"cellpading="10" cellspacing="5" bordercolor="darkgrey"bgcolor="lightgrey">

<tr><td><img height="30"  width="30" src=" URL adresa obrázka "> </td><td><img height="30"  width="30" src=" URL adresa obrázka "> </td><td><img height="30"  width="30" src=" URL adresa obrázka "> </td></tr>

 <tr><td><img height="30"  width="30" src=" URL adresa obrázka "> </td><td><img height="30"  width="30" src=" URL adresa obrázka "> </td><td><img height="30"  width="30" src=" URL adresa obrázka "> </td></tr>

 <tr><td><img height="30"  width="30" src=" URL adresa obrázka "> </td><td><img height="30"  width="30" src=" URL adresa obrázka "> </td><td><img height="30"  width="30" src=" URL adresa obrázka "> </td></tr>

 </table></center>

A vytvoríme napríklad takúto zaujímavú mozaiku. 

TABUĽKA S OBRÁZKAMI A HYPERTEXTOVÝMI PREPOJENIAMI
Takáto tabuľka sa skvele hodí napríklad na umiestenie lóg sociálnych sietí. 

Do gadgetu vložíme HTML kód

<center><table border="0"cellpading="10" cellspacing="5" bordercolor="white"bgcolor="white">

<tr><td> <a href="odkaz kam bude čitatel po kliknutí presmerovaný"><img height="40"  width="40" src="webova adresa obrazka v nepublikovanom prispevku"/></a> </td><td> <a href="odkaz kam bude čitatel po kliknutí presmerovaný"><img height="40"  width="40" src="webova adresa obrazka v nepublikovanom prispevku"/></a> </td><td> <a href="odkaz kam bude čitatel po kliknutí presmerovaný"><img height="40"  width="40" src="webova adresa obrazka v nepublikovanom prispevku"/></a>  </td></tr> </table></center> 

A vytvoríme napríklad presmerovania na sociálne siete.

 TABUĽKA SO STRÁNKAMI ZAROVNANÝMI NA STRED

Viacero blogov má pod hlavným/titulným obrázkom umiestnené tzv. STRÁNKY, čiže hypertextové prepojenia na určitú stránku blogu. Vo veľkej väčšine prípadov sú tieto stránky nevycentrované, nakoľko služba bloger neumožňuje v tomto prípade vycentrovanie. Dá sa to však vyriešiť pomocou tabuliek.

Do gadgetu vložíme HTML kód

<center><table border="0"cellpading="0" cellspacing="0" bordercolor="white"bgcolor="white">

<tr> <td> <a href="URL ADRESA NA KTORÚ BUDE ČITATEĽ PRESMEROVANÝ">POPIS</a></td> <td>...</td>

<td> <a href="URL ADRESA NA KTORÚ BUDE ČITATEĽ PRESMEROVANÝ">POPIS</a></td>

<td>...</td><td> <a href="URL ADRESA NA KTORÚ BUDE ČITATEĽ PRESMEROVANÝ">POPIS</a>

</td></tr>

</table></center>

A vytvoríme stránky umiestené pekne v strede.

Viac informácií o úprave textu, zarovnaní, vkladaní obrázkov a odkazov sa dozviete po kliknutí na hypertextové prepojenia. Ak vás môj návod inšpiroval, budem rada, ak mi do komentárov vložíte linky vašich blogoch vyzdobených tabuľkami. 

Zdroje:
www.jakpsatweb.cz
www.polopate.jakpsatweb.cz

http://interval.cz/clanky/tipy-pro-tvorbu-tabulek-v-html-kodu/
Schafer, S.(2009): HTML, XHTML a CSS (Bible pro tvorbu WWW stranek)