Vytlač príspevok
Odporuč príspevok
Bookmark and Share PRIDAŤ NA VYBRALI.SME.SK

HTML pod blogom ... IV. časť

Tentoraz sa bližšie pozrieme trochu náročnejšiu časť a tou sú tabuľky. Ale vopred Vás upozorňujem, aby ste ich nepoužívali na vytvorenie usporiadania stránky, pretože to je nesprávne riešenie.
Na začiatok treba pochopiť, čo vlastne tabuľka je. [...rozmýšľajte...]
Čiže tabuľka sa skladá z riadkov, ktoré sú rozdelené na bunky (priehradky), čím vytvárame stĺpce. No na začiatok to ani veľmi nebolelo, a preto sa presuniem k základom práce s tabuľkou v HTML kóde.

Základ tabuľky:

TAGY POPIS ATRIBÚTY
<table></table> Týmito párovými tagmi musíme oddeliť celú tabuľku od zvyšného textu, na blogu treba dať týmto tagom aj atribút class="txt" pretože ináč sa tabuľka nezobrazí správne (v najlepšom prípade nebudú ladiť farby) Tých je mnoho, a preto Vám odporúčam si radšej pozrieť w3schools
<tr></tr> Definuje jeden riadok v tabuľke (!!!nie jednu bunku!!!) Tu sú použiteľné atribúty, ktoré menia:
pozadie - bgcolor;
zarovnanie - align
<td></td> Definuje jednu bunku v riadku, čiže tanto tag musí byť začatý aj ukončený medzi tagmi <tr> a </tr>. V podstate je dobré si už pred začatím uvedomiť, koľko stĺpcov potrebujete a tomu aj prispôsobiť počet buniek na riadok. Prakticky to isté, ako pri <tr> ale je tu aj atribut width="", ktorý definuje šírku bunky.
<th></th> Takisto, ako <th> definuje jednu bunku v riadku, ale jej text je nejako špecialne formátovaný (najčastejšie hrubším písmom), tak ako Dmiba napísal v komentári, je to table header čiže hlavička tabuľky, ale môžete ju prakticky dať kamkoľvek v rámci tabuľky. Ináč platí to osté, ako o <td> To isté, ako pri <td>

Príklad:

<table class="txt" width="50%" summary="Skúšobná tabuľka" align="left">
      <tr>
        <th width="30%">
          Hlavička A
        </th>
        <th>
          Hlavička B
        </th>
      </tr>
      <tr>
        <td>
          Bunka číslo 1a
        </td>
        <td>
          Bunka číslo 1b
        </td>
      </tr>
      <tr>
        <td>
          Bunka číslo 2a
        </td>
        <td>
          Bunka číslo 2b
        </td>
      </tr>
    </table>
Hlavička A Hlavička B
Bunka číslo 1a Bunka číslo 1b
Bunka číslo 2a Bunka číslo 2b










P.S. Snažil som sa túto náročnú tému, čo najviac zjednodušiť, a preto som robil mnoho škrtov, aby som nepísal zbytočne veľa atribútov, ktoré by boli pre začiatočníka aj tak zbytočné a dúfam, že ma za to pokročilí neukameňujú.
P.S.S. Nevenoval som sa veľmi vizuálnej stránke tabuľky, pretože je to téma sama o sebe, a ak bude ohlas kladný tak sa jej trošku povenujem v ďalšom diely tohto seriálu.

Pre nás | stály odkaz

Komentáre

  1. no skus este pridat podstatnu zalezitost
    <th></th>

    cize table head, to sa obcas hodi ;)
    publikované: 19.05.2005 18:52:06 | autor: dmiba (e-mail, web, neautorizovaný)
  2. OK
    Misia splnená
    publikované: 19.05.2005 21:36:52 | autor: Gnaag (e-mail, web, neautorizovaný)
Pozor, na konci je potreba spočítať neľahkú matematickú úlohu! Inak komentár nevložíme. Pre tých lenivejších je tam tlačidlo kúzlo.



Prevádzkované na CMS TeaGuru spoločnosti Singularity, s.r.o., © 2004-2014