I have this table that contains to {{for ...}}. I cannot fix the problem in the visualization (see attached screenshot). Any help?


-------
<style type="text/css">
.tg  {border-collapse:collapse;border-color:#93a1a1;border-spacing:0;}
.tg td{background-color:#fdf6e3;border-color:#93a1a1;border-style:solid;border-width:0px;color:#002b36;
  font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{background-color:#657b83;border-color:#93a1a1;border-style:solid;border-width:0px;color:#fdf6e3;
  font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-7btt{border-color:inherit;font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
</style>
<div style="float: left;margin-right:10px">
<table class="tg">
<thead>
  <tr>
    <th class="tg-7btt">URN A</th>
    <th class="tg-7btt">URN B</th>
    <th class="tg-c3ow"></th>
  </tr>
</thead>
  <tr>
    <td class="tg-7btt">50 Red balls, 50 Black balls</td>
    <td class="tg-7btt">? Red balls, ? Black balls</td>
    <td class="tg-7btt">Switch</td>
  </tr>
  <tr>
{{ for choice in form.switch }}
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky">{{choice}}</td>
  </tr>
    {{endfor}}
  <tr>
    {{ for value in option_B_values }}
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky">{{ value }} tokens if Chosen Color; 0 tokens if not</td>
    <td class="tg-0pky"></td>
  </tr>
    {{endfor}}
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>

    
</table>
</div>

You are opening a table row once but closing it multiple times:

<tr>
{{ for choice in form.switch }}
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky">{{choice}}</td>
  </tr>
    {{endfor}}

Same here:

<tr>
    {{ for value in option_B_values }}
    <td class="tg-0pky">200 tokens if Chosen Color 0 tokens if not</td>
    <td class="tg-0pky">{{ value }} tokens if Chosen Color; 0 tokens if not</td>
    <td class="tg-0pky"></td>
  </tr>
    {{endfor}}
    
You need to cycle over the table rows.

In general, I am not sure whether you can generate the table columns separately via two loops. I would use a single loop.

Thanks for your answer. I single loop for two {{for ... }}?

Can you put your option_B_values into the labels of your switch form field? If so, you can loop as follows:

    {{ for choice in form.switch }}
        <tr>
            <td>{{ choice }}</td>
            <td>{{ choice.label }}</td>
        </tr>
    {{ endfor }}