title: How can I loop through my table to display contents side by side in MVC Razor View?
body: <p>Hi i want help in putting contents side by side.</p>
  
  <p>Right now i can display content separately in left side and right side. But i need to display records from database. For this i am using foreach loop. So how i need to display is 1st records on left side and 2nd record on right side and 3rd on left and so on. How can i loop through like this.</p>
  
  <p>I am stucked here.I need help..</p>
  
  <p>I am using this code but all the contents are displaying as i told earlier.</p>
  
  <pre><code>   &lt;body&gt;
     @foreach (var item in Model)
  
          {
    &lt;!-- Main Table(You can define padding accordingly) --&gt;
      &lt;table width="80%" border="0" cellspacing="0" cellpadding="5"&gt;
    &lt;tr&gt;
    &lt;td width="50%"&gt;
  
     &lt;!-- Table on left side --&gt;
    &lt;table width="100%" border="0" cellspacing="0" cellpadding="1"&gt;
      &lt;tr&gt;
    &lt;td&gt;
    &lt;span class="Title"&gt;APP&lt;/span&gt;
    &lt;br/&gt;
      &lt;div class="listRowA" onmouseover="this.className='listRowAHover'" onmouseout="this.className='listRowA'"&gt;
      &lt;div class="listPageCol"  onclick="location.href='../Home/ControlPanel'"&gt;
      &lt;span class="listlCol1"&gt;
  
            &lt;br /&gt;
               @item.ID
              &lt;/span&gt;
        &lt;span class="listCol2"&gt;&lt;img src="../Content/Images/20_thumb.jpg" width="281" height="200" border="0" alt="image"  /&gt;&lt;/span&gt;
  
  
           &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/td&gt;
  
        &lt;/tr&gt;
  
      &lt;tr&gt;
      &lt;td&gt;&amp;nbsp;&lt;/td&gt;
     &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&amp;nbsp;&lt;/td&gt;
     &lt;/tr&gt;
      &lt;tr&gt;
     &lt;td&gt;&amp;nbsp;&lt;/td&gt;
     &lt;td&gt; &lt;/td&gt;
     &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
    &lt;!-- END --&gt;
    &lt;/td&gt;
    &lt;td width="50%"&gt;
  
    &lt;!-- Table on right side --&gt;
    &lt;table width="100%" border="0" cellspacing="0" cellpadding="1"&gt;
    &lt;tr&gt;
  
     &lt;td&gt;
    &lt;div class="listRowA" onmouseover="this.className='listRowAHover'"  onmouseout="this.className='listRowA'"&gt;
      &lt;span class="listCol2"&gt;&lt;img src="../Content/Images/20_thumb.jpg" width="281"  height="200" border="0" alt="image"  /&gt;&lt;/span&gt;&lt;/div&gt;
      &lt;/td&gt;
       &lt;/tr&gt;
     &lt;tr&gt;
    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td&gt;&lt;/td&gt;
     &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr&gt;
    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
    &lt;td&gt; &lt;/td&gt;
   &lt;td&gt;&amp;nbsp;&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/table&gt;
    &lt;!-- END --&gt;
     &lt;/td&gt;
    &lt;/table&gt;
  
  &lt;!-- END OF MAIN TABLE --&gt;
      }
   &lt;/body&gt;
  </code></pre>