[linux] Tip: alternerende kleuren bij rijen in een tabel

[Cecil Westerhof]

In vervolg op mijn vraag i.v.m. achtergrond kleuren printen, hier een
mogelijke toepassing.
Ik heb in mijn style-sheet o.a. het volgende opgenomen:

        table.asiel {
                border:                        6px inset #8B8378;
                margin-left:            auto;
                margin-right:           auto;
        }
        table.asiel th {
                background-color:       silver;
                color:                          black;
        }
        table.asiel td {
                background-color:       #FFFFFF;
                border:                         1px solid black;
                color:                          black;
        }
        @media screen {
        	table.asiel tr.d0 td {
                	background-color:       #FCF6CF;
        	}
        }
        @media print {
        	table.asiel tr.d0 td {
                	background-color:       #999999;
        	}
        }
        table.asiel tr.d1 td {
                background-color:       #FFFFFF;
        }

Door middel van @media kan ik een verschillende back-ground color
instellen voor het scherm en de printer. Op een gewone printer zie je
geel niet echt goed. (Is er trouwens een manier om te zorgen dat bij een
gewone printer silver wordt gebruikt en bij een kleurenprinter geel?)

Met code als onderstaand kun je dan de tabel definieren:
        <table class="asiel" border="2">
          <tr>
            <th colspan=4>Gesorteerd op: vertrek</th>
          </tr>
          <tr>
            <th>Naam</th>
            <th>Omschrijving</th>
            <th>Hok</th>
            <th>Vertrek</th>
          </tr>
          <tr class="d0">
            <td>Eerste hond</td>
            <td>xxx</td>
            <td><div style="text-align:center;">A4</div></td>
            <td><div style="text-align:center;">0000-00-00</div></td>
          </tr>
          <tr class="d1">
            <td>Tweede hond</td>
            <td>xxx</td>
            <td><div style="text-align:center;">B5</div></td>
            <td><div style="text-align:center;">0000-00-00</div></td>
          </tr>
          <tr class="d0">
            <td>Derde hond</td>
            <td>xxx</td>
            <td><div style="text-align:center;">A2</div></td>
            <td><div style="text-align:center;">0000-00-00</div></td>
          </tr>
          <tr class="d1">
            <td>Vierde hond</td>
            <td>xxx</td><td><div style="text-align:center;">N19</div></td>
            <td><div style="text-align:center;">0000-00-00</div></td>
          </tr>
        </table>

Door i.p.v. continue te switchen tussen d1 en d0, zou je bijvoorbeeld
iedere vijf rows kunnen werken  met d0. Op die manier heb je een iets
rustiger beeld, maar is de tabel nog steeds makkelijker te lezen.

-- 
Cecil Westerhof <CecilWesterhof op xs4all.nl>