Mnoha autorům webových stránek nestačí puntíky a kolečka,
které se používají jako odrážky v nečíslovaných seznamech. Místo
nich používají malé obrázky, které mají stránce dodat osobitost
a švih. Dejme tomu, že jako odrážku chceme používat šipku
, kterou máme uloženu v souboru
arrow.gif. Většina autorů pak seznam vytvoří
zhruba takto:
<p><img src="arrow.gif" alt="-->">První položka seznamu.</p> <p><img src="arrow.gif" alt="-->">Druhou položku už uděláme delší. Mělo by být vidět, jak ošklivě to vypadá, když se text zalomí do více řádek.</p> <p><img src="arrow.gif" alt="-->"> Třetí a poslední položka seznamu.</p>
Vidíme, že druhá položku seznamu je příliš dlouhá a musela se rozdělit do dvou řádek. Druhá řádka položky pak není odsazena, ale nepěkně zasahuje pod obrázek odrážky. Pomocí tabulek můžeme dosáhnout mnohem lepší výsledek. Vytvoříme tabulku se dvěma sloupci. V prvním bude obrázek šipky a ve druhém vlastní text položky seznamu. Tímto způsobem zabráníme tomu, aby se text přelil pod obrázek šipky. Nesmíme zapomenout na nastavení vhodného způsobu zarovnání buněk tabulky. V ukázce ještě u obrázku explicitně určíme jeho velikost, aby se tabulka mohla vykreslit rovnou. Upravený seznam zapíšeme tedy jako:
<table width="100%"> <tr align="left" valign="baseline"> <td><img src="arrow.gif" alt="-->" height="13" width="15"></td> <td>První položka seznamu.</td> </tr> <tr align="left" valign="baseline"> <td><img src="arrow.gif" alt="-->" height="13" width="15"></td> <td>Druhou položku už uděláme delší. Mělo by být vidět, jak ošklivě to vypadá, když se text zalomí do více řádek.</td> </tr> <tr align="left" valign="baseline"> <td><img src="arrow.gif" alt="-->" height="13" width="15"></td> <td>Třetí a poslední položka seznamu.</td> </tr> </table>
