Stránky neboli dlhú dobu aktualizované. Môžu obsahovať nepresné alebo neaktuálne informácie.
Používaním tejto stránky súhlasíte s používaním cookies.
Hľadanie
Rozšírené vyhľadávanie
TOP 7 - stránky
Napaľovacie programy - 104 969x
Free Pascal - Úvod - 59 080x
Free Pascal - Začiatky - 38 813x
Lazarus - Kreslenie - 36 781x
Internetové prehliadače - 32 371x
3D grafické programy - 31 652x
Free Pascal - Podmienky - 30 305x
Nové v diskusii
Free Pascal - Cykly - štvrtok 31.3.
Lazarus - Začíname - piatok 25.3.
Anketa - streda 2.3.
Navigácia: Tvorba Webu > HTML - Tabuľky

HTML - Tabuľky

Na Webe sa tabuľky používajú na dva účely - stĺpcový design alebo bežné zobrazenie údajov (ako v knihách).

Jednoduchá tabuľka

Základom je párový tag TABLE. Doňho vkladáme riadky TR a stĺpce TD. Tých môže byť aj viacej.

<table>
 <tr>
  <td>Bunka 1</td>
  <td>Bunka 2</td>
 </tr>
 <tr>
  <td>Bunka 1</td>
  <td>Bunka 2</td>
 </tr>
</table>

Zobrazí sa asi takto:

Bunka 1 Bunka 2
Bunka 3 Bunka 4

Nevyzerá to presvedčivo? Skúsime vykresliť okolo tabuľky rámček. Použijeme atribút BORDER tagu TABLE. Hodnotou je šírka rámčeka.

<table border="1">
...
Bunka 1 Bunka 2
Bunka 3 Bunka 4

Ďalšími dôležitými atribútmi značky TABLESUMMARY (popis tabuľky pre nevizuálne prehliadače) a WIDTH (šírka tabuľky).

Tag TR má zas atribúty ALIGN (zarovnanie - left, center, right, justify, char) a VALIGN (vertikálne zarovnanie - top, middle, bottom, baseline).

Členenie

V riadku tabuľky TR sa môže nachádzať aj tag TH - záhlavie.

<table summary="Test" border="1">
 <tr>
  <th>Záhlavie</th>
 </tr>
 <tr>
  <td>Bunka</td>
 </tr>
</table>
Záhlavie
Bunka

Iný spôsob je použitie tagu CAPTION. Ten sa nachádza priamo v TABLE.

<table summary="Test" border="1">
 <caption>Nadpis</caption>
 <tr>
  <td>Bunka</td>
 </tr>
</table>
Nadpis
Bunka

Existujú aj značky THEAD (hlavička), TBODY (telo) a TFOOT (päta tabuľky). V súčasnosti však nie sú podporované prehliadačmi, takže sa nimi nebudeme zaoberať.

Zoskupovanie

Niekedy sa zíde, aby bunka presahovala cez viac riadkov. Skúsime tagu TD priradiť atribút ROWSPAN s hodnotou 2.

<table summary="Test" border="1">
 <tr>
  <td rowspan="2">Presahujúca</td>
  <td>Bunka 2</td>
 </tr>
 <tr>
  <td>Bunka 3</td>
 </tr>
</table>
Presahujúca Bunka 2
Bunka 3

Podobne sa správa aj COLSPAN, ale bunka bude presahovať cez stĺpce.

<table summary="Test" border="1">
 <tr>
  <td colspan="2">Presahujúca</td>
 </tr>
 <tr>
  <td>Bunka 2</td>
  <td>Bunka 3</td>
 </tr>
</table>
Presahujúca
Bunka 2 Bunka 3
Hodnotenie
1 2 3 4 5 (ako v škole)
Priemerná známka: 2,47
Diskusia k tejto stránke Ak chceš dať predsa len 2 samostatné tabuľky vedľa...
Prejsť do diskusie»
2005-2012, Matúš Sulír, matus.sulir (zav) gmail bodka com. Gen.: 0,0631 s. Valid XHTML, CSS.