Create a multicolor "progress bar"

See more:

MVC

HTML5

Razor

Most examples of tables show how to add rows. I need to add columns whose colors represent 4 states of completion. What I want to is add fixed width "boxes" side by side whose color depends on the condition.

The following code works when I move the tag to after the foreach loop. But that causes rows to be added.

I get an HTML error "end tag "tr" with no matching start. I'm trying to do this in the code rather than in css.

  <table>
      <colgroup style =" width:50px"></colgroup>

            @{   var rowColor = "D9E6C4"; }
  <tr>
      @foreach (var item in Model.Tasks)
      {
       if (item.SStart == null)
       { rowColor = "#fff8c6"; }
      else if (item.SStart != null && item.SEnd == null)
        { rowColor = "#c0c0c0";}    //="background-color:silver">}
      else if (item.SEnd != null && item.SCert == null)
          { rowColor ="#5cb3ff";}    //"background-color:blue">}
      else if (item.SCert != null)
          { rowColor = "#4aa02c";}     //style="background-color:green">}
//now add the data
            <td  style="background-color:@rowColor;" >
            </td>
   </tr>
       };

  </table>

A newbie so please be explicit with suggestions
Thanks