Dynamická změna velikosti tabulek

Tajemství k vytvoření dynamicky přizpůsobivých tabulek tkví v užití procent v zadání šířky tabulek a datových buněk namísto pevných šířek v pixelech. Přidělíme-li tabulce 100% šířku, dává jí to tu samou šířku, jakou právě používá prohlížeč. Změní-li okno prohlížeče velikost, tabulka se přizpůsobí. Procenta musejí být zahrnuta ve všech tabulkách a datových buňkách. Touto technikou dosáhnete:
Automatickou reakci na změny velikosti okna prohlížeče. Můžete vytvořit tabulky, které se dynamicky zvětší anebo změnší dle přání uživatele při plném využití skutečného stavu obrazovky.
Zavděčíte se návštěvníkům. Nezávisle na tom, zda se na stránku dostanou s 640x480 nebo 1024x768, nepřijdou ani o pixel zkrátka, dodáte-li dynamické stránky, které přizpůsobují svoji velikost tak, aby vyhovovali vetšině platforem a velikostí obrazovek - včetně televizí.
Ukázka využití procent:

Nejnovější drby  
Představte si skupinu textu, jehož důležitou součástí jsou nejnovější klípky o webu a těch, kteří ho vytvářejí. A teď si představte, že to musíte projít celé, než se dostanete k pikantním zprávám, na které jste zvědaví, budete znuděni zbytečnou rétorikou a nesrozumitelným žargonem.

Zde je to, co hledáte! Díky ohleduplným návrhářům těchto drobných kanadských žertíků musíte udělat pouze následující: projít si upoutávkový box vlevo pro nejnovější senzace, bez nutnosti procházet 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ější 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>
 Představte si skupinu textu, 
 jehož důležitou součástí jsou nejnovější klípky
 o webu a těch, kteří ho vytvářejí. A teď si představte, 
 že to musíte projít celé, 
 než se dostanete k pikantním zprávám, na které jste zvědaví, 
 budete znuděni zbytečnou rétorikou 
 a nesrozumitelným žargonem.< /font>< /TD>< /TR>
 < TR>< TD width=50% bgcolor=#FFDD33>
 < font face="Verdana, Arial" color=black>
 Zde je to, co hledáte!
 < /font>< /TD>< TD width=50% bgcolor=#110000>
 < font face="Verdana, Arial" color=white size=-1>
 Díky ohleduplným návrhářům těchto drobných kanadských 
 žertíků musíte udělat pouze následující: projít si 
 upoutávkový box vlevo pro nejnovější senzace, bez nutnosti 
 procházet 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>
Takhle to vypadá Začátek
Další
Předchozí