HTML Tabuľky



HTML je jazyk, v ktorom sa píše text, ktorý následne zobrazuje internetovy prehliadač. HTML je veľmi jednoduchý jazyk, lebo tam iba píšete čo a ako zobraziť.


V HTML sa dajú robiť aj tabuľky. Robí sa to tak, že sa určuje tabuľka po jednotlivých riadkoch. Začína sa ale tím, že sa deklaruje, že tam bude vobec nejaká tabuľka.


<table>


<caption>názov tabuľky</caption>


</table>


Pomocou tagu <caption> sa deklaruje názov tabuľky.


Na deklarovanie riadku sa používa dvojica tagov <tr></tr>. Následne v riadku deklarujete jednotlivé políčka tabuľky. Tie môžu byť dvoch typov. Viete ich urobiť normálne alebo zvýraznené. Zvýraznené sa väčšinou používajú na nejaké nadpisy riadkov alebo stĺpcov. Obyčajné (riadky) sa definojú pomocou tagov <td></td> a dôležitejšie (na nadpisy) pomocou <th></th>. Medzi ne sa dáva text, ktorý sa má zobraziť v tabuľke.


Príklad:

<table>
<caption>Znamky</caption>

<tr>
<th>Meno</th>
<th>Matematika</th>
<th>Slovencina</th>
</tr>

<tr>
<td>Jano</td>
<td>2</td>
<td>1</td>
</tr>

<tr>
<td>Natalia</td>
<td>2</td>
<td>1</td>
</tr>

</table>

Takáto tabuľka ale vyzerá dosť škaredo. Preto sa tabuľke a jej políčkam pridávajú hranice (border). To sa urobí takto:


table, th, td {


border: 1px solid black;


border-collapse: collapse;


text-align: center;


}


Tá druhá vlastnosť je na to, aby tabuľka mala iba jednu hranicu a nie dve. Pozri si porovnanie.


Tá posledná vlastnosť určuje, že text nachádzajúci v políčkách sa bude náchdzať v strede políčka. Ak by sme chceli aby bol text na lavej strane policka alebo pravej tak by sme napísali za hodnotu left alebo right.


Taktiež sa tam ešte zvykne pridávať padding: 15px; Toto spôsobí, že okolo textu a hranicou políčok bude medzera. (o tomto a aj o ďalších možnostiach štýlovania tabuliek sa dozviete v kategórii CSS).