How to create zebra-stripe CSS with TAL?

Question

How can I use Chameleon or Zope Page Templates to easily create CSS zebra striping? I want to add odd and even classes to each row in a table, but using a condition with repeat/name/odd or repeat/name/even looks rather verbose even with a conditional expression:

<table>
   <tr tal:repeat="row rows" 
       tal:attributes="class python:repeat['row'].odd and 'odd' or 'even'">
       <td tal:repeat="col row" tal:content="col">column text text</td>
   </tr>
</table>

This gets especially tedious if you have multiple classes to calculate.

score 36 · Accepted Answer · answered Dec 19 '13 at 18:19

The Zope Page Templates implementation for the repeat variable has an under-documented extra parameter, parity, than gives you the string 'odd' or 'even', alternating between iterations:

<table>
   <tr tal:repeat="row rows" 
       tal:attributes="class repeat/row/parity">
       <td tal:repeat="col row" tal:content="col">column text text</td>
   </tr>
</table>

This is also much easier to interpolate into a string expression:

tal:attributes="class string:striped ${row/class} ${repeat/row/parity}"

This works in Chameleon as well.

How to create zebra-stripe CSS with TAL?

1 Answers1