Pokud nám nevyhovuje standardní čárami rozdělená tabulka, můžem použít design tabulk bez úplně bez čar či jen s veknovním orámováním kdy jednotlivé řádky jsou opticky odděleny odlišnou barvou podkladu. Taková tabulka je často lépe čitelná než čárami rozdělená. Pro dosažení efektu budem potřebovat rozlišovat liché a sudé řádky. Potřebuji dosáhnout tedy následujícího html kódu.
<table rules="none" align="center">
<tr class="even"><td>první řádek</td><tr>
<tr class="odd"><td>druhý řádek</td><tr>
.
.
.
<tr class="even"><td>předposlední řádek</td><tr>
<tr class="odd"><td>poslední řádek</td><tr>
</table>
Já používám následující šablonu.
row=0 echo "<table rules=\"none\" align=\"center\">" for i in první druhý třetí čtvrtý pátý; do let row++ if (($row%2)); then echo '<tr class="odd">' else echo '<tr class="even">' fi echo "<td>$row</td>" echo "<td>$i</td>" echo '</tr>' done echo "</table>"
Ačkoliv bych mohl vložit kódy barev přímo do tagů <tr>
, použil jsem raději třídy a barvy definuji v Style Sheetu takto:
# Pruhovaná tabluka tr.odd { background-color: #dfd; } tr.even { background-color: #eee; }