<td> ... </td> ohraničení obsahu buňky uvnitř řádku tabulky
Značka <td> ohraničuje obsah buňky uvnitř řádku. Buňka může obsahovat texty, obrázky, odkazy atd.
Ukázka tabulky v HTML
<table>
<tbody>
<tr>
<td>Obsah první buňky</td>
<td>Obsah druhé buňky</td>
</tr>
</tbody>
</table>
Vysvětlení dalších značek v tabulce
Slučování buněk pomocí clospan
Pokud potřebujete sloučit dohromady 2 a více buněk tabulky v HTML, tak se k tomu používá atribut clospan. Do číslovky uvedete jen počet buněk, které sloučí.
Ukázka sloučení buněk v HTML
<table>
<tbody>
<tr>
<td clospan="2">Obsah sloučených buněk</td>
</tr>
<tr>
<td>Obsah nesloučených buněk</td>
<td>Obsah nesloučených buněk</td>
</tr>
</tbody>
</table>
Šířka buněk
Buňky v tabulce HTML se standardně snaží přizpůsobit se velikosti obsahu umístěného do <td> (to platí za situace, pokud velikost buňky nedefinujete). Ostatní buňky ve sloupci (např. první buňky) budou mít stejnou šířku, jakou má největší buňka, aby šířka sloupce byla jednotná pro danou tabulku.
Jak určit šířku buněk
Pokud z nějakého důvodu chcete definovat šířku sloupce, tak máte několik možností:
Určit přesnou šířku sloupce přímo do HTML
<table>
<tbody>
<tr>
<td width="50">Obsah první buňky</td>
<td>Obsah druhé buňky</td>
</tr>
</tbody>
</table>
Toto řešení je snadné a činné. Potíž je v tom, že vám dovoluje nastavit jen přesný rozměr. Číslovka, která je tam uvedena znamená počet pixelů a přesně tuto šířku bude celý sloupec mít. Někdy ovšem potřebuje jiné řešení, které je popsáno níže.
Určení šířky pomocí CSS
Pokud se rozhodnete určit šířku pomocí zápisu v CSS, tak získáte více možností. Ideálním řešením je přidělení ID nebo CLASS dané buňce a zápis stylů CSS do externího souboru. Pokud to ale není možné nebo nevíte co to je externí CSS soubor, tak můžete provést zápis i přímo do HTML s tím, že to sice funguje, ale není to správné řešení v případě zkušeného kodéra.
V případě zápisu CSS můžete používat hodnotu jak v pixelech (px), tak třeba i v procentech (%).
Maximální šířka sloupce
<table>
<tbody>
<tr>
<td style="max-width: 200px">Obsah první buňky</td>
<td style="max-width: 50%">Obsah druhé buňky</td>
</tr>
</tbody>
</table>
Minimální šířka sloupců
Píše se obdobně, ale jen s tím rozdílem, že napíšete min-width.
Kam dál
Kurz základy HTML a CSS | Kurz tvorby webových stránek pomocí systému Joomla | Kurz Základy SEO