Priklady na tabulky

Priklad 1:

Jednoducha tabulka s jednoduchym oramovanim, jednoduchymi medzerami medzi bunkami a v ramci buniek. Niektore bunky maju odlisne zarovnavanie.

  <TABLE WIDTH="100%" CELLSPACING="1" CELLPADDING="1" BORDER="1">
  <TR ALIGN="left">
    <TD>bunka 1.1</TD><TD>bunka 1.2</TD>
  </TR>
  <TR ALIGN="right">
    <TD ALIGN="center">bunka 2.1</TD><TD>bunka2.2</TD>
  </TR>
  </TABLE>

Vysledok 1:

bunka 1.1	bunka 1.2
bunka 2.1	bunka 2.2

Priklad 2:

To iste, ale s pridanymi farbami a ukazkou, ako ich pouzit.

  <TABLE WIDTH="100%" CELLSPACING="1" CELLPADDING="1" BGCOLOR="#f0a000"
  BORDER="1">
  <TR ALIGN="left">
    <TD>bunka 1.1</TD>
    <TD BGCOLOR="green">bunka 1.2</TD>
  </TR>
  <TR BGCOLOR="blue" ALIGN="right">
    <TD ALIGN="center"><FONT COLOR="white">bunka 2.1</FONT></TD>
    <TD><FONT COLOR="white">bunka 2.2</FONT></TD>
  </TR>
  </TABLE>

Vysledok 2:

bunka 1.1	bunka 1.2
bunka 2.1	bunka 2.2

Priklad 3:

To iste bez farby a ohranicenia vo vnutri tabulky.

  <TABLE WIDTH="100%" CELLSPACING="0" CELLPADDING="0" BORDER="1"
  FRAME="box" RULES="none">
  <TR ALIGN="left">
    <TD>bunka 1.1</TD>
    <TD>bunka 1.2</TD>
  </TR>
  <TR ALIGN="right">
    <TD ALIGN="center">bunka 2.1</TD>
    <TD>bunka2.2</TD>
  </TR>
  </TABLE>

Vysledok 3:

bunka 1.1	bunka 1.2
bunka 2.1	bunka 2.2

Priklad 4:

Pouzitie hlavickovych buniek a nadpisu tabulky..

  <TABLE WIDTH="100%" CELLSPACING="1" CELLPADDING="1" BORDER="1">
  <CAPTION>Tabulka c. 1</CAPTION>
  <TR BGCOLOR="#f0a000">
    <TH>Stlpec 1</TH><TH>Stlpec 2</TH>
  </TR>
  <TR>
    <TD>bunka 2.1</TD><TD>bunka 2.2</TD>
  </TR>
  <TR>
    <TD>bunka 3.1</TD><TD>bunka 3.2</TD>
  </TR>
  <TR>
    <TD>bunka 4.1</TD><TD>bunka 4.2</TD>
  </TR>
  </TABLE>

Vysledok 4:

Tabulka c. 1
Stlpec 1	Stlpec 2
bunka 2.1	bunka 2.2
bunka 3.1	bunka 3.2
bunka 4.1	bunka 4.2

Priklad 5:

Pouzitie sekcii v tabulke.

  <TABLE WIDTH="100%" CELLSPACING="1" CELLPADDING="1" BORDER="1">
  <THEAD>
    <TR BGCOLOR="#f0a000">
      <TH>Stlpec 1</TH>
      <TH>Stlpec 2</TH>
    </TR>
  </THEAD>
  <TFOOT>
    <TR BGCOLOR="#a0a0a0">
      <TD COLSPAN="2">Toto je pata tabulky</TD>
  </TFOOT>
  <TBODY BGCOLOR="#c0c0c0" ALIGN="center">
    <TR>
      <TD>bunka 2.1</TD><TD>bunka 2.2</TD>
    </TR>
    <TR>
      <TD>bunka 3.1</TD><TD>bunka 3.2</TD>
    </TR>
    <TR>
      <TD>bunka 4.1</TD><TD>bunka 4.2</TD>
    </TR>
  </TBODY>
  <TBODY>
    <TR>
      <TD>bunka 4.1</TD><TD>bunka 4.2</TD>
    </TR>
    <TR>
      <TD>bunka 5.1</TD><TD>bunka 5.2</TD>
    </TR>
    <TR>
      <TD>bunka 6.1</TD><TD>bunka 6.2</TD>
    </TR>
  </TBODY>
  </TABLE>

Vysledok 5:

Stlpec 1	Stlpec 2
Toto je pata tabulky
bunka 2.1	bunka 2.2
bunka 3.1	bunka 3.2
bunka 4.1	bunka 4.2
bunka 4.1	bunka 4.2
bunka 5.1	bunka 5.2
bunka 6.1	bunka 6.2

Priklad 6:

Tabulka s obrazkami (jedna z verzii menu v lavom okne)

  <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1">
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/intro4.gif" ALT="Intro"></TD>
      <TD valign=middle ROWSPAN="15"><IMG SRC="../pictures/MenuIcons/logobar.gif" ALT=""></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/struct4.gif" ALT="Struktura"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/sbs4.gif" ALT="Sprievodca"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/taglist4.gif" ALT="Prikazy HTML"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/text4.gif" ALT="Styly textu"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/links4.gif" ALT="Obrazky a linky"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/colors4.gif" ALT="Farby v HTML"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/chars4.gif" ALT="Specialne znaky v HTML"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/faq4.gif" ALT="FAQ"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/tables4.gif" ALT="Tabulky"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/forms4.gif" ALT="Formulare"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/frames4.gif" ALT="Frames"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/cgi4.gif" ALT="CGI"></TD>
    </TR>
    <TR>
      <TD><IMG SRC="../pictures/MenuIcons/help4.gif" ALT="Ako citat help"></TD>
    </TR>
  </TABLE>

Vysledok 6:

Priklad 7:

Tabulka s ukazkou funkcie parametra ROWSPAN

  <TABLE BORDER="1">
  <TR>
    <TD>Bunka 1.1</TD>
    <TD ROWSPAN="2" VALIGN="middle">Bunka 1.2</TD>
    <TD>Bunka 1.3</TD>
  </TR>
  <TR>
    <TD>Bunka 2.1</TD>
    <-- tu nie je nic, sem presahuje bunka 1.2 -->
    <TD>Bunka 2.3</TD>
  </TR>
  </TABLE>

Vysledok 7:

Bunka 1.1	Bunka 1.2	Bunka 1.3
Bunka 2.1	Bunka 1.2	Bunka 2.3

Priklad 8:

Tabulka s ukazkou funkcie parametra COLSPAN

  <TABLE BORDER="1">
  <TR>
    <TD>Bunka 1.1</TD>
    <TD COLSPAN="2" ALIGN="center">Bunka 1.2</TD>
    <!-- tu nie je nic, bunka 1.2 presahuje az na 1.3 -->
    </TR>
  <TR>
    <TD>Bunka 2.1</TD>
    <TD>Bunka 2.2</TD>
    <TD>Bunka 2.3</TD>
  </TR>
  </TABLE>

Vysledok 8:

Bunka 1.1	Bunka 1.2
Bunka 2.1	Bunka 2.2	Bunka 2.3