Table Rows with Alternate Color - Part 1

Carlito · April 10, 2021

For a “zebra-striped” effect on table rows (a table to present content not a table to control an email layout), you would use the CSS :nth-child() selector. But a quick check with a reference tool Can I Email diminish doubts that any ‘fancy’ selector is still scarcely supported by email clients.

Static vs Dynamic Table

Static tables come with a known number of rows and columns and are populated with static text for all. Dynamic, personalized tables may contain different amount of information thus a size of a table to display the content is not known. For a static table you can apply background colors to all odd and even rows. But for dynamicly built tables you need AMPScript.

Even-Odd with AMPscript Part 1

I know at least two cases for building a table using AMPScript. Therefore, it is the part one. Let a sample table display values from a data extension columns. Each recipient receives an email that contains a personalized table. A number of rows varies depending on the number of columns with values. Use AMPScript to proactively check, using the Empty() function, whether content is available to create a row and apply a background color. To determine whether it is an even or an odd row, use the modulo operation.

SET @value1 = AttributeValue("value1")
SET @value2 = AttributeValue("value2")
SET @value3 = AttributeValue("value3")
SET @value4 = AttributeValue("value4")
SET @value5 = AttributeValue("value5")
SET @i = 1
SET @bgColor1 = "#d3d3d3" /*grey for odd rows*/
SET @bgColor2 = "#ffffff" /*white for even rows*/

<table>
%%[ IF NOT Empty(@value1) THEN
     SET @bgColor = Iif(0==Mod(@i, 2), @bgColor1, bgColor2)
]%%
  <tr>
    <td bgcolor="%%=V(@bgColor)=%%">Row number %%=V(@i)=%%</td>
    <td bgcolor="%%=V(@bgColor)=%%">%%=V(@Value1)=%%</td>
   </tr>
%%[ SET @i = Add(@i, 1) ENDIF ]%%

%%[ IF NOT Empty(@value2) THEN
     SET @bgColor = Iif(0==Mod(@i, 2), @bgColor1, bgColor2)
]%%
  <tr>
    <td bgcolor="%%=V(@bgColor)=%%">Row number %%=V(@i)=%%</td>
    <td bgcolor="%%=V(@bgColor)=%%">%%=V(@Value2)=%%</td>
   </tr>
%%[ SET @i = Add(@i, 1) ENDIF ]%%

%%[ IF NOT Empty(@value3) THEN
     SET @bgColor = Iif(0==Mod(@i, 2), @bgColor1, bgColor2)
]%%
  <tr>
    <td bgcolor="%%=V(@bgColor)=%%">Row number %%=V(@i)=%%</td>
    <td bgcolor="%%=V(@bgColor)=%%">%%=V(@Value3)=%%</td>
   </tr>
%%[ SET @i = Add(@i, 1) ENDIF ]%%

%%[ IF NOT Empty(@value4) THEN
     SET @bgColor = Iif(0==Mod(@i, 2), @bgColor1, bgColor2)
]%%
  <tr>
    <td bgcolor="%%=V(@bgColor)=%%">Row number %%=V(@i)=%%</td>
    <td bgcolor="%%=V(@bgColor)=%%">%%=V(@Value4)=%%</td>
   </tr>
%%[ SET @i = Add(@i, 1) ENDIF ]%%

%%[ IF NOT Empty(@value5) THEN
     SET @bgColor = Iif(0==Mod(@i, 2), @bgColor1, bgColor2)
]%%
  <tr>
    <td bgcolor="%%=V(@bgColor)=%%">Row number %%=V(@i)=%%</td>
    <td bgcolor="%%=V(@bgColor)=%%">%%=V(@Value5)=%%</td>
   </tr>
%%[ SET @i = Add(@i, 1) ENDIF ]%%
</table>

Resources:

Twitter, Facebook