Html rendering order for asp mvc - asp.net

Question

How come my form loads like this?
Here is my code :
#using MvcApplication6.Models;
#model List<Employee>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
Create Entry
</p>
<p>#Html.ActionLink("Check departments", "Index", "Department")</p>
<p>Check summary</p>
<table border="1">
<tr>
<th>
#Html.DisplayNameFor(model => model[0].id)
</th>
<th>
#Html.LabelFor(model => model[0].firstname)
</th>
<th>
#Html.LabelFor(model => model[0].lastname)
</th>
<th>
#Html.DisplayNameFor(model => model[0].gender)
</th>
<th>
#Html.DisplayNameFor(model => model[0].department)
</th>
<th>Action</th>
</tr>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
foreach (Employee mod in Model)
{
<tr>
<td>
<input type="hidden" value="#mod.id" name="id" id="id" />
#Html.DisplayFor(modelItem => mod.id)
</td>
<td>
#Html.DisplayFor(modelItem => mod.firstname)
</td>
<td>
#Html.DisplayFor(modelItem => mod.lastname)
</td>
<td>
#Html.DisplayFor(modelItem => mod.gender)
</td>
<td>
#Html.DisplayFor(modelItem => mod.department)
</td>
<td>
<button onclick="location.href='#Url.Action("Edit", new { id = mod.id })';return false;">Edit</button>
#Html.CheckBoxFor(modelItem => mod.selected)
</td>
</tr>
}
<br />
<input type="submit" value="submit" />
}
</table>
Here are my concerns:
Notice that i put my submit button after the foreach loop but how come it was rendered first before the actual boxes?
I've been trying to put it on the bottom but i am having some problems.
What's the ordering for render?