Tabulky se v HTML vytvářejí pomocí elementu
table. Tento element může obsahovat element
caption, který slouží k zadání nadpisu
tabulky, a několik elementů tr, které obsahují
jednotlivé řádky tabulky. Tabulky se v HTML zadávají po řádcích.
(Název elementu tr je zkratkou z table
row – řádka tabulky.)
Každá řádka se pak skládá z jednotlivých buněk, které jsou
zadány pomocí elementů td nebo
th. Element td se používá pro
obyčejné buňky a th pro buňky se záhlavím
tabulky. Nejlepší bude malá ukázka tabulky, která zachycuje obraty
dvou výrobků A a B v několika letech:
<table> <tr> <th>Rok</th> <th>Obrat A</th> <th>Obrat B</th> </tr> <tr> <td>1994</td> <td>12,6 mil.</td> <td>3,6 mil.</td> </tr> <tr> <td>1995</td> <td>11,7 mil.</td> <td>5,9 mil.</td> </tr> <tr> <td>1996</td> <td>8,3 mil.</td> <td>9,7 mil.</td> </tr> </table>
Jelikož všechny ukončovací tagy </tr>, </td>
i </th> si prohlížeč snadno může
domyslet, není potřeba je uvádět. Předchozí tabulku můžeme zapsat tedy
mnohem kratším způsobem:
<table> <tr><th>Rok <th>Obrat A <th>Obrat B <tr><td>1994 <td>12,6 mil. <td>3,6 mil. <tr><td>1995 <td>11,7 mil. <td>5,9 mil. <tr><td>1996 <td>8,3 mil. <td>9,7 mil. </table>
Tip
Tabulku je vhodné přehledně formátovat se sloupci pod sebou i v zápisu stránky. Usnadní nám to orientaci v tabulce při jejích opravách.
Varování
Některé prohlížeče (zvláště Netscape Navigator) mají s tabulkami, které nemají buňky a řádky ukončené pomocí odpovídajícího ukončovacího tagu problémy. Pokud chceme, aby se v těchto prohlížečích tabulky zobrazovaly korektně (zvláště ty složitější a navzájem vnořené), nezbude nám nic jiného než všechny tagu pro tvorbu tabulek ukončovat. Tento zvyk se nám vyplatí i při přechodu na XHTML, které vyžaduje uzavírání všech tagů.
Z tohoto důvodu i všechny další ukázky tabulek v knize budou používat uzavřené tagy.
Naše tabulka je sice pěkně vyrovnaná, ale něco jí chybí. Mnohem lépe
by vypadala, kdyby obsahovala mřížku. K tomu stačí uvést
u <table> atribut
border:
<table border> <tr><th>Rok</th> <th>Obrat A</th> <th>Obrat B</th></tr> <tr><td>1994</td> <td>12,6 mil.</td> <td>3,6 mil.</td></tr> <tr><td>1995</td> <td>11,7 mil.</td> <td>5,9 mil.</td></tr> <tr><td>1996</td> <td>8,3 mil.</td> <td>9,7 mil.</td></tr> </table>
Atributu border lze přiřadit hodnotu, která
udává šířku rámečku okolo tabulky v pixelech. Samotné
<table border> v předchozí ukázce je
totožné s <table border="1">. Na
obrázku 20 – „Tabulka s osmibodovým rámečkem“ si můžeme prohlédnout,
jak dopadne naše tabulka, když použijeme šířku rámečku 8
(<table border="8">).
