60.19.13.5.1. Pruhovaná tabulka

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; }