c# - DataTables Header displaying as a row? MVC Asp.net -

i'm following along udemy course, i'm @ stage data tables meant render table, reason when renders table pushes th table td?

screenshot

<table id="your_contacts" class="table">     <tr>         <th>@html.displaynamefor(model => model.firstname)</th>         <th>@html.displaynamefor(model => model.lastname)</th>         <th>@html.displaynamefor(model => model.email)</th>         <th>@html.displaynamefor(model => model.phoneprimary)</th>         <th>@html.displaynamefor(model => model.phonesecondary)</th>         <th>@html.displaynamefor(model => model.birthday)</th>         <th>@html.displaynamefor(model => model.address1)</th>         <th>@html.displaynamefor(model => model.address2)</th>         <th>@html.displaynamefor(model => model.city)</th>         <th>@html.displaynamefor(model => model.postcode)</th>         <th>details</th>         <th></th>     </tr>  @foreach (var item in model) {     <tr>         <td>@html.displayfor(modelitem => item.firstname)</td>         <td>@html.displayfor(modelitem => item.lastname)</td>         <td>@html.displayfor(modelitem => item.email)</td>         <td>@html.displayfor(modelitem => item.phoneprimary)</td>         <td>@html.displayfor(modelitem => item.phonesecondary)</td>         <td>@html.displayfor(modelitem => item.birthday)</td>         <td>@html.displayfor(modelitem => item.address1)</td>         <td>@html.displayfor(modelitem => item.address2)</td>         <td>@html.displayfor(modelitem => item.city)</td>         <td>@html.displayfor(modelitem => item.postcode)</td>         <td>@html.actionlink("edit", "edit", new { id=item.id }) |             @html.actionlink("details", "details", new { id=item.id }) |             @html.actionlink("delete", "delete", new { id=item.id })         </td>         <td>@html.hiddenfor(modelitem => item.userid)</td>     </tr> } </table>  <!-- used call scripts after jquery/js has loaded.--> @section scripts {     <script type="text/javascript">         $(function () {             $("#your_contacts").datatable({                 "pagingtype": "full_numbers"                         , "scrolly": "600px"                         , "columndefs": [                             { "width": "40px", "targets": 0 }                             , { "width": "40px", "targets": 1 }                             , { "width": "40px", "targets": 2 }                             , { "width": "45px", "targets": 3 }                             , { "width": "45px", "targets": 4 }                             , { "width": "45px", "targets": 5 }                             , { "width": "45px", "targets": 6 }                             , { "width": "45px", "targets": 7 }                             , { "width": "45px", "targets": 8 }                             , { "width": "45px", "targets": 9 }                             , { "width": "45px", "targets": 10 }                             , { "width": "45px", "targets": 11 }                         ]                         , "order": [[1, "asc"]]                         , "dom": 'rlfrtip'                         , "statesave": "true"                         , "lengthmenu": [[-1, 10, 20, 50, 100], ["all", 10, 20, 50, 100]]             });         });     </script> } 

i'm new using both .net , datatables, can spot why this? doesn't align arrangement buttons.

wrap 'headings' in <thead> , remaining rows in <tbody> element. plugin ordering all rows first column (defined "order": [[1, "asc"]]) result deforest-> firstname -> james

<table id="your_contacts" class="table">     <thead>         <tr>             <th>@html.displaynamefor(model => model.firstname)</th>             ....         </tr>     </thead>     <tbody>         @foreach (var item in model) {             ....         }     </tbody> </table>