FAQ

» Zurück zur Übersicht

Tabelle mit wechselndem Zeilen-Hintergrund

wechselnder Zeilen-Hintergrund

Wenn Sie eine Tabelle mit wechselndem Zeilen-Hintergrund erstellen wollen, benötigen Sie zunächst einen Zähler. Dieser lässt sich ganz einfach definieren durch:
{++COUNTER}
Setzen Sie diesen Zähler an den Anfang der gewünschten Auflistung, beispielsweise:
<table>
{list NEWS}

   {++COUNTER}
   
   <tr>
   <td>{NEWS.TITLE}</td>
   </tr>

{/list}
</table>

Nun legen Sie die beiden Farben fest, die sich abwechseln sollen. In diesem Beispiel verwenden wir zwei unterschiedliche Grauwerte mit den Hexadezimalcodes #F5F5F5 und #EBEBEB. Zur besseren Übersicht werden die beiden Codes in zwei Variablen gespeichert:
{COLOR1='#F5F5F5'}
{COLOR2='#EBEBEB'}

Sie müssen diesen Code in jedem Fall vor die Liste setzen, damit die Informationen dort auch verfügbar sind.

Nun kommt der Modulo-Operator "%" zum Einsatz. Dieser ermittelt den Rest einer Division. Geteilt wird jeweils durch 2. Zur Verdeutlichung wie der Modulo-Operator arbeitet:
1 Modulo 2 = 1
2 Modulo 2 = 0
3 Modulo 2 = 1
4 Modulo 2 = 0
usw.

Was Sie nun tun müssen ist, während der Auflistung zu Prüfen ob das Ergebnis von "COUNTER Modulo 2" 1 oder 0 ist und dementsprechend als Hintergrundfarbe COLOR1 oder COLOR2 verwenden. Dies lässt sich mit einer IF-Abfrage realisieren:
{if COUNTER%2==1}
   {BGCOLOR=COLOR1}
{else}
   {BGCOLOR=COLOR2}
{/if}
Die Hintergrundfarbe ist dann in der Variable BGCOLOR gespeichert und muss nur noch ausgegeben werden. Der Code im Gesamten:
{* Farben definieren *}
{COLOR1='#F5F5F5'}
{COLOR2='#EBEBEB'}

<table>
{list NEWS}

   {++COUNTER}
   
   {* Hintergrundfarbe bestimmen *}
   {if COUNTER%2==1}
      {BGCOLOR=COLOR1}
   {else}
      {BGCOLOR=COLOR2}
   {/if}
	 
   <tr>
   <td bgcolor="{BGCOLOR}">{NEWS.TITLE}</td>
   </tr>

{/list}

</table>