title: Multiple rows into single row and multiple columns
body: <p>I am a young apprentice, looking to build his first application within MVC. I am currently trying to build an admin page, that will show the results of an employee skills matrix.</p>
  
  <p>So the way I am trying to display the information is as follows..</p>
  
  <p><img src="https://i.stack.imgur.com/BCPlQ.png" alt="Ideal Display"></p>
  
  <p>The problem is...the information is in a table as follows...</p>
  
  <p><img src="https://i.stack.imgur.com/P9U8A.png" alt="The issue..."></p>
  
  <p>I cannot for the life of me work out how I do it.</p>
  
  <p>This is my current code for the table. </p>
  
  <pre><code> &lt;div class="tblOverFlow"&gt;
          &lt;table class="table"&gt;
              &lt;thead class="thead-default"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;User&lt;/th&gt;
                      &lt;th&gt;Skill&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;&lt;/th&gt;
                      @foreach (var tableRefDbSet in Model)
                      {
                          &lt;th&gt;@tableRefDbSet.Skill &lt;/th&gt;
                          &lt;th&gt;Interested?&lt;/th&gt;
                      }
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  @foreach (var item in Model)
                  {
                      &lt;td&gt;@item.User&lt;/td&gt;
                      &lt;tr&gt;
                              &lt;td&gt;@item.SkillLevel&lt;/td&gt;
                              if (item.Interested == true)
                              {
                                  &lt;td Style="background-color: green;"&gt;Y&lt;/td&gt;
                              }
                              else
                              {
                                  &lt;td style="background-color: Red;"&gt;N&lt;/td&gt;
                              }
                      &lt;/tr&gt;
                  }
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It still just displays them stacked underneath each other. I've tried rejigging everything around and it just will not do as I want it! </p>
  
  <p>Oh and ignore the inline styles, they're just there to assist me visually!</p>
  
  <p>Whilst I am looking for the answer, a brief explanation of what I've done wrong would also be helpful! </p>