Ako na tvorbu webu v HTML (4.) - tabuľky

V tejto časti seriálu Vám predstavím používanie tabuliek vo webových stránkach. Tabuľky sa za zapisujú do tágu <table>, ktorý ešte často obsahuje hodnotu border. Hodnota border určuje veľkosť orámovania. Pri zadaní nulovej hodnoty sa orámovanie nevykreslí. Okrem hodnoty border môže ešte obsahovať tieto hodnoty:

V tejto časti seriálu Vám predstavím používanie tabuliek vo webových stránkach.

Tabuľky sa za zapisujú do tágu <table>, ktorý ešte často obsahuje hodnotu border. Hodnota border určuje veľkosť orámovania. Pri zadaní nulovej hodnoty sa orámovanie nevykreslí. Okrem hodnoty border môže ešte obsahovať tieto hodnoty:

* align – zarovnanie tabuľky – center (stred), left (ľavá strana), right (pravá strana) * cellpadding –veľkosť vnútorného okraja buniek v tabuľke v pixeloc * cellspacing – veľkosť vonkajšieho okraja buniek v tabuľke v pixelo * width – šírka tabuľky * height – výška tabuľky * bgcolor – pozadie tabuľky – napr. red, green, blue

V tágu

sa nachádzajú ďalšie tágy a to sú <tr> a <td> . Tág <tr> označuje jeden riadok tabuľky a tág <td> označuje jednu bunku v riadku tabuľky. Z toho vyplýva že sa bude tág <td> zapisovať do tágu <tr>. <table border="1"> <tr> <td>Prvá bunka tabuľky</td> <td>druhá bunka tabuľky</td> </tr> </table> Ak potrebujete sformátovať jednú bunku, môžete použiť hodnoty:

* align – zarovnanie tabuľky – center (stred), left (ľavá strana), right (pravá strana) * valign – vertikálne zarovnanie bunky – top (hore) , center (stred), bottom (dole) * bgcolor – farba pozadia bunky – napr. red, green, blue * background – obrázok na pozadí bunky * width – šírka bunky * height – výška bunky <table border="1"> <tr> <td align="left" valign="top" bgcolor="red" width="100" height="50" > Bunka so zarovnaním naľavo, a s vertikálnym zarovnaním nahor, s farbou pozadia červenou, s šírkou 100 pixelov a s výškou 50 pixelov. </td> </tr> </table> Rozšírené možnosti

Okrem základných tágov ako sú <tr> a <td> existujú aj ďalšie, ktoré sa v tabuľkách využívajú pre lepšie zobrazenie vo webovej stránke. Jedným takým tágom je aj <th>. Zapisuje sa identický ako <td>, ale tág th označuje záhlavie tabuľky a text v ňom napísaný bude zobrazený hrubo. <table border="1"> <tr> <th>Prvá bunka záhlavia tabuľky</th> <th>druhá bunka záhlavia tabuľky</th> </tr> <tr> <td>Prvá bunka tabuľky</td> <td>druhá bunka tabuľky</td> </tr> </table> Ďalším rozširujúcim tágom v tabuľkách je tág <caption>, ktorý predstavuje nadpis tabuľky a zobrazí sa nad celou tabuľkou. <table border="1"> <caption>Názov tabuľky</caption> <tr> <td>Prvá bunka tabuľky</td> <td>druhá bunka tabuľky</td> </tr> </table>

Ak by ste niekedy potrebovali urobiť v jednom riadku jednu bunku s tou istou veľkosťou, ako v druhom riadku majú spoločne dve bunky, existuje na to hodnota colspan, ktorú pridáte do tágu td. Ak potrebujeme zväčšiť veľkosť bunky na veľkosť dvoch buniek hodnota colspan sa bude rovnať dvojke. Ak by to boli tri bunky hodnota bude 3 atď. <table border="1"> <tr> <td colspan="2">Jedna bunka nad dvomi bunkami</td> </tr> <tr> <td>Prvá bunka tabuľky</td> <td>druhá bunka tabuľky</td> </tr> </table>

Alebo ak by ste potrebovali urobiť jednu bunku na viac riadkov existuje na to podobná hodnota rowspan, ktorá spojí jednu bunku do viacerých riadkov. Hodnota sa bude rovnať počtu riadkov, v ktorej sa má jedna bunka zobraziť. <table border="1> <tr> <td rowspan="2">Jedna bunka na dva riadky.</td> <td>bunka tabuľky</td> </tr> <tr> <td>bunka tabuľky</td> </tr> </table>

Záver

A tu už nastal koniec tohto dlhého článku. Ak ste niečo nepochopili, alebo Vám niečo nefunguje, napíšte do komentárov a ja Vám poradím.

Související články

• Ako na tvorbu webu v HTML (5.) - odkazy (14. červenece 08, 11:07)
• Ako na tvorbu webu v HTML (6.) - zoznamy (14. červenece 08, 11:07)
• Ako na Tvorbu webu v HTML (2.) - upravovanie textu (14. červenece 08, 11:07)
• Ako na Tvorbu webu v HTML (3.) - vkladanie obrázkov (14. červenece 08, 11:07)
• Firefox: Pridaná podpora zabudovaného videa z HTML 5 (31. červenece 08, 12:07)
• Ako obísť ban na všetky miestnosti na azete. (21. červenece 08, 05:07)
• Ako na flashové video tutorialy (19. červenece 08, 20:07)