HTML & CSS pro začátečníky (část 08): Tabulky (02)

Nejprve vám chci ukázat, jak lze buňky ve sloupci spojit dohromady ve sloupcích. Tím se dosáhne toho, že jeden sloupec v daném řádku pokračuje přes více sloupců.

Příklad:

<table border="1">
   <tr>
      <th colspan="2">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>

Dříve slovo o zde použitém prvcích th. Tímto prvkem se označují buňky záhlaví. Prohlížeče tyto buňky obvykle zobrazují tučně a zarovnaně doprostřed. A zde výsledek v prohlížeči:

Uvnitř úvodního prvku th se nastavuje atribut colspan. Jako hodnota je očekáván počet sloupců, přes které by se měla aktuální buňka rozprostírat. Dbejte v každém případě na to, aby počet uvedených sloupců seděl, jinak se to může skončit nehezkými výsledky. V příkladu by se záhlaví označené th mělo rozprostírat přes dvě sloupce. Uvnitř zbývajících dvou řádek jsou pak opět obsaženy dvě buňky.

Jedno varování ještě v souvislosti s propojováním řádků. Během vývoje tabulek přiřaďte tabulkám rámec (border). Tak uvidíte přímo, zda spojení funguje tak, jak chcete.

Buňky ve sloupci spojit řádkově

Pomocí atributu rowspan lze spojit několik buněk ve sloupci dohromady. Daná buňka se pak rozprostírá v rámci sloupce přes několik řádků. I zde opět jeden příklad:

<table border="1">
   <tr>
      <th rowspan="2">Barva</th>
      <td>Modrá</td>
   </tr>
   <tr>
      <td>Zelená</td>
   </tr>
   <tr>
      <th rowspan="2">Velikost</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

V prohlížeči to pak vypadá následovně:





Atributu rowspan se přiřadí číselná hodnota. Ta v konečném důsledku určuje počet řádků v rámci sloupce, přes které by se měla buňka rozprostírat. I zde platí, že počet uvedených sloupců by měl skutečně sedět.

Buňky zároveň spojit řádkově i sloupcově

Obyčejně se atributy rowspan a colspan dají kombinovat. Tak lze definovat buňky, které se zároveň rozprostírají přes více řádků a sloupců. Opět se to nejlépe ukáže na příkladu.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Byt</th>
      <td>5 pokojů</td>
   </tr>
   <tr>
      <td>154 m2</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Parkoviště</td>
      <td>Podlahové vytápění</td>
   </tr>
</table>

Pohled do prohlížeče poskytuje následující výsledek:





Při kombinaci obou atributů je samozřejmě nutná opatrnost, aby nakonec seděl počet buněk.

Popisky tabulek

Velmi zajímavou možností, jak tabulky zpřehlednit, nabízí prvek caption. Tím lze k tabulce přidat nadpis nebo legendu. Obsah caption se zobrazuje mimo tabulky, i když jeho definice probíhá v rámci tabulky.

Zde typické použití caption:





Nad tabulkou je zobrazen název tabulky. Výchozím nastavením je tento nadpis viditelný v centru nad tabulkou. To lze samozřejmě upravit individuálně pomocí CSS.

Prvek caption se definuje přímo za úvodním <table>.

Zde je úplná syntaxe už zmíněného příkladu:

<table border="1">
   <caption>Media-Daten</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Téma</th>
         <th>Zobrazení</th>
         <th>Trend</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">K  červnu 2014</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12.245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12 123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11.546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Navrhování tabulek

Pro návrh tabulek existovalo v dřívějších verzích HTML mnoho atributů. Zde je několik příkladů věcí, které lze pomocí atributů regulovat. (Samozřejmě prohlížeče tyto atributy stále podporují dnes. V HTML5 by však měly být tyto již použité atributy).

• Vnější rámeček

• Vnitřní rámečky tabulek

• Šířka a výška

• Mřížkové linky

• Zarovnání obsahu buněk

• Barvy

• Pozadí obrázků

Uvidíte, že je skutečně vše ovladatelné pomocí příslušných HTML atributů. Následující příklad ukazuje tabulku, ve které byly tyto možnosti hojně využity:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Jeden</td>
      <td width="200" bgcolor="#00ffff">Dva</td>
      <td width="200">Tři</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Čtyři<</td>
      <td bgcolor="#996666">Pět</td>
      <td bgcolor="#003333">Šest</td>
   </tr>
 </table>

Pohled na výsledek poskytuje požadovaný výsledek.

Ale i když to vypadá tak, jak by to mělo vypadat, syntax za tím není vůbec účinná. Lepší je ovládat tabulkové vlastnosti pomocí CSS. Díky novým CSS vlastnostem lze mimochodem nejen nahradit staré atributy moderní syntaxí. Jsou také proveditelné dodatečné funkcionality. Například je nyní možné snadno střídavě zbarvit řádky tabulek.

V dřívějších dobách HTML a CSS bylo někdy třeba provádět obrovské kódové kousky pro dosažení takového výsledku. Jestliže nyní důsledně využijete možností, které CSS nyní nabízí, je takovýto postup velmi snadno proveditelný.

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

Jak již bylo několikrát zmíněno, budu se v rámci této série podrobně věnovat CSS.