Lekcia 8






          Niečo o tabuľkách

          Tabuľky sú v jazyku HTML veľmi silným nástrojom, ktorý spehľadní každú WWW stránku. Tabulky sa začali používať až od jazyka HTML 3.0 . Tabuľku definujeme pomocou príkazu <TABLE> a </TABLE>. Atrubút BORDER zabezpečuje zviditeľnenie tabuľky Ďalšími príkazmi, ktoré definujú tabuľku sú <TR>, ktorý definuje riadok tabuľky a príkaz <TD>, ktorý definuje stĺpec tabuľky. Príkazy <TR> a <TD> sú párové, t.j. musia sa ukončiť, pre každý riadok a stĺpec.

Napr.:

<CENTER>
<TABLE BORDER=1>
<TR>
      <TD ALIGN="CENTER">
      Trieda
      </TD>
      <TD ALIGN="CENTER">
      Počet žiakov
      </TD>
      <TD ALIGN="CENTER">
      Triedny učiteľ
      </TD>
</TR>
<TR>
      <TD ALIGN="CENTER">
      4.A
      </TD>
      <TD ALIGN="CENTER">
      35
      </TD>
      <TD ALIGN="CENTER">
      Mgr. Jozef Mrkva
      </TD>
</TR> </TABLE>
</CENTER>
Výsledok:
Trieda Počet žiakov Triedny učiteľ
4.A 35 Mgr. Jozef Mrkva


          Atribúty tabuliek


<TABLE width="šárka tabuľky" cols="počet stĺpcov" colspec="špecifikuje stĺpce" align=[ left | right | center ] border="hrúbka okraja" cellspacing="medzera medzi bunkami" cellpadding="medzera vo vnútry tabuľky" clear=[ left | right ] </TABLE>

width špecifikuje šírku tabuľky, použitím prípony "%" je možné zadávať hodnoty v percentách vzhľadom k šírke okna prehliadača
cols udáva počet stĺpcov tabuľky
colspec udáva širky jednotlivých stĺpcov a ich zarovnania (napr.colspec="L8 C20 R50"; L,R,C špecifikuje zarovnanie stĺcov vľavo, vpravo, vycentrovať)
align umiestnenie objektu vrámci stránky
left vodorovné umiestnenie na ľavý okraj
right vodorovné umiestnenie objektu na pravý okraj
center zarovnie do stredu medzi ľavý a pravý okraj okna
border určuje šírku okraja tabuľky
cellspacing nastavuje veľkosť medzery medzi jednotlivými bunkami tabuľky
cellpadding nastavuje veľkosť medzi okrajom bunky tabuľky a jej obsahom
clear špecifikuje spôsob obtekania tabuľky
left obtekané budú obrázky umiestnené vľavo
right obtekané budú obrázky umiestnené vpravo

<CAPTION align=[ top | bottom | left | right ]>
nadpis tabuľky
</CAPTION>
párová značka špecifikujúca nadpis tabuľky aleboobrázku
align určuje pozícu nadpisu vzhľadom vnútorným okrajom tabuľky
top hore strede
bottom dole strede
left vľavo
right vpravo

<TR align=[ left | right | center | justify ] valign=[ top | middle | bottom ]>
postuponosť tabuľkových polí
</TR>
párová značka špecifikujúca riadok v tabuľke
align definuje spôsob zarovnania textu
left zarovnanie vľavo
right zarovnanie vpravo
center zarovnanie ns stred
justify zarovanie vzhľadom na obidva okraje
valign definuje spôsob vertikálenho zarovania obsahu buniek pre riadok
top zarovnanie k hornému okraju bunky
middle zarovanie do stredu bunky
bottom zarovanie k dolnému okreaju bunky

<TD align=[ left | right | center | justify | char ] valign=[ top | middle | bottom ] bgcolor="farba" width="šírka" colspan="počet zlúčených stĺpcov" rowspan=""počet zlúčených riadkov">
obsah poľa
</TD>
párová značka defunujúca bunku
align určuje spôsob zarovnania textu
left zarovnaie vľavo
right zarovnanie vpravo
center zarovanie do stredu
justify zarovanie vzhľadom na obidva okraje
valign definuje spôsob vertikálenho zarovania obsahu buniek pre riadok
top zarovnanie k hornému okraju bunky
middle zarovnanie do stredu bunky
bottom zarovnanie k dolnému okraju bunky
bgcolor farba pozadia
width určuje šírku daného stĺpca
colspan určuje počet stĺpcov, ktoré majú byť zlúčené do jedného
rowspan určuje počet riadkov, ktoré majú byť zlúčené do jedného



          Využitie tabuliek

          Využitie tabuliek je všestranné. Ale najčastejšie sa využívajú na zobrazenie formulárov a stránok, ktoré nie sú spracované pomocou frame's.

Napr.:

<FORM METHOD = "POST" ACTION=" ">
<CENTER>
<TABLE BORDER=0 WIDTH="500" CELLPADDING=0 CELLSPACING=0>
<TR>
      <TD COLSPAN=2>
      <P ALIGN=JUSTIFY>
      <FONT SIZE=2>Tento Guestbook je vytvorený CGI scriptom, v ktorom môžete zanechať svoj odkaz pre ostatných ľudí. Prosím zadajte nasledovné informácie,</FONT>
      <FONT SIZE=2> a ak máte svoju WWW stránku môžete zadať aj jej adresu aby bol vytvorený hyperlink.</FONT>
      <BR>
      <BR>
      </TD>
</TR>

<TR>
      <TD COLSPAN=2>
      <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
      <TR>
            <TD WIDTH="105">
            <P ALIGN=CENTER>
            <FONT SIZE=2>Meno a priezvisko:</FONT>
            </TD>

            <TD>
            <INPUT TYPE="text" NAME="name" SIZE=40>
            </TD>
      </TR>
      </TABLE>
      </TD>
</TR>

<TR>
      <TD COLSPAN=2>
      <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
      <TR>
            <TD WIDTH="105">
            <P ALIGN=CENTER>
            <FONT SIZE=2>Email:</FONT>
            </TD>

            <TD>
            <INPUT TYPE="text" NAME="from" SIZE=40>
            </TD>
      </TR>
      </TABLE>
      </TD>
</TR>

<TR>
      <TD COLSPAN=2>
      <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
      <TR>
            <TD WIDTH="105">
            <P ALIGN=CENTER>
            <FONT SIZE=2>WWW stránka:</FONT>
            </TD>

            <TD>
            <INPUT TYPE="text" NAME="www" SIZE=40>
            </TD>
      </TR>
      </TABLE>
      </TD>
</TR>

<TR>
      <TD COLSPAN=2>
      <BR>
      </TD>
</TR>

<TR>
      <TD COLSPAN=2>
      <P ALIGN=CENTER>
      <FONT SIZE=2>Prosím zadajte informáciu, ktorú chcete pridať do
      Guestbooku</FONT>
      <BR>
      <TEXTAREA ROWS=3 COLS=60 NAME="comments">
      </TEXTAREA>
      </TD>
</TR>

<TR>
      <TD ALIGN="center">
      <INPUT TYPE="submit" VALUE="Pridaj">
      <INPUT TYPE="reset" VALUE="Vymaž">
      </TD>
</TR>

<TR>
      <TD COLSPAN=2>
      <HR SIZE=2 WIDTH="500">
      </TD>
</TR>
</TABLE>
</CENTER>
</FORM>
Výsledok:

Tento Guestbook je vytvorený CGI scriptom, v ktorom môžete zanechať svoj odkaz pre ostatných ľudí. Prosím zadajte nasledovné informácie, a ak máte svoju WWW stránku môžete zadať aj jej adresu aby bol vytvorený hyperlink.

Meno a priezvisko:

Email:

WWW stránka:


Prosím zadajte informáciu, ktorú chcete pridať do Guestbooku


[top]