Učebnica

per aspera ad astra

Nástroje používateľa

Nástoje správy stránok


html:tabulky

Tabuľky

Tabuľky slúžia na usporiadanie údajov v HTML dokumente do pravidelných stĺpcov a riadkov podľa ich príslušnosti k nim. K zhotoveniu úspešnej tabuľky stačia tri značky, <TABLE> <TR> <TD>. Jedna z najjednoduchších tabuliek s rozmerom 3×2 bunky môže byť takáto:

<table>
  <tr><td>Bunka A1</td><td>Bunka B1</td><td>Bunka C1</td></tr>
  <tr><td>Bunka A2</td><td>Bunka B2</td><td>Bunka C2</td></tr>
</table>

Výsledok toho bude podobný tomuto:

Bunka A1Bunka B1Bunka C1
Bunka A2Bunka B2Bunka C2

Každá tabuľka sa musí skladať minimálne z hlavnej párovej značky <TABLE>. Následne bežné bunky sa rozdelia na riadky cez značku <TR> (Table Row) v ktorej sa riadok rozdelí na bunky značkou <TD> (Table Data).

Zlučovanie buniek

Viac pozdĺžnych buniek môžete spojiť do jeden cez atribút COLSPAN = :

<table>
  <tr><td colspan=2>Bunka 1</td><td>Bunka 2</td></tr>
  <tr><td>Bunka A2</td><td>Bunka B2</td><td>Bunka C2</td></tr>
</table>

Výsledok toho bude podobný tomuto:

Bunka 1Bunka 2
Bunka A2Bunka B2Bunka C2

Podobným spôsobom sa spája aj viacej buniek vo zvislom smere, ale cez atribút ROWSPAN=.

Zarovnávanie obsahu bunky

Obsah bunky môže byť zarovnávaní vľavo, vpravo poprípade na stred, Ukážeme si to na príklade:

<table>
  <tr align=center><th>Sobota</th><th>Nedela</th></tr>
  <tr><td align=left>Vlavo</td><td align=right>Vpravo</td></tr>
</table>
Sobota Nedela
Vlavo Vpravo

V príklade ste si mohli všimnúť, že ak som chcel zarovnať všetky bunky v prvom riadku, zarovnávanie som nastavil pre celý riadok v jednej značke <TR>. Zarovnávanie, ako aj vačšinu iných atribútov môžete používať pre všetky tri základne značky tabuľky <TR> <TH> <TD>.

Ďalšie atribúty bunky

Medzi ďalšie atribúty bunky patrí napríklad:

  • COLSPAN - zlučovanie viacerých buniek vo vodorovnom smere
  • ROWSPAN - zlučovanie viacerých buniek vo zvislom smere
  • ALIGN - zarovnávanie textu (left, center, right, justify, char)
  • VALLIGN - zarovnávanie vo vertikálnom smere (top, middle, bottom, baseline)
  • BGCOLOR - farba pozadia
  • WIDTH - šírka, číselna hodnota
  • HEIGHT - výška, číselná hodnota
  • BACKGROUND - umiestnenie súboru obrázka pre pozadie

Väčšina týchto atribútov platí aj pre značku <TR>.

Hlavička

Pri vytváraní tabuľky môžete využiť aj značku špeciálne určenú na hlavičky (TH).

<table>
  <tr><th>Januar</th><th>Februar</th><th>Marec</th><th>April</th><th>Maj</th></tr>
  <tr><td>10</td><td>15</td><td>7</td><td>25</td><td>5</td></tr>
</table>
JanuarFebruarMarecAprilMaj
10157255

TABLE

Použitie značky <TABLE> už bolo vysvetlené, takže sa budeme venovať iba jeho atribútom.

  • ALIGN - zarovnávanie (left, right, center)
  • WIDTH - šírka
  • BORDER - vonkajšia hranica tabuľky
  • CELLSPACING - medzera medzi hranicami bunky
  • CELLPADDING - medzera medzi obsahom bunky a jej hranicou (čiarou)
  • BGCOLOR - farba pozadia
  • BACKGROUND - umiestnenie súboru obrázka pre pozadie

Úloha

  1. Vytvorte mesačný kalendár (štvorec) kde vo zvislej polohe sú hlavičky - týždne, a vo vodorovnej hlavičky - dni v mesiaci.
  2. Úplne prvý riadok tabuľky bude názov mesiaca, pozadie sivé, písmo Arial, tučné a kurzíva.
  3. Nezabúdajte na orámovanie buniek.
  4. Kalendár bude pre rok 2000 + dvojčíslie vášho čísla pracoviska a pre mesiac vášho narodenia.
  5. Pozadie sobôt bude zelené, nedele a sviatky budú modré a tučné písmo
  6. Deň vášho narodenia (samozrejme, rok narodenia neberiete v úvahu) bude: pozadie tmavo červené a text biely, kurzíva.
  7. Pri návrhu kalendára môžete použiť dáta z http://calendar.zoznam.sk
  8. Úlohu odovzdajte najneskôr do 12:00 formou odoslaného zabaleného súboru v formáte ZIP s menom v tvare: kalendar-vasepriezvisko.zip na ftp://server/incoming
  9. :!: Nezabúdajte dodržiavať štruktúru HTML súboru.

Príklad kalendára

html/tabulky.txt · Posledná úprava: 2016/07/28 16:07 (externá úprava)