Predmetová komisia ELT a INF


Učebnica HTML - Tabuľky

HTML - Basic - Tables


« Predchádzajúca Ďalšia kapitola »

Príklad

HTML - Tabuľka

Jabĺčka 44%
Banány 23%
Pomaranče 13%
Ostatné 10%


Vyskúšajte si to sami - Príklady:

Tabuľky
Ako vytvoriť tabuľky v HTML dokumente.

Orámovanie tabuľky
Ako riešiť rôzne orámovanie tabuľky.

(Viac príkladov nájdete v dolnej časti tejto stránky).


HTML Tabuľky

Tabuľky sú definované značkou <table>.

Tabuľka je rozdelená do riadkov (so značkou <tr>) a každý riadok je rozdelený do dátovej bunky (so značkou <td> ). TD je skratka pre "dáta tabuľky," čiže obsah dátovej bunky. Dátové bunky môžu obsahovať text, odkazy, obrázky, zoznamy, formuláre, ďalšie tabuľky atď.

Príklad tabuľky:

<table border="1">
<tr>
<td>riadok 1, bunka 1</td>
<td>riadok 1, bunka 2</td>
</tr>
<tr>
<td>riadok 2, bunka 1</td>
<td>riadok 2, bunka 2</td>
</tr>
</table>

Ako kód HTML vyzerá v prehliadači:

riadok 1, bunka 1 riadok 1, bunka 2
riadok 2, bunka 1 riadok 2, bunka 2

HTML - Ohraničenie tabuliek

Ak nezadáte atribút ohraničenie tabuľka sa zobrazí bez neho. Niekedy to môže byť užitočné, ale častejšie ohraničenia budeme chcieť zobraziť.

<table border="1">
<tr>
<td>riadok 1, bunka 1</td>
<td>riadok 1, bunka 2</td>
</tr>
</table>

HTML hlavičky tabuľky

Informácie v hlavičke v tabuľke sú definované pomocou značky <th>

Všetky prehliadače zobrazia text v <th> značke ako tučné a zarovnané na stred.

<table border="1">
<tr>
<th>Nadpis 1</th>
<th>Nadpis 2</th>
</tr>
<tr>
<td>riadok 1, bunka 1</td>
<td>riadok 1, bunka 2</td>
</tr>
<tr>
<td>riadok 2, bunka 1</td>
<td>riadok 2, bunka 2</td>
</tr>
</table>

Ako kódu HTML nad vyzerá vo vašom prehliadači:

Nadpis 1 Nadpis 2
riadok 1, bunka 1 riadok 1, bunka 2
riadok 2, bunka 1 riadok 2, bunka 2


HTML - Užitočné tipy

Poznámka: Ak súbor HTML obsahuje desať obrázkov - jedenáť súborov je potrebných na správne zobrazenie stránky. Načítavanie obrázkov nejakú dobu trvá, takže môj rada je: Používajte obrázky opatrne.

Poznámka: Pri načítaní webovej stránky, do prehliadača sa obrázok stiahne z webového servera a vloží do stránky. Preto sa uistite, že či je obrazok skutočne stále na pôvodnom mieste vo vzťahu k webovej stránke, inak vaši návštevníci budú mať nefunkčný odkaz na obrázok.


HTML - Ďalšie príklady

Zarovnanie obrázkov
Ako zarovnať obrázok v texte.

Nechajte obrazok plávať
Ako môže obrázok plávať po ľavej alebo pravej strane odseku.

Hhypertextové prepojenie na obrázku
Ako použiť obrázok ako odkaz.


HTML Značky pre obrázky

Tag Popis
<img /> Definuje obrázok
<map> Definuje obrázkovú mapa
<area /> Definuje miesto na klik v obázkovej mape


« Predchádzajúca Ďalšia kapitola »