Visualforce email template: Conditionally rendering table with 2 columns

Question

I'm trying to conditionally render a table with 2 columns per row. This is what I've tried:

<table width="100%" cellpadding="0" cellspacing="10" border="0">
   <apex:variable var="i" value="{!1}" />
   <apex:repeat value="{!relatedTo.Sample__r}" var="sample">
       <apex:outputText rendered="{!IF(MOD(i,2)=1,true,false)}">
           <tr>
       </apex:outputText>
              <td><apex:OutputText value="{!sample.Id}"/></td>
       <apex:outputText rendered="{!IF(MOD(i,2)=1,true,false)}">
           </tr>
       </apex:outputText>
       <apex:variable var="i" value="{!i+1}"/>
    </apex:repeat>
 </table>

I'm getting this error while trying to save the template:

Error: The element type "tr" must be terminated by the matching end-tag "</tr>".

I know it's complaining about the conditional code that does not include the end tag but how do I resolve this?

Answer 1

If I am getting your requirement correctly, you want to display the data in rows with two columns i.e. each tr should only have two tds

If that is the case, then you should make sure that you end all the tags properly. Also, when using outputText, you should set the escape attribute to false, so that it does not escape its values.

Your visualforce code should be something like below

<table width="100%" cellpadding="0" cellspacing="10" border="0">
    <tr>
        <apex:variable value="{!0}" var="i"/>
        <apex:repeat value="{!relatedTo.Sample__r}"  var="sample">
            <apex:variable var="i" value="{!i +1}"/>
            <apex:outputText rendered="{!IF(MOD(i,2)!=0, true, false)}" value="</tr><tr>" escape="false"></apex:outputText>
                <td width="50%">
                    <apex:OutputText value="{!sample.Id}"/>
                 </td>
                <apex:outputText rendered="{!IF(MOD(i,2)!=0, true, false)}" value="<td/>" escape="false"></apex:outputText>
        </apex:repeat>
    </tr>
</table>