Tabuľky

Tabuľky sa pri tvorbe webových stránok používajú veľmi dlho. Donedávna sa i layout webu vytváral pomocou tabuliek. Samotné vytvorenie jednoduchej tabuľky je jednoduché. Postačuje nám poznať 3 základné párové značky a to „table“, „tr“ a „td“. Medzi značkami „table“ „/table“ je umiestnená celá tabuľka, značka „tr“ reprezentuje riadok tabuľky a značka „td“ resp. „th“ (pre hlavičku) jednotlivé bunky.

Samozrejme tabuľka by mala pozostávať z troch logických častí hlavičky - „thead“ „/thead“, tela - „tbody“ „/tbody“ a päty - „tfoot“ „/tfoot“. Takéto členenie tabuľky má výhodu najmä pri dlhých tabuľkách. Aj keď ešte stále nájdeme prehliadače, ktoré toto členenie nepodporujú.

Tabuľku môžeme samozrejme aj pomenovať. Názov tabuľku vložíme medzi značky „caption“ „/caption“ hneď za značku „table“. Prehliadače sa postarajú o základné formátovanie, prípadne si môžete vlastný vzhľad tabuľky určiť pomocou CSS.

Ak tvoríte zložitejšiu tabuľku, je dobré použiť starú dobrú metódu - pero a papier. Bunky vedľa seba predstavujú riadky a riadky vytvoria samotnú tabuľku.

Jednoduchý príklad 1:

Po zobrazení nasledovnej tabuľky v prehliadači si všimnite, že je v základnom zobrazení. Vzhľad budeme neskôr určovať prostredníctvom CSS.

<table>
  <tr>
    <th>Priezvisko a meno</th>
    <th>Trieda</th>
  </tr>
  <tr>
    <td>Jozef Kováč</td>
    <td>II.D</td>
  </tr>
  <tr>
    <td>Peter Novotný</td>
    <td>II.C</td>
  </tr>
</table>

Jednoduchý príklad 2:

V tomto príklade využijeme logické členenie tabuľky a tiež nadpis tabuľky.

<table>
  <caption>Tabuľka početnosti podľa výšky</caption>
  <thead>
    <tr>
      <th>Výška - x_i</th>
      <th>Počet žiakov - n_i</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>149</td>
      <td>14</td>
    </tr>
    <tr>
      <td>151</td>
      <td>16</td>
    </tr>
    <tr>
      <td>153</td>
      <td>15</td>
    </tr>
    <tr>
      <td>...</td>
      <td>..</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Spolu</td>
      <td>240</td>
    </tr>
  </tfoot>
</table>

Parametre značky <table>

Element table má viac parametrov, z ktorých najčastejšie používané sú:

• border - vonkajšie ohraničenie tabuľky
• width - šírka tabuľky v pixloch alebo % vzhľadom na šírku elementu, v ktorom sa tabuľka nachádza
• cellpadding - vzdialenosť medzi obsahom bunky a jej hranicou, v pixloch alebo %
• cellspacing - vzdialenosť susedných buniek, medzery medzi bunkami, v pixloch alebo %

Jednoduchý príklad 3:

Použijeme tabuľku z prvého príkladu, doplnenú o parametre.

<table width="500" border="2" cellpadding="5" cellspacing="3">
  <tr>
    <th>Priezvisko a meno</th>
    <th>Trieda</th>
  </tr>
  <tr>
    <td>Jozef Kováč</td>
    <td>II.D</td>
  </tr>
  <tr>
    <td>Peter Novotný</td>
    <td>II.C</td>
  </tr>
</table>

Parametre značky <tr>

Element td má viac parametrov, z ktorých najčastejšie používané sú:

• align - zarovnanie textu horizontálne, hodnoty: left (vľavo), right (vpravo), center (na stred), justify (podľa okrajov)
• valign - zarovnanie textu vertikálne, hodnoty: top (hore), middle (na stred), bottom (dole), baseline (na základnú čiaru riadka)
• char - zarovnanie textu podľa určitého znaku, napr. desatinnej čiarky

Parametre značky <td>, <th>

Využívame predchádzajúce parametre a ešte naviac:

• colspan - zlúčenie buniek horizontálne
• rowspan - zlúčenie buniek vertikálne

Jednoduchý príklad 4:

<table width="500" border="2" cellpadding="5" cellspacing="3">
  <tr align="center">
    <th rowspan="2" valign="middle">Priezvisko a meno</th>
    <th colspan="2">Známka z MAT</th>
    <th rowspan="2" valign="middle">Priemerný prospech zo všetkých predmetov</th>
  </tr>
  <tr align="center">
    <td>1. polrok</th>
    <td>2. polrok</th>
  </tr>
  <tr align="center">
    <td>Jozef Kováč</td>
    <td>2</td>
    <td>5</td>
    <td char=",">3,5</td>
  </tr>
  <tr align="center">
    <td>Peter Novotný</td>
    <td>1</td>
    <td>2</td>
    <td char=",">2,14</td>
  </tr>
</table>

Úloha:

Vytvorte tabuľku, v ktorej použijete všetko, čo sme sa dnes naučili. Inšpirovať sa môžete tabuľkami zo stránky Štatistického úradu.

Tak, základy máme za sebou. Teraz je čas pozrieť na kaskádové štýly.