Príručka HTML a CSS: Tabuľky

Začíname s HTML					Ján Guniš, PF UPJŠ Košice
1	2	3	4	5	6	7	8	9	10

Tabuľky (table)

Tabuľky sú efektívnym nástrojom na formátovanie pozície objektov na stránke (okrem iného, ako napríklad tabuľka ako taká). Pomocou tabuliek môžete simulovať text v stĺpcoch. Nevytvárajte však príliš veľké tabuľky. Údaje v tabuľke sa zobrazia až vtedy, keď sa načíta obsah celej tabuľky.

Základné definícia tabuľky vyzerá nasledovne:

HTML kód prehliadač


      <TABLE BORDER="1" WIDTH="100%">

        <TR>

           <TD>1</TD>

           <TD>2</TD>

        </TR>

        <TR>

           <TD>3</TD>

           <TD>4</TD>

        </TR>

        <TR>

           <TD>5</TD>

           <TD>6</TD>

        </TR>

      </TABLE>

1	2
3	4
5	6

Značka TABLE označuje začiatok a koniec tabuľky.
Značka TR označuje začiatok a koniec riadku.
Značka TD označuje začiatok a koniec bunky (stĺpec v danom riadku)
Značku BORDER môžeme vynechať, hranice tabuľky budú neviditeľné.
Značku WIDTH môžeme vynechať, tabuľka sa svojou šírkou prispôsobí vpísaným objektom.

Formátovanie tabuľky

HTML kód prehliadač

<TABLE BORDER=

"3" WIDTH="80%"
      ALIGN="center" CELLSPACING="4" CELLPADDING="3"
      BGCOLOR="#808080">

<TR>

         <TD>1</TD>

         <TD>2</TD>

       </TR>

       <TR>

         <TD>3</TD>

        
      <TD>4</TD>

        
      </TR>

       </TABLE>

1	2
3	4

Jednotlivé atribúty pre table sú:

BORDER - šírka čiary v tabuľke v pixeloch
WIDTH - šírka tabuľky (v pixeloch alebo v % stránky)
ALIGN - zarovnanie tabuľky na stránke (LEFT, CENTER, RIGHT)
CELLSPACING - vzdialenosť medzi dvoma bunkami
CELLPADDING - vzdialenosť medzi okrajom bunky a jej obsahom
BGCOLOR - farba pozadia tabuľky

Formátovanie buniek

HTML kód

<TABLE BORDER="1"> <TR BGCOLOR="#FF0000" ALIGN="center" VALIGN="top"> <TD HEIGHT="60" WIDTH="50" VALIGN="top" ALIGN="left">1</TD> <TD HEIGHT="60" WIDTH="50" BGCOLOR="#00FF00">2</TD> <TD HEIGHT="60" WIDTH="100">3</TD> </TR> <TR> <TD HEIGHT="30" WIDTH="50" ALIGN="right" VALIGN="bottom">4</TD> <TD HEIGHT="50" WIDTH="50" ALIGN="left" VALIGN="middle">5</TD> <TD HEIGHT="30" WIDTH="100" ALIGN="center" VALIGN="top">6</TD> </TR> </TABLE>

prehliadač

1	2	3
4	5	6

Jednotlivé atribúty pre TR sú:

ALIGN - zarovnanie v horizontálnom smere (LEFT, RIGHT, CENTER, JUSTIFY)
VALIGN - zarovnanie vo vertikálnom smere (TOP, MIDDLE, BASELINE, BOTTOM)
BGCOLOR - farba pozadia bunky

Spájanie buniek

HTML kód

prehliadač

1		2		3
4	5	6
7	8	9	10
11

Jednotlivé parametre pre TD sú:

ROWSPAN - umožňuje spojiť viac buniek ležiacich pod sebou v jednom stĺpci do jednej bunky
COLSPAN - umožňuje spojiť viac buniek ležiacich vedľa seba v jednom riadku do jednej bunky
WIDTH - určuje šírku danej bunky v pixeloch alebo v % (z celej tabuľky)
HEIGHT - určuje výšku danej bunky v pixeloch alebo v % (z celej tabuľky)
ALIGN - zarovnanie v horizontálnom smere (LEFT, RIGHT, CENTER, JUSTIFY)
VALIGN - zarovnanie vo vertikálnom smere (TOP, MIDDLE, BASELINE, BOTTOM)
BGCOLOR - farba pozadia bunky

Ak je to príliš nepochopiteľné, pozrite si ešte nasledujúce príklady

HTML kód

<TABLE BORDER="1" WIDTH="100%"> <TR> <TD WIDTH="50%">1</TD> <TD WIDTH="50%" ROWSPAN="2">2</TD> </TR> <TR> <TD WIDTH="50%">3</TD> </TR> </TABLE>

prehliadač

1	2
2

HTML kód

<TABLE BORDER="1" WIDTH="100%"> <TR> <TD WIDTH="50%">1</TD> <TD WIDTH="50%">2</TD> </TR> <TR> <TD WIDTH="100%" COLSPAN="2">3</TD> </TR> </TABLE>

prehliadač

1	2
3

Nadpis v tabuľke (je automaticky tučným písmom a zarovnaný do stredu)

HTML kód

<TABLE BORDER="1" WIDTH="100%"> <TR WIDTH="100%"> <TH COLSPAN="2">Hlavný nadpis</TH> </TR> <TR> <TH>Podnadpis1</TH> <TH>Podnadpis2</TH> </TR> <TR> <TD WIDTH="50%">1</TD> <TD WIDTH="50%">2</TD> </TR> </TABLE>

prehliadač

Hlavný nadpis
Podnadpis 1	Podnadpis 2
1	2

Značka TH ohraničuje nadpis (je to v podstate náhrada za TD)