98
HTML – ZAČÍNÁME PROGRAMOVAT
</table> </body> </html>
Obrázek 8.8: Pomocí atributu cellpadding lze tabulku zpřehlednit
Když se nám tak pěkně podařilo zvětšit odsazení textu od okraje buňky, jistě by se mohlo hodit umět také zvětšit rozestup jednotlivých buněk. I na to HTML pamatuje. Existuje atribut cellspacing, který udává šířku vnitřní mřížky tabulky. Atribut je opět umístěn u značky <table>. Obrázek ukazuje, jak vypadá tabulka s takto nastavenými atributy: <table border="1" cellspacing="5">
Obrázek 8.9: Vzdálenost mezi buňkami lze změnit atributem cellspacing
8. Tabulky Ukázka elektronické knihy, UID: KOS180820
HTML – ZAČÍNÁME PROGRAMOVAT
99
Nastavení vlastností pro sloupce tabulky
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Sloupce tabulek</title> </head> <body> <h1>Nastavení sloupců v tabulkách</h1> <table border="1"> <col align = "center" width = "100"> <col align = "left" width = "200"> <col align = "right" width = "300"> <tr> <th>Město<th>Příjezd<th>Odjezd <tr> <td>Praha<td>13.05<td>13.15 <tr> <td>Plzeň<td>13.30<td>13.45 <tr> <td>Rokycany<td>14.00<td>14.01 </table> </body> </html>
Tabulky
V HTML 4.0 se poprvé objevila možnost nastavit i vlastnosti sloupců tabulky pomocí nepárové značky <col>. Díky této značce lze nastavit vlastnosti, jako je šířka, způsob zarovnávání apod., pro celý sloupec. Pokud tedy chcete vytvořit tabulku se třemi sloupci tak, aby byl první sloupec zarovnán na střed, druhý doleva a poslední doprava, je značka <col> pro vás to pravé:
Na následujícím obrázku si můžete prohlédnout výsledek:
Obrázek 8.10: Značka col umožňuje nastavit vlastnosti pro celý sloupec
8.2 Formátování tabulek Ukázka elektronické knihy, UID: KOS180820
100
HTML – ZAČÍNÁME PROGRAMOVAT
Sdružování sloupců Jestliže potřebujete nastavit stejné vlastnosti pro více než jeden sloupec, a nechce se vám psát: ... <col align = "right" width = "100"> <col align = "right" width = "100"> <col align = "right" width = "100"> ... můžete sloupce seskupit pomocí značky <colgroup>, a nastavit tak požadované vlastnosti pro všechny najednou. Atributem span se nastaví počet sloupců, na které se nastavení vztahuje. Použití této užitečné značky si ukážeme na jednoduchém příkladu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Sdružování sloupců tabulky</title> </head> <body> <h1>Nastavení sloupců v tabulkách</h1> <table border="1"> <colgroup span="3" align = "right" width="100"> </colgroup> <tr> <th>Město<th>Příjezd<th>Odjezd <tr> <td>Praha<td>13.05<td>13.15 <tr> <td>Plzeň<td>13.30<td>13.45 <tr> <td>Rokycany<td>14.00<td>14.01 </table> </body> </html> Obrázek ukazuje, že se nastavení skutečně projeví na všech sloupcích tabulky:
8. Tabulky Ukázka elektronické knihy, UID: KOS180820