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 A1 | Bunka B1 | Bunka C1 |
Bunka A2 | Bunka B2 | Bunka 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).
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 1 | Bunka 2 | |
Bunka A2 | Bunka B2 | Bunka C2 |
Podobným spôsobom sa spája aj viacej buniek vo zvislom smere, ale cez atribút ROWSPAN=
.
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>
.
Medzi ďalšie atribúty bunky patrí napríklad:
COLSPAN
- zlučovanie viacerých buniek vo vodorovnom smereROWSPAN
- zlučovanie viacerých buniek vo zvislom smereALIGN
- zarovnávanie textu (left, center, right, justify, char)VALLIGN
- zarovnávanie vo vertikálnom smere (top, middle, bottom, baseline)BGCOLOR
- farba pozadiaWIDTH
- šírka, číselna hodnotaHEIGHT
- výška, číselná hodnotaBACKGROUND
- umiestnenie súboru obrázka pre pozadie
Väčšina týchto atribútov platí aj pre značku <TR>
.
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>
Januar | Februar | Marec | April | Maj |
---|---|---|---|---|
10 | 15 | 7 | 25 | 5 |
Použitie značky <TABLE>
už bolo vysvetlené, takže sa budeme venovať iba jeho atribútom.
ALIGN
- zarovnávanie (left, right, center)WIDTH
- šírkaBORDER
- vonkajšia hranica tabuľkyCELLSPACING
- medzera medzi hranicami bunkyCELLPADDING
- medzera medzi obsahom bunky a jej hranicou (čiarou)BGCOLOR
- farba pozadiaBACKGROUND
- umiestnenie súboru obrázka pre pozadieZIP
s menom v tvare: kalendar-vasepriezvisko.zip
na ftp://server/incoming