FreeSH

<!– /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-parent:”"; margin:0cm; margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} h3 {mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; mso-outline-level:3; font-size:13.5pt; font-family:”Times New Roman”; font-weight:bold;} h5 {mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; mso-outline-level:5; font-size:10.0pt; font-family:”Times New Roman”; font-weight:bold;} p {mso-margin-top-alt:auto; margin-right:0cm; mso-margin-bottom-alt:auto; margin-left:0cm; mso-pagination:widow-orphan; font-size:12.0pt; font-family:”Times New Roman”; mso-fareast-font-family:”Times New Roman”;} @page Section1 {size:595.3pt 841.9pt; margin:70.85pt 70.85pt 70.85pt 70.85pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} –>

Pri práci s HTML, pri návrhu designu (vzhľadu) a rozloženia stránky existuje niekoľko spôsobov ako je možné toto zobrazovanie spracovať.

Tým najjednoduchším sú tabuľky. Tabuľky však využijeme aj pri bežnej práci so stránkou, ak chcete niečo priehľadne zobraziť, porovnávať a podobne.

Povieme si teda niečo bližšie o tabuľkách.

Najjednoduchšia tabuľka

Skúsime si vytvoriť najjednoduchšiu tabuľku na ktorej si ukážeme a vysvetlíme syntax zápisu. Tabuľka bude obsahovať 2 stĺpce a 2 riadky.

<table >
<tr> <td>Obsah kolonky</td> <td>ďalšia kolonka</td> </tr>
<tr> <td>lvľavo dole</td> <td>vpravo dole</td> </tr>
</table>

Ako vidíme, najprv definujeme párový tag (značku) table. Potom už nasleduje samotné vykreslenie tabuľky.

Ďalej vidíme tag tr ktorý nám definuje riadok tabuľky. Opäť sa jedná o párovú značku. Po definovaní riadku nasleduje  párový tag td Ten už definuje konkrétne stĺpce.

Uvedený kód teda zobrazí 2 stĺpce a 2 riadky ako je spomenuté vyššie. Vyskúšajte si to.

V ďalšom príklade si vykreslíme tabuľku ktorá bude obsahovať aj hlavičku, teda riadok kde bude definované čo bude v konkrétnych stĺpcoch. Použijeme už aj ďalšie hodnoty tagu table.

<table border=”2″ cellpadding=”5″ cellspacing=”4″>
<tr><th>Názov</th><th>Cena</th><th>Poznámka</th></tr>
<tr><td>Čokoláda</td><td>658,60 €</td><td>oriešková</td></tr>
<tr><td>Mäso</td><td>22,- €</td></tr>
</table>

Poďme si teda vysvetliť čo jednotlivé položky znamenajú. Ako prvé je definovaný tag table ktorý obsahuje hodnotu border. Keď si zoberiete anglický slovní zistíte že border je…. je rám, orámovanie. To znamená že táto hodnota určuje či tabuľka bude orámovaná alebo nie a akou hrubou čiarou. To udáva tá dvojka (v pixeloch).

Ďalej je atribút cellpadding s hodnotou 5. Tento atribút určuje vnútorný rámik buniek (okraj, v pixeloch), teda ako ďaleko bude text od rámčeka.

Cellspacing je zase vonkajší okraj buniek.

Úloha: Vyskúšajte čo tento kód zobrazí a skúste sa pohrať s nastaveniami border, cellspacing, cellpadding.

Nový tag ktorý je v tomto príklade je tag th. Ten je podobný ako td avšak konkrétne definuje že sa jedná o titulok tabuľky. Ostatný zápis je už totožný s tým čo sme si povedali predtým.

Ako vidíte v tabuľke je vynechaná bunka. To je síce možné, ale neodporúča sa to, lebo prehliadač potom túto bunku nezobrazí.

V poslednom príklade si zobrazíme trošku zložitejšiu tabuľku. Nebude to štandardná tabuľka riadok/stĺpec alebo riadky budú zasahovať do stĺpcov a podobne.

Tak najprv kód:

<table border=”1″ cellpadding=”10″>
<caption>Hlavička</caption>
<tr><td>A</td> <td>B</td> <td rowspan=”2″>C</td> </tr>
<tr> <td colspan=”2″>D</td> </tr>
<tr> <td colspan=”3″>E</td> </tr>
</table>

Všimnime si hlavne tagy rowspan a colspan atribúty. Hovoria, koľko buniek priestoru zaberá jedna bunka.

Rowspan=2 znamená, že bunka C zaberá 2 riadky, colspan zas znamená že bunka zaberá cez 3 stĺpce.

Je ťažko vysvetľovať zápisy takýchto tabuliek. Jediné čo môžem odporučiť je sadnúť si, zobrať napríklad aj tento kód a skúšať, skúšať a skúšať až kým to nepochopíte a nezačne Vám to fungovať ako sami chcete. Keď to pochopíte sami nebudete s tým mať problémy.

V zápise je ešte jeden tag a to caption. Ten sa používa málo, ale spomenul som ho. Definujem nám text, nápis, hlavičku nad tabuľkou.

Úloha:

Vytvorte tabuľku s hlavičkou (prvý riadok) kde budú hodnoty Predmet, Známka pol rok a Známka koniec roka. Hrúbka rámika 2 pixely, hrúbka vnútorného rámika 2 pixely.

Do tejto tabuľky potom doplňte všetky Vaše predmety (do príslušného stĺpca), známku z pol roka a konca roka toho predmetu.

V ďalšom diely si povieme niečo o formátovaní tabuliek.