8. HTML - formátování stránek pomocí tabulek

Jan Sova

Tag <TABLE> byl původně určen pro vytváření běžných tabulek, vkládaných do textu. Autoři stránek však brzo začali tabulky zneužívat k jiným účelům - pro formátování formulářů (to trochu později) a pro formátování celé stránky.

8.1. Formátování stránek pomocí tabulek

Tabulky se běžně používají pro vytvoření efektu vícesloupcového textu. Je tvořen tabulkou s několika (dvě a někdy více) velkými buňkami, umístěnými vedle sebe.

Zdrojový kód takové stránky by mohl vypadat takto:

<HTML>

<HEAD>
 <TITLE>Zpravodaj</TITLE>
</HEAD>
<BODY>

<TABLE WIDTH="100%">
<TR>
 <TD WIDTH="20%">
  <P ALIGN="CENTER">Menu</P>
  <P>Zprávy z domova<BR>
  Zprávy ze zahraničí<BR></P>
  <HR SIZE="1">
  <P ALIGN="CENTER">Servery, které nemáme rádi:</P>
  
  <P>Konec sveta.cz<BR>
  Virová nákaza.cz<BR>
  Používejte ASP.cz<BR></P>
 </TD>
 <TD WIDTH="80%">
  <H1>Vítejte na našem zpravodajském serveru.</H1>
  <P>Zde se dočtete o dění v celé Evropě, nám téměř nic neunikne. Téměř
  všechny zprávy jsou ověřeny a počet stížností a žalob je také téměř 
  nulový. Skoro vždy se naší reportéři z reportáží vrátí a někdy i 
  živí.</P>
 </TD>
</TR>
</TABLE>

</BODY>
</HTML>

Aby byly vaše představy živější, stránku si můžete prohlédnout.

8.1.1. Další příklady

Pokud je vám minulý  nedokonalý příklad málo, múžete si prohlédnout dva již o poznání lepší příklady:

linuxsvet.cz - stránku jsem udělal pro tuto knihu. Myslí, že příklad není potřeba více komentovat, jen bych doporučil trochu jiné barevné ladění, já moc barvám nerozumím.

Assembler dokumentační projekt - úvodní stránka projektu, který jsem založil. Pokud se chcete podívat na domovskou stránku projektu: http://linux.programator.cz/projekty/asm.

8.1.2. Pozor na zobrazení

Musím vás upozornit, na odlišné zobrazení tabulek v různých prohlížečích. Při takovém zneužívání tabulek může mít vliv na zobrazení i zdánlivá maličkost - například zda použijete ukončovací značky </TR>, </TD>, </TH> či nikoli, zda mezi obsahem buňky a ukončovací značkou je mezera, zda buňka obsahuje alespoň &nbsp; a podobně.

8.2. Formátování formulářů

Myslím, že nemusím dlouze vysvětlovat, již jednou jsem o tom psal, tak si myslím, že by to bylo zbytečné.

8.2.1. První příklad

<TABLE>
<TR>
 <TD>Jméno: </TD>
 <TD><INPUT TYPE=TEXT NAME="jmeno" SIZE=30></TD>
</TR>
<TR>
 <TD>Přijmení: </TD> <TD><INPUT TYPE=TEXT NAME="prijmeni" SIZE=30></TD>
</TR>
</TABLE>

Výstup:

Jméno:
Prijmení:

8.2.2. Druhý příklad

<FORM ACTION="heslo.php" METHOD=POST>
<TABLE CELLPADDING=4 RULES=NONE BORDER=1>
<TR>
 <TD>Jméno: </TD>
 <TD><INPUT NAME="jmeno" SIZE="20"></TD>
<TR>
 <TD>Heslo: </TD>
 <TD><INPUT NAME="heslo" SIZE="20"></TD>
<TR>
 <TH COLSPAN=2><INPUT TYPE=SUBMIT VALUE="ODESLAT"></TH>
</TR>
</TABLE>
</FORM>

Výstup:

Jméno:
Heslo: