HTML & CSS pre začiatočníkov (časť 08): Tabuľky (02)

Najprv vám chcem ukázať, ako sa bunky v rade dajú spojiť stĺpcovo. Tým sa dosiahne, že jeden stĺpec v rámci daného riadku sa rozprestiera cez viacero stĺpcov.

Príklad:

<table border="1">
   <tr>
      <th colspan="2"&gt>Termíny</th>
   </tr>
   <tr>
      <td>11.4.2014</td>
      <td>12.4.2012</td>
   </tr>
   <tr>
      <td>13.4.2014</td>
      <td>14.4.2014</td>
   </tr>
   <tr>
      <td>15.4.2014</td>
      <td>16.4.2014</td>
   </tr>
</table>

Prečo tu máme th element? Týmto prvkom sa označujú hlavičkové bunky. Prehliadače tieto bunky zvyčajne zobrazujú tučne a zarovnané na stred. A tu je výsledok v prehliadači:

V úvode elementu th je nastavený atribút colspan. Jeho hodnotou je očakávaný počet stĺpcov, na ktoré sa daná bunka má rozpínať. V každom prípade si dajte pozor, aby počet zadaných stĺpcov bol správny, inak môže dôjsť k nepeknej situácii. V predloženom príklade by sa hlavička označená th mala rozprestrieť cez dva stĺpce. V zvyšných dvoch riadkoch sú opäť obsiahnuté vždy dva riadky.

Ešte jedna poznámka týkajúca sa spojovania riadkov. Počas vývojovej fázy pridajte tabuľke rám (border). Tak hneď uvidíte, či sa spojovanie deje podľa vášho očakávania.

Bunky v stĺpci spojiť riadkovo

Pomocou atribútu rowspan môžete spojiť viacero buniek v stĺpci. Príslušná bunka sa potom rozprestiera v rámci stĺpca cez viac riadkov. Aj tu máme príklad:

<table border="1">
   <tr>
      <th rowspan="2">Farba</th>
      <td>Modrá</td>
   </tr>
   <tr>
      <td>Zelená</td>
   </tr>
   <tr>
      <th rowspan="2">Veľkosť</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

Vo prehliadači to potom vyzerá nasledovne:





Atribútu rowspan je priradená číselná hodnota. Nakoniec to určuje počet riadkov v rámci stĺpca, kam sa daná bunka má rozpínať. Aj tu platí, že počet zadaných riadkov by mal skutočne sedieť.

Bunky súčasne spojiť riadkovo a stĺpcovo

Oba atribúty rowspan a colspan sa dajú kombinovať. Takto sa dajú definovať bunky, ktoré sa počas rozprestierajú cez viac riadkov aj stĺpcov. Aj to sa najlepšie ukáže na príklade.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Byt</th>
      <td>5 izieb</td>
   </tr>
   <tr>
      <td>154 m<sup>2</sup></td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Parkovisko</td>
      <td>Podlahové kúrenie</td>
   </tr>
</table>

V prehliadači to potom vyzerá takto:





Pri kombinácii oboch atribútov je samozrejme dôležitá starostlivosť, aby nakoniec počet buniek sedel.

Popis tabuliek

Jednou veľmi zaujímavou možnosťou, ako urobiť tabuľky zrozumiteľnejšími, je pridanie caption elementu. Pomocou neho môžete pridať nadpis alebo legendu k tabuľke. Obsah caption sa zobrazuje mimo tabuľky, hoci je jeho definícia v tabuľke.

Typické použitie pre caption tu:





Nad tabuľkou je zobrazený tabuľkový nadpis. Štandardne je tento nadpis stredovo zarovnaný nad tabuľkou. To si potom samozrejme môžete individuálne zmeniť pomocou CSS.

Caption element sa definuje priamo za úvodným <table>.

Tu je kompletná syntax napísaného príkladu:

<table border="1">
   <caption>Media-Daten</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Téma</th>
         <th>Zobrazenia</th>
         <th>Trend</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Stav jún 2014</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12.245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11.546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Formátovanie tabuliek

Pre formátovanie tabuliek existovalo v predchádzajúcich verziách HTML mnoho atribútov. Tu sú niektoré príklady vecí, ktoré bolo možné regulovať pomocou atribútov. (Samozrejme, prehliadače stále tieto atribúty podporujú aj dnes. V HTML5 by však už nemali byť používané).

• Vonkajšia rámček

• Vnútorné rámčeky tabuliek

• Šírka a výška

• Mriežkové čiary

• Zarovnanie obsahu buniek

• Farby

• Pozadie

Je zrejmé, že všetko sa dá riadiť prostredníctvom príslušných HTML atribútov. Nasledujúci príklad ukazuje tabuľku, v ktorej boli tieto možnosti široko využité:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Jedna</td>
      <td width="200" bgcolor="#00ffff">Dva</td>
      <td width="200">Tri</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Štyri<</td>
      <td bgcolor="#996666">Päť</td>
      <td bgcolor="#003333">Šesť</td>
   </tr>
 </table>

Pohľad na výsledok poskytuje žiadaný výsledok.

A hoci to vyzerá tak, ako by malo, za týmto vizuálnym efektom je syntax, ktorá je všetko, len nie efektívna. Lepšie je riadiť vlastnosti tabuliek pomocou CSS. Vďaka novým vlastnostiam CSS je teraz možné nielen nahradiť staré atribúty modernou syntaxou. Sú tiež možné ďalšie funkcionality. Napríklad teraz je možné jednoducho striedavo farbiť riadky tabuliek.

V predchádzajúcich časoch HTML a CSS bolo potrebné vykonávať zložité manipulácie kódom, aby sa dosiahli takéto výsledky. Ak využívate možnosti, ktoré dnes CSS poskytuje, je to veľmi jednoducho dosiahnuteľné.

tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}

Ako už bolo viackrát spomenuté, CSS sa budem podrobne venovať v rámci tohto radu.