Tvorba tabuliek

Tabuľky sú ďalším často používaným prvkom WWW stránok, pretože poskytujú silné nástroje pre usporiadanie obsahu stránky. Vytvorenie tabuľky:

< TABLE >  - tabuľka
 < CAPTION >Popis tabuľky< /CAPTION >
  < TR > - riadok alebo stĺpec tabuľky
  	< TH >hlavička riadku alebo stĺpca< /TH >
	< TD >bunka tabuľky< /TD >
	...
	< TD >bunka tabuľky< /TD >
  < /TR > 
	...
  < TR > - riadok alebo stĺpec tabuľky
  	< TH >hlavička riadku alebo stĺpca< /TH >
	< TD >bunka tabuľky< /TD >
	...
	< TD >bunka tabuľky< /TD >
  < /TR > 
< /TABLE >

Tag < TD > označuje vlastnú bunku tabuľky. Na jej obsah nie sú kladené žiadné obmedzenia. Môže obsahovať ľubovolné konštrukcie, ktoré sú povolené v tele stránky (dokonca aj ďalšiu tabulku). Tag < TH > určuje bunku tabuľky, ktorá obsahuje hlavičku (nadpis) riadka alebo stĺpca. Jediným rozdielom oproti použitiu tagu < TD > je odlišný spôsob formátovania obsahu bunky.

Každý z tagov má niekoľko atribútov:
Tag TABLE:

ALIGN=left|right|center

- zarovnanie tabuľky doľava, doprava nebo na stred; obtiekanie funguje rovnako ako u obrázkov (viz Obrázky).

BORDER=n

- šírka vonkajšieho rámu tabuľky v bodoch.

CELLSPACING=n

- veľkosť medzery medzi bunkami v bodoch.

CELLPADDING=n

- veľkosť medzery mezi okrajom bunky a jej obsahom v oknách.

WIDTH=n|n%

- šírka tabuľky v bodoch alebo v percentách šírky okna prehliadača.

HEIGHT=n|n%

- výška tabuľky v bodoch alebo percentách výšky okna prehliadača.

BGCOLOR=barva

- farba pozadia tabuľky.

BACKGROUND=jméno_souboru

- obrázok ako pozadie tabuľky.

Tag CAPTION:

POPIS TABUĽKY
FBI Seal

ALIGN=top|bottom

- umiestnenie popisu tabuľky vzhľadom k jej obsahu (nad alebo pod tabuľkou).

Tag TR:

FBI Seal FBI Seal FBI Seal FBI Seal FBI Seal FBI Seal FBI Seal

ALIGN=left|right|center

- zarovnanie obsahu buniek v riadku tabuľky vo vodorovnom smere.

VALIGN=top|bottom|middle

- zarovnanie obsahu buniek v riadku tabuľky vo zvislom smere.

Tagy TD a TH:

Hlavička	FBI Seal
FBI	FBI Seal	FBI Seal
FBI	FBI Seal	FBI Seal

ALIGN=left|right|center

- zarovnanie obsahu bunky vo vodorovnom smere.

VALIGN=top|bottom|middle

- zarovnanie obsahu bunky vo zvislom smere.

ROWSPAN=n

- určuje, koľko riadkov bude bunka zaberať; na následujúcich stĺpcoch je potrebné bunku vynechať, pretože jej miesto je obsadené.

COLSPAN=n

- určuje, koľko stĺpcov bude bunka zaberať; na nssledujúcich riadkoch je potrebné bunku vynechať, pretože jej miesto je obsadené.

WIDTH=n

- určuje šírku bunky v bodoch; všetky bunky v stĺpci by mali mať rovnakú šírku.

HEIGHT=n

- určuje výšku bunky v bodoch; všetky bunky v riadku by mali mať rovnakú výšku.

NOWRAP

- zakazuje automatické zalamovanie riadkov vo vnútri bunky; ručné zalomenie riadkov sa provádza tagom < BR> .

BGCOLOR="farba"

- definuje farbu bunky.

BACKGROUND="meno_súboru_s_obrázkom"

- umiestni na pozadí bunky obrázok.

Příklad:

< TABLE border=1>
< TR>< TH width=10% bgcolor="Aqua" >Hlavička< /TH>
< TD width=50% Colspan=2 bgcolor="Red">FBI Seal< /TD>< /TR>
< TR>< TH width=10% Rowspan=2 bgcolor="Black" background="fbi21.gif">
< FONT color="White" size=+3>FBI< /FONT>< /TH>
< TD width=25% bgcolor="Yellow">
< FONT color="Black">FBI Seal< /FONT>< /TD>
< TD width=25% bgcolor="Fuchsia">FBI Seal < /TD>< /TR>
< TR>< TD width=25% bgcolor="White">
< FONT color="Black">FBI Seal< /FONT>< /TD>
< TD width=25%>FBI Seal< /TD>< /TR>< /TABLE>

Takto to vyzerá

Definovanie voľných priestorov

Využite tabuliek k vytvoreniu počiatočného základu a kostry webovej stránky. Peed vynájdením tabuliek neexistoval žiadny spôsob, ako pevne ovládať spôsob, akým sú vo vzťahu k ostatným objektom na stránke rozmiestňované informáce a obrázky. Pri navrhovaní štruktúry stránky môžete využiť tabuľku k definovaniu bloku voľných priestorov, které budú využité na rozmiestňovanie informácií, grafík a prázdnych priestorov.

Tuto techniku využijete k:

	Založeniu štruktúry návrhu stránky. Tabuľky môžete využiť k definovaniu kostry webu alebo k základnému vymedzeniu hraníc stránky.
	Usporiadánie obrázkov a dát. Tabuľky môžu pomôcť pri organizácii rozmiestnenia obrázkov, dát a voľných priestorov tak, aby zostali zafixované a zobrazovali sa stabilne vo vnútri nadefinovanej štruktúry.
	Vedeniu divákovho zraku cez stránku. Tabuľky môžete kombinovať s medzerujúcimi GIFmi k vytvoreniu voľných priestorov, ktoré pomôžu návštevníkom zamerať sa práve na to, čo si prajete VY, aby uvideli najskôr.

Vytvorenie kostry stránky:
Vytvorte tabuľku, ktorá rozdelí stránku na niekoľko oddielov. Použite ohraničenie buniek tabuľky, aby ste videli výsledok.

Označenie voľných priestorov:
Označte voľné priestory zamenením pevných medzier   za aktuálne názvy popisujúce priestor. Tak zistíte, či je počet riadkov a stĺoupcov dostačujúci k rozmiestneniu obsahu stránky.

LOGO NAVIGÁCIA

PRÁZDNÝ PRIESTOR

PRÁZDNY PRIESTOR OBRÁZOK S ODKAZOM STĹPEC TEXT

PRÁZDNY PRIESTOR OBRÁZOK S ODKAZOM STĹPEC TEXT

COPYRIGHT OBRÁZOK S ODKAZOM STĹPEC TEXT

Rozmiestnite prvky do štruktúry:
Teraz rozmiestnite obrázky, navigáciui a text dovnútra štruktúry, aby ste stránku oživili. Upravte rozmery a atribúty zarovnania. Pridajte prípadne i medzerujúce GIFy.

Domov Katalóg Napíšte

Tým: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Akademia: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

© Lucia Fialová, marec 2000 Rozpočet: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Odstráňte hranice tabuľky:

Domov Katalóg Napíšte

Tým: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Akademia: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

© Lucia Fialová, marec 2000 Rozpočet: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Příklad:

< TABLE width=100% height=100% border=0 cellpadding=5 cellspacing=0>
  < TR>
    < TD align=center rowspan=2 bgcolor=Navy>< IMG src="fbirot.gif" height=65 width=65 align=center>< /TD>
    < TD align=left colspan=2 bgcolor=navy valign=middle>< FONT color=gold size=-1>< B>
      < IMG src="domaci.gif" height=45 width=80>Domov< IMG src="1x1.gif" height=1 width=15> 
      < IMG src="katalog.gif" height=45 width=80>Katalóg< IMG src="1x1.gif" height=1 width=15>
      < IMG src="telefon.gif" height=45 width=80>Napíšte< /B>< /FONT>< /TD>< /TR>
  < TR>
      < TD align=center colspan=2  bgcolor=navy>< /TD>< /TR>
  < TR>
      < TD align=center  bgcolor=navy>< /TD>< TD align=left  bgcolor=navy>
        < IMG src="clenove.gif" height=60 width=90>< /TD>
      < TD bgcolor=navy>< FONT color=gold size=-1>< B>Tým: < /B>< BR>
          Niečo o našom týme. Niečo o našom týme.Niečo o našom týme. 
          Niečo o našom týme. Niečo o našom týme.Niečo o našom týme. 
          Niečo o našom týme. Niečo o našom týme.Niečo o našom týme.< /FONT>< /TD>< /TR>
  < TR>
      < TD align=center  bgcolor=navy>< /TD>< TD align=left  bgcolor=navy>
        < IMG src="skola.gif" height=60 width=90>< /TD>
      < TD bgcolor=navy>< FONT color=gold  size=-1>< B>Akademie: < /B>< BR>
        Niečo o Akadémii. Niečo o Akadémii. Niečo o Akadémii. 
        Niečo o Akadémii. Niečo o Akadémii. Niečo o Akadémii. 
        Niečo o Akadémii. Niečo o Akadémii. Niečo o Akadémii.  
        < /FONT> < /TD>< /TR>
  < TR>
      < TD align=center bgcolor=Navy>< FONT size=-2 color=gold>© Lucie Fialová, < BR>
        duben 2000< /FONT>< /TD>
      < TD align=left  bgcolor=navy>< IMG src="penize.gif" height=60 width=90>< /TD>
      < TD  bgcolor=navy>< FONT color=gold size=-1>< B>Rozpočet: < /B>< BR>
         Niečo o rozpočte. Niečo o rozpočte. Niečo o rozpočte. 
         Niečo o rozpočte. Niečo o rozpočte. Niečo o rozpočte. 
         Niečo o rozpočte. Niečo o rozpočte. Niečo o rozpočte. < /FONT>< /TD>< /TR>
  < /TABLE>

Takto to vyzerá

Zarovnávanie obrázkov a textov

Tabuľky sú nielen výborným nástrojom pre štrukturalizáciu, ale takisto fungujú ako dokonalé zarovnávacie nástroje. Umožňujú návrhárom rozložiť elegantne text, obrázky a ďalšie údaje.

Táto technika se využívá k:

	Vylepšeniu celkového prevedenia stránky. K vylepšeniu stránky využijete štrukturálne vlastnosti tabuliek a vytvoríte oveľa atraktívnejšiu stránku.
	Vedenie oka diváka cez stránku. Zarovnanie obrázkov a textu dovnútra štrukturovaných tabulkových buniek a riadkov môžete vytvoriť atraktívne usporiadaný spôsob odovzdávaniaí informácií.
	Skúšanie rôznych variánt prevedenia. Tabuľky ponúkajú flexibilitu štrukturovaného "obalu", čo umožňuje skúšanie rôzných prevedení.

Zarovnávanie obrázkov a textu:

1. Vytvorte tabuľku.
Navrhnite tabuľku zo stĺpcami pre text a obrázky. Nezabudnite na vytvorenie radu "kanálikov pre oddelenie stĺpcov tak, aby se ich obsahy nepriblížili. Do prázdných buniek vložte nedeliteľnú medzeru  .

2. Vložte text do tabuľky.
Do tabuľky vložte textové údaje a zarovnajte ich pomocou atribútov tabuľky. Pridajte pozadie buniek a obrázky.

Poznámky: Tu sú niektoré poznámky, ktoré som dal dohromady, aby poslúžili ako príklad pre túto techniku webového návrhu.

Teraz chcem vložiť obrázok do ľavého stňlpca, ale chcem, aby bol presne zarovnaný k hornému okraju s ďaľším odstavcom. Ako to urobíme?

Je to ľahké. Umiestnime obrázok a text v tomto odstavci do tejto bunky s vertikálnym zarovnaním k hornému okraju.

© 2000 Lucia Fialová & Raymond Pirouz

3. Odstraňte obrysy tabulky.

Poznámky: Tu sú niektoré poznámky, ktoré som dal dohromady, aby poslúžili ako príklad pre túto techniku webového návrhu.

Teraz chcem vložiť obrázok do ľavého stňlpca, ale chcem, aby bol presne zarovnaný k hornému okraju s ďaľším odstavcom. Ako to urobíme?

Je to ľahké. Umiestnime obrázok a text v tomto odstavci do tejto bunky s vertikálnym zarovnaním k hornému okraju.

© 2000 Lucia Fialová & Raymond Pirouz

Príklad:

< TABLE width=500 border=0 cellpadding=0 cellspacing=0>
  < TR>
    < TD width=125 valign=top align=right bgcolor=navy>< font color=white>Poznámky:< /font>< /TD>
    < TD width=5> < /TD>
    < TD width=300>
Tu sú niekoré poznámky, ktoré som dal dohromady, aby 
poslúžili ako príklad pre túto techniku webového návrhu.
< br>< br>Teraz chcem vložiť obrázok do ľavého stĺpca, 
ale chcem, aby bol presne zarovnaný k hornému okraju 
s ďaľším odstavcom. Ako to docieliť?< /TD>
    < TD width=5> < /TD>< TD width=65> < /TD>
    < /TR>
  < TR>
    < TD width=125 bgcolor=navy> < /TD>
    < TD width=5> < /TD>
    < TD width=300> < /TD>
    < TD width=5> < /TD>< TD width=65> < /TD>
    < /TR>
  < TR>
    < TD width=125 bgcolor=navy valign=top align=right>< IMG src="obraz1.gif" width=125 height=80>< /TD>
    < TD width=5> < /TD>
    < TD width=300 valign=top>
Je to ľahké. Umiestnime obrázok a text v tomto odstavci 
do tejto bunky s vertikálnym zarovnaním k hornému okraju.< /TD>
    < TD width=5> < /TD>
    < TD width=65> < /TD>
    < /TR>
  < TR>
    < TD width=125 bgcolor=navy> < /TD>
    < TD width=5> < /TD>
    < TD width=300> < /TD>
    < TD width=5> < /TD>
    < TD width=65> < /TD>
    < /TR>
  < TR bgcolor=black>
    < TD width=125> < /TD>
    < TD width=5> < /TD>
    < TD width=300>< font color=white>© 2000 Lucie Fialová< /TD>
    < TD width=5> < /TD>
    < TD width=65> < /TD>
  < /TR >
  < /TABLE >

Takto to vyzerá

Vnořované tabulky

Vnorovanie tabuliek sa v podstate nazýva akt umiestnenia jednej tabuľky do druhej. Pri vzájomnom vkladaní tabuliek, umiestnite novú tabuľku medzi tagy < TD > < /TD > inej tabuľky.

Túto techniku využijete k:

	Dosiahnutiu úplného ovládnutia rozmisťnvania obrázkov a textu. Vnorovaním môžete vytvoriť štrukturované "ložiská" informácií vo vnútri tabuľkových buniek.
	Vytvorenie viacstĺpcových ohraničených štruktúr. Navrhnite ohraničenie kombináciou buniek s farebným pozadím a vnorovaných tabuliek.

Vnorované tabuľky:

Vytvorte vonkajšiu tabuľku, ponechajte viditeľné obrysy buniek. Do buniek pre ohraničenie vložte mezerujúci gif 1x1.

Zaplňte vnútorné bunky tabuľky jednou tabuľkou alebo viac tabuľkami.

Odstráňte ohraničenie buniek tabuľky.

Príklad:

< TABLE width=620 border=0 cellpadding=0 cellspacing=0 bgcolor=black>
  < TR>
    < TD colspan=3 width=620 height=10>
      < IMG src="1x1.gif" height=1 width=1 >< /TD>< /TR>
  < TR>
    < TD width=10>< IMG src="1x1.gif" height=1 width=1 >< /TD>
    < TD width=600 height=75>
      < TABLE width=600 height=75 border=0 cellpadding=0 cellspacing=0 >  
        < TR>
          < TD width=75 height=75 bgcolor=lightskyblue>< IMG src="1x1.gif" height=1 width=1 >< /TD>
          < TD width=75 height=75 bgcolor=papayawhip>< IMG src="1x1.gif" height=1 width=1 >< /TD>
          < TD width=75 height=75 bgcolor=lightskyblue>< IMG src="1x1.gif" height=1 width=1 >< /TD>
          < TD width=75 height=75 bgcolor=papayawhip>< IMG src="1x1.gif" height=1 width=1 >< /TD>
          < TD width=75 height=75 bgcolor=lightskyblue>< IMG src="1x1.gif" height=1 width=1 >< /TD>
          < TD width=75 height=75 bgcolor=papayawhip>< IMG src="1x1.gif" height=1 width=1 >< /TD>
          < TD width=75 height=75 bgcolor=lightskyblue>< IMG src="1x1.gif" height=1 width=1 >< /TD>
          < TD width=75 height=75 bgcolor=papayawhip>< IMG src="1x1.gif" height=1 width=1 >< /TD>
          < /TR>< /TABLE>
    < TD width=10>< IMG src="1x1.gif" height=1 width=1 >< /TD>
    < /TR>
  < TR>
    < TD colspan=3 width=620 height=10>< IMG src="1x1.gif" height=1 width=1 >< /TD>
    < /TR>
  < /TABLE>

Takhle to vypadá

Ovládanie umiestnenia toku písma

Vytvorte si šablonu so schopnosťou plného ovládania typografického dizajnu. Použite vnorované tabuľky.

Tuto techniku využijete k:

	Dosiahnutiu úplného ovládnutia rozmiestnovania obrázkov a textu. Vnorováním môžete vytvorit štrukturované "ložiská" informácií vo vnútri tabuľkových buniek.
	Vytvorenie viacstĺpcovej ohraničenej štruktúry. Navrhnite ohraničenie kombináciou buniek s farebným pozadím a vnorovaných tabuliek.

Vytvorenie šablony:

Vytvorte vnorenú tabuľku, ponechajte viditeľné obrysy buniek. Do prázdných buniek vložte nedelitelné medzery  .

Doplňte text do šablony.

Najnovšie drby

Predstavte si skupinu textu, ktorého dôležitou súčásťou sú nejnovšie drby o webe a tých, ktorí ho vytvárajú. A teraz si predstavte, že to musíte prejsť celé, než sa dostanete k pikantným správam, na ktoré ste zvedaví, budete znudení zbytočnou rétorikou a nezrozumiteľným žargónom.

Tu je to, čo hľadáte! Vďaka ohľaduplným návrhárom týchto drobných kanadských žartíkov musíte urobiť iba následujúcu vec: projsť si upútávkový box vľavo pro nejnovšie senzácie, bez nutnosti prechádzať celý nudný text.

Vytvorte farebný okraj okolo textu. Pridejte jeden riadok a stĺpec do hlavnej tabuľky a použite farbu pozadia bunky.

Najnovšie drby

Predstavte si skupinu textu, ktorého dôležitou súčásťou sú nejnovšie drby o webe a tých, ktorí ho vytvárajú. A teraz si predstavte, že to musíte prejsť celé, než sa dostanete k pikantným správam, na ktoré ste zvedaví, budete znudení zbytočnou rétorikou a nezrozumiteľným žargónom.

Tu je to, čo hľadáte! Vďaka ohľaduplným návrhárom týchto drobných kanadských žartíkov musíte urobiť iba následujúcu vec: projsť si upútávkový box vľavo pro nejnovšie senzácie, bez nutnosti prechádzať celý nudný text.

Odstráňte obrysy buniek.

Najnovšie drby

Predstavte si skupinu textu, ktorého dôležitou súčásťou sú nejnovšie drby o webe a tých, ktorí ho vytvárajú. A teraz si predstavte, že to musíte prejsť celé, než sa dostanete k pikantným správam, na ktoré ste zvedaví, budete znudení zbytočnou rétorikou a nezrozumiteľným žargónom.

Tu je to, čo hľadáte! Vďaka ohľaduplným návrhárom týchto drobných kanadských žartíkov musíte urobiť iba následujúcu vec: projsť si upútávkový box vľavo pro nejnovšie senzácie, bez nutnosti prechádzať celý nudný text.

Príklad:

< TABLE width=400 border=0 cellpadding=5 cellspacing=0>
< TR>
  < TD width=125 bgcolor=#aa0000 valign=top align=right>
    < font color=white face="verdana, Arial" size=+2>Nejnovější drby< /font>< /TD>
  < TD width=5 bgcolor=#aa0000> < /TD>
  < TD width=270 bgcolor=#110000>
   < TABLE width=270 cellpadding=10 cellspacing=0 border=0>
     < TR>
       < TD width=270 colspan=2 bgcolor=#110000>
         < font face="Verdana, Arial" color=white SIze=-1>
          Predstavte si skupinu textu, 
	 ktorého dôležitou súčásťou sú najnovejšie drby
         o webu a tých, ktorí ho vytvářajú. A teraz si predstavte, 
         že to musíte prejsť celé, než sa dostanete 
          k pikantným správam, na ktoré ste zvědaví, budete znudění zbytočnou rétorikou a nezrozumiteľným žargónom.
            < /FONT>< /TD>< /TR>
     < TR>
        < TD width=135 bgcolor=#FFDD33>< font face="Verdana, Arial" color=black>
           Tu je to, čo hľadáte!< /font> < /TD>
        < TD width=135 bgcolor=#110000>< font face="Verdana, Arial" color=white size=-1>
           Vďaka ohľaduplným návrhárom týchto drobných kanadských žartíkov
           musíte urobiť iba toto: prejsť si upútávkový 
           box vľavo pre nejnovšie senzácie, bez nutnosti prechádzať 
           celý nudný text. < /font>< /TD>
        < /TR>
     < /TABLE>
   < /TD>
  < TD bgcolor=#aa0000>< /TD>< /TR>
< TR>
  < TD colspan=4 bgcolor=#aa0000> < /TD>
  < /TR>< /TABLE>

Takto to vyzerá

Dynamická zmena veľkosti tabuliek

Tajomstvo k vytvoreniu dynamicky prispôsobivých tabuliek tkvire v užití percent v zadání šířky tabuliek a datových buniek namiesto pevných šírek v pixelech. Ak pridelíme tabuľke 100% šírku, dávs jej to tu samú šírku, akú práve používá prehliadač. Ak zmení okno prehliadača veľikosť, tabuľka sa prispôsobí. Perentá musia býť zahrnuté vo všetkých tabuľkách a datových bunkách.

Touto technikou dosiahnete:

	Automatickú reakciu na zmeny veľkosti okna prehliača. Môžete vytvoriť tabuľky, ktoré sa dynamicky zväčšujú alebo zmenší podľa priania užívateľa pri plnom využití skutočného stavu obrazovky.
	Zavďačíteďačíte sa návštevníkom. Nezávislo na tom, či sa na stránku dostanú s rozlíšením 640x480 nebo 1024x768, neprídu ani o pixel potešenia, ak dodáte dynamické stránky, ktoré prispôsobujú svoju veľkosť tak, aby vyhovovali väčšine platforiem a veľkosti obrazoviek - včítane televízií.

Ukážka využitia percent:

Najnovšie drby

Predstavte si skupinu textu, ktorého dôležitou súčásťou sú nejnovšie drby o webe a tých, ktorí ho vytvárajú. A teraz si predstavte, že to musíte prejsť celé, než sa dostanete k pikantným správam, na ktoré ste zvedaví, budete znudení zbytočnou rétorikou a nezrozumiteľným žargónom.

Tu je to, čo hľadáte! Vďaka ohľaduplným návrhárom týchto drobných kanadských žartíkov musíte urobiť iba následujúcu vec: projsť si upútávkový box vľavo pro nejnovšie senzácie, bez nutnosti prechádzať celý nudný text.

Měňte šířku okna prohlížeče a sledujte tabulku.

Příklad:

< TABLE width=100% border=0 cellpadding=5 cellspacing=0>
  < TR>
    < TD width=30% bgcolor=#aa0000 valign=top align=right>< font color=white face="verdana, Arial" size=+2>Nejnovšie drby< /font>< /TD>
    < TD width=5% bgcolor=#aa0000> < /TD>
    < TD width=60% bgcolor=#110000>
     < TABLE width=100% cellpadding=10 cellspacing=0 border=0>
       < TR>
         < TD width=100% colspan=2 bgcolor=#110000>< font face="Verdana, Arial" color=white SIze=-1>
           Predstavte si skupinu textu,  ktorého dôležitou současťou sú nejnovejšie drby
           o webu a o tých, ktorí ho vytvárajú. A teraz si predstavte, 
           že to musíte prejsť celé, než se dostanete k pikantným správam, na ktoré ste zvedaví, 
           budete unudení zbytočnou rétorikou a nezrozumiteľným žargónom.< /font>< /TD>< /TR>
       < TR>
         < TD width=50% bgcolor=#FFDD33>< font face="Verdana, Arial" color=black>
           Tu je to, čo hľadáte!< /font>< /TD>
         < TD width=50% bgcolor=#110000>< font face="Verdana, Arial" color=white size=-1>
           Vďaka ohľaduplným návrhárom týchto drobných kanadských 
           žartíkov musíte urobiť iba následujúcu vec: prejsť si 
           upútávkový box vľavo pre nejnovejšie senzácie, bez nutnosti 
           prechádzať celý nudný text.< /font>< /TD>
         < /TR>
       < /TABLE>
     < /TD>
    < TD width=5% bgcolor=#aa0000> < /TD>< /TR>
  < TR>
    < TD width=100% colspan=4 bgcolor=#aa0000> < /TD>
    < /TR>
  < /TABLE>

Takto to vyzerá

Zalamovánie písma okolo obrázkov

S využitím tabuliek môžete získať pevnú kontrolu nad spôsobom, ako budú vo vnútri textu stránky rozmiestnené obrázky.

Túto techniku využijete k:

Vytváreniu oveľa zajímavejších riešení. Integráciou písma a obrázkov dosiahnete vzhľad časopisových úvodníkov.

Zvoľte alebo vytvorte obrázok,
který bude na stránke.

Vytvorte tabuľku,
ktorá vytvorí štruktúru stránky. V prvom riadku tabuľky definujte šírky všetkých stĺpcov tabuľky. Vytvorte mezery tvoriace riadky a stĺpce. Zobrazte okraj tabuľky (border=1) a do prázdnych tabuľkových buniek okrem prvého riadku vložte nedeliteľnú medzeru  .

Vložte text
do textových stĺpcov tabuľky. Odstráňte nedeliteľné medzery a nahraďte ich vašim textom. Obrázok môžete umiestniť na pozadí tabuľky a do buňky tabuľky umiestniť popis obrázku.

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že? Neviete? Tak už konečne zapnite svoje zlenivelé mozgy! Stále nič? Na obrázku je to napísané!

Firenze

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že? Neviete? Tak už konečne zapnite svoje zlenivelé mozgy! Stále nič? Na obrázku je to napísané!

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

Odstraňte okraje tabuľky i obrázkov
A tu je výsledok vašeho snaženia.

  Jak krásne miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

  Jak krásne miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že? Neviete? Tak už konečne zapnite svoje zlenivelé mozgy! Stále nič? Na obrázku je to napísané!

Firenze

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že? Neviete? Tak už konečne zapnite svoje zlenivelé mozgy! Stále nič? Na obrázku je to napísané!

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

  Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

Príklad:

< TABLE border=0 width=694 cellspacing=0 cellpadding=0 bgcolor=#FFEBC1>
  < TR>
    < TD width=200>< /TD>< TD width=10>< /TD>
    < TD width=132>< /TD>< TD width=10>< /TD>
    < TD width=132>< /TD>< TD width=10>< /TD>
    < TD wisth=200>< /TD>< /TR>
  < TR>
    < TD width=342 colspan=3>Firenze je Florencie ... < /TD>
    < TD width=10>< /TD>
    < TD width=342 colspan=3>Firenze je Florencie ... < /TD>< /TR>
  < TR>
    < TD width=694 colspan=7>< img src="1x1.gif" width=1 height=5>< /TD>< /TR>
  < TR>
    < TD width=200 >Firenze je Florencie ... < /TD>
    < TD width=10>< /TD>
    < TD width=274 height=225 colspan=3 background="veze1.jpg" valign=top ALIGN=RIGHT>
      < FONT COLOR="WHITE" face="Arial">Firenze&nbsp;&nbsp;< /FONT>< /TD>
    < TD width=10>< /TD>
    < TD width=200 >Firenze je Florencie ... < /TD>< /TR>
  < TR>
    < TD width=694 colspan=7>< img src="1x1.gif" width=1 height=5>< /TD>< /TR>
  < TR>
    < TD width=342 colspan=3>Firenze je Florencie ... < /TD>< TD width=10>< /TD>
    < TD width=342 colspan=3 >Firenze je Florencie ... < /TD>< /TR>
  < TR>
    < TD width=694 colspan=7>< /TD>< /TR>
  < /TABLE>

Takhle to vypadá

Odrážkované zoznamy

Efektnejšie odrážkované a číslované zoznamy vytvorte pomocou tabuliek.

Túto techniku využijete pre:

	Návrh atraktivnych zoznamov. Miesto použitia bežných úvodných symbolov odrážok si sami vytvorte malé obrázky, ktoré použije ako odrážky.
	Prekročenie obmedzenia dané značkami < UL> a < OL>. Nielenže, že HTML zoznamy zaberajú príliš veľa miesta, ale súčasne ponúkajú veľmi malé možnosti úprav.

Vytvorte obrázky,
ktoré použijete ako odrážky alebo čísla. Napríklad

Vytvorte tabuľku,
ktorá vytvorí štruktúru zoznamu. Zobrazte okraj tabuľky (border=1) a do prázdných tabuľkových buniek vložte nedeliteľnú medzeru  .

Vložte text a odrážky
do jednotlivých stĺpcov tabuľky. Odstráňte nedelitelné medzery a nahraďte ich odrážkami a vaším textom.

	Blikajúce odrážky.
	Sú to animované GIFy
	vytvorené v mojom obľúbenom grafickom editore
	Paint Shop Pro a Animation Shop.

	r
	Sú to GIFy
	vytvořené v mojom obľúbenom grafickom editore Paint Shop Pro.

Odstraňte okraje tabuľky i obrázkov
a tabuľku upravte podľa svojej predstavy.

Blikajúce odrážky.

Sú to animované GIFy

vytvorené v mojom obľúbenom grafickom editore

Paint Shop Pro a Animation Shop.

Obyčajné odrážky.

Sú to GIFy

vytvorené v mojom obľúbenom grafickom editore Paint Shop Pro.

Obyčajné odrážky.

Sú to GIFy

vytvorené v mojom obľúbenom grafickom editore Paint Shop Pro.

Obyčajné odrážky.

Sú to GIFy

vytvorené v mojom obľúbenom grafickom editore Paint Shop Pro.

Príklad:

< TABLE  border=1 width=60% cellspacing=2 cellpadding=2 bgcolor=#FFE4BE bordercolor=#FFD3CD bordercolordark=#FFE4BE>
  < TR>
    < TD width=20 valign=top>< IMG src="odd.jpg" width=20 height=20 border=0>< /TD>
    < TD>< FONT size=-1>Obyčajné odrážky.< /FONT>< /TD>< /TR>
  < TR>
    < TD width=20 valign=top>< IMG src="odd.jpg" width=20 height=20 border=0>< /TD>
    < TD>< FONT size=-1>Jsou to GIFy< /FONT>< /TD>< /TR>
  < TR>
    < TD width=20 valign=top>< IMG src="odd.jpg" width=20 height=20 border=0>< /TD>
    < TD>< FONT size=-1>vytvorené v mojom obľúbenom grafickom editore Paint Shop Pro.< /FONT>< /TD>< /TR>
  < /TABLE>

Takto to vyzerá

Odstavce a stĺpce

Pevná medzera je jednou z najľahšie aplikovateľných, užitočných a jednou z mála využívaných prvkov kódovania v HTML. Je to jediný spôsob, kterým dosiahneme za sebou sa opakujúce sa medzery mezi slovami alebo pred nimi, bez toho aby sme použili predformátovaný text.
S využitím tabuliek potom môžeme špecifikovať viacstĺpcové rozloženie, ktoré nelenže pomáha usporiadať obsah, ale taktiež ho umožní opticky rozdeliť zoskupením textu do príjemnejších menších stĺpcov ktoré sú vhodnejšie ako veľké bloky.

Túto techniku využijete k:

	Prevedenie viacstĺpcovej sadzby. Webová prezentácia dosiahne typografického vzhľadu úvodníka.
	Vnesenie porádku do stránky a vylepšenie typografického prevedenia. Štrukturováním a organizáciou typografie môžete vylepšiť celkový vzhľad stránky.

Vytvoríme stĺpcovú šablónu
použitím tabuľky. Zvýrazníme okraje a vytvoríme mezeru tvoriace stĺpce. Do buniek vložíme pevnú medzeru  .

Vyplníme stĺpce textom.
Do buniek vložíme text. K vytvoreniu odsadenia prvého riadka odstavca použijeme pevnú medzeru  . Nad tabuľku pridáme nadpis príspevku.

Nadpis príspevku

10. augusta 2000

    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.
    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.

    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.
    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.

    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.
    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.

Odstráňte okraje tabuľky
a doplňte farby na pozadí tabuľky.

Nadpis príspevku

10. augusta 2000

    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.
    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.

    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.
    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.

    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.
    Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.

Príklad:

< FONT size=+2 color=orange>< b>Nadpis příspěvku< /b>< /FONT>
< BR>< BR>
< TABLE width=720 border=0 CELLSPACING=0 CELLPADDING=0 bgcolor=floralwhite>
< TR>
  < TD width=50 bgcolor=orange> < /TD>
  < TD width=10 bgcolor=orange> < /TD>
  < TD width=200 bgcolor=orange> < FONT size=-1 color=white>< b>10. novembra 2000< /b>< /FONT>
  < TD width=20 bgcolor=orange> < /TD>< TD width=200> < /TD> 
  < TD width=20> < /TD> < TD width=200> < /TD> 
  < TD width=20> < /TD>< /TR> 
< TR>
  < TD width=50> < /TD>< TD width=10> < /TD> 
  < TD width=200>< p align=justify>< FONT size=-2> < b>    Bla, bla, bla ... < /b>< /FONT>< /p>< /TD> 
  < TD width=20> < /TD> < TD width=200>< p align=justify>< FONT size=-2> < b>    Bla, bla, bla ... < /b>< /font>< /p>< /TD> 
  < TD width=20> < /TD> < TD width=200>< p align=justify>< FONT size=-2> < b>    Bla, bla, bla ... < /b>< /font>< /p>< /TD> 
  < TD width=20> < /TD>< /TR> 
< TR>
  < TD width=720 colspan=8> < /TD>< /TR>
< /TABLE>

Takto to vyzerá

LOGO	NAVIGÁCIA
LOGO	PRÁZDNÝ PRIESTOR
PRÁZDNY PRIESTOR	OBRÁZOK S ODKAZOM	STĹPEC TEXT
PRÁZDNY PRIESTOR	OBRÁZOK S ODKAZOM	STĹPEC TEXT
COPYRIGHT	OBRÁZOK S ODKAZOM	STĹPEC TEXT

	Domov Katalóg Napíšte

		Tým: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
		Akademia: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
© Lucia Fialová, marec 2000		Rozpočet: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Poznámky:		Tu sú niektoré poznámky, ktoré som dal dohromady, aby poslúžili ako príklad pre túto techniku webového návrhu. Teraz chcem vložiť obrázok do ľavého stňlpca, ale chcem, aby bol presne zarovnaný k hornému okraju s ďaľším odstavcom. Ako to urobíme?

		Je to ľahké. Umiestnime obrázok a text v tomto odstavci do tejto bunky s vertikálnym zarovnaním k hornému okraju.

		© 2000 Lucia Fialová & Raymond Pirouz


Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?		Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že? Neviete? Tak už konečne zapnite svoje zlenivelé mozgy! Stále nič? Na obrázku je to napísané!	Firenze		Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že? Neviete? Tak už konečne zapnite svoje zlenivelé mozgy! Stále nič? Na obrázku je to napísané!

Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?		Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?


Jak krásne miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?		Jak krásne miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že? Neviete? Tak už konečne zapnite svoje zlenivelé mozgy! Stále nič? Na obrázku je to napísané!	Firenze		Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že? Neviete? Tak už konečne zapnite svoje zlenivelé mozgy! Stále nič? Na obrázku je to napísané!

Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?		Jak krásné miesto. Vidíte majestátnu kupolu Dómu s Giottovou zvonicou a kapličkou Svatého Ducha? Ani by ste nepovedali, že mezi týmito prekrásnými architektonickými skvostami preteká rieka Arno. A teraz už viete, o ktoré mesto ide, že?

	Obyčajné odrážky.
	Sú to GIFy
	vytvorené v mojom obľúbenom grafickom editore Paint Shop Pro.

	Obyčajné odrážky.
	Sú to GIFy
	vytvorené v mojom obľúbenom grafickom editore Paint Shop Pro.

10. augusta 2000
Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky. Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.	Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky. Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.	Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky. Sem príde váš text. Zvoľte vhodný font a veľkosť. Napíšete sem toľko textu, koľko sa ho sem vojde a pritom text bude rozdelený do stĺpcov. Môžeme taktiež zvoliť farbu pozadia textu podľa svojej vôle a to všetko použitím tabulky.