Zarovnávání obrázků a textu

Tabulky jsou nejen výborným nástrojem pro strukturalizaci, ale rovněž fungují jako dokonalé zarovnávací nástroje. Umožňují návrhářům rozložit elegantně text, obrázky a další údaje. Tato technika se využívá k:
Vylepšení celkového provedení stránky. K vylepšení stránky využijete strukturální vlastnosti tabulek a vytvoříte mnohem atraktivnější stránku.
Vedení oka diváka stránkou. Zarovnání obrázků a textu dovnitř strukturovaných tabulkových buněk a řádků můžete vytvořit atraktivně uspořádaný způsob předávání informací.
Zkoušení různých variant provedení. Tabulky nabízejí flexibilitu strukturovaného "obalu", což unožňuje zkoušení různých provedení.
Zarovnávání obrázků a textu:

1. Vytvořte tabulku.
Navrhněte tabulku se sloupci pro text a obrázky. Nezapomeňte na vytvoření řady "kanálků" k oddělení sloupců tak, aby se jejich obsahy nepřiblížily. Do prázdbých buněk vložte nedělitelnou mezeru  .
         
         
         
         
         

2. Vložte text do tabulky.
Do tabulky vložte textové údaje a zarovnejte je pomocí atributů tabulky. Přidejte pozadí buněk a obrázky.
Poznámky:   Zde jsou některé poznámky, které jsem dal dohromady, aby posloužily jako příklad pro tuto techniku webového návrhu.

Teď chci vložit obrázek do levého sloupce, ale chci, aby byl přesně zarovnán k hornímu okraji s dalším odstavcem. Jak toho docílit?
   
         
  Je to snadné. Umístíme obrázek a text v tomto odstavci do této buňky s vertikálním zarovnáním k hornímu okraji.    
         
    © 2000 Lucie Fialová & Raymond Pirouz    

3. Odstraňte obrysy tabulky.

Poznámky:   Zde jsou některé poznámky, které jsem dal dohromady, aby posloužily jako příklad pro tuto techniku webového návrhu.

Teď chci vložit obrázek do levého sloupce, ale chci, aby byl přesně zarovnán k hornímu okraji s dalším odstavcem. Jak toho docílit?
   
         
  Je to snadné. Umístíme obrázek a text v tomto odstavci do této buňky s vertikálním zarovnáním k hornímu okraji.    
         
    © 2000 Lucie Fialová & Raymond Pirouz    

Pří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>
Zde jsou některé poznámky, které jsem dal dohromady, aby 
posloužily jako příklad pro tuto techniku webového návrhu.
< br>< br>Teď chci vložit obrázek do levého sloupce, 
ale chci, aby byl přesně zarovnán k hornímu okraji 
s dalším odstavcem. Jak toho docílit?< /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 snadné. Umístíme obrázek a text v tomto odstavci 
do této buňky s vertikálním zarovnáním k hornímu okraji.< /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 >
Takhle to vypadá Začátek
Další
Předchozí