Displaying information in a grid on my ASP.NET MVC page - asp.net-mvc

Question

There is a "Weekly Monitoring tool" on the intranet I'm working on that displays the following information (supposedly) in a grid : the company, the employee (name), his expected work time, and his current weekly activity.
The Data is saved and filtered week by week, it's all sent to my WeeklyMonitoring.aspx view.
The issue is that I can't seem to find a way to display it as a grid, cleanly, separating each information to make it easier to read.
Here is the relevant part of my View :
<table width="300" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>Company</th>
<th>Employee</th>
<th>Expected Time</th>
<th>Activity</th>
</tr>
<%
int i = 0;
foreach (var name in ViewBag.Names)
{
if ((string)ViewBag.Names[i] != null)
{ %>
<td><%= (string)ViewBag.Company[i]%></td>
<td><%= (string)ViewBag.Names[i]%></td>
<td> --- </td>
<td><%= (string)ViewBag.RecTime[i]%></td>
<%} %>
<%i++; %>
<%
}
%>
</table>
It does display it as a board, separating the information by spaces, how may I create a clean looking grid as it is supposed to be?

Answer 1

JQuery DataTables in an awesome plugin for this and it's very simple to use. First, add the plugin:
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
then Format the table properly:
<table id ="table_id" class="display">
<thead>
<tr>
<th>Company</th>
<th>Employee</th>
<th>Expected Time</th>
<th>Activity</th>
</tr>
</thead>
<%
int i = 0;
foreach (var name in ViewBag.Names)
{
<tr>
if ((string)ViewBag.Names[i] != null)
{ %>
<td><%= (string)ViewBag.Company[i]%></td>
<td><%= (string)ViewBag.Names[i]%></td>
<td> --- </td>
<td><%= (string)ViewBag.RecTime[i]%></td>
<%} %>
<%i++; %>
</tr>
<% } %>
Now, apply the DataTable properties on the table:
<script>
$(document).ready(function () {
$('#table_id').DataTable();
});
</script>
and see the charm.