Edit in JSFiddle

$.each(students, function(index, student_values){
    
    if (index == 10) {
        
        return false;
    }
    
    $('#studentData').tmpl(student_values).appendTo('#studentInfo');
    
    
});

$('#wrapper tr:odd').addClass('alt_row');
$('#wrapper tr:even').addClass('row');
$('#studentInfo tr>td:nth-child(3), tr>td:nth-child(4)').css('text-align','center');

$('#wrapper tr').hover( 
    function() { $(this).addClass('row_hover'); },
    function() { $(this).removeClass('row_hover'); }
    
);

<script id="studentData" type="text/x-jquery-tmpl"> 
   <tr>
    <td>${FName}</td>
    <td>${LName}</td>
    <td>${Phone}</td>
    <td>${DOB}</td>
   </tr>
  </script>

<div id="wrapper">
  <table>   
   <thead>
    <tr>
     <th>First Name</th>
     <th>Last Name</th>
     <th>Phone</th>
     <th>Date of Birth</th>
    </tr>
   </thead>
   <tbody id="studentInfo">
   </tbody>
  </table>
</div>

body {
    font-size: 12px;
}

table, th, td {
    border: 1px dotted #403f3f;
    width: 525px;
    border-collapse:collapse;
}

th { text-align: center; font-weight: bold; color:#FFF; background-color:#403f3f }

th, td {
    padding: 5px;
}

#wrapper td { font-size: 10px; }

.row { background-color: #cfeefb; }

.row_hover { background-color: #8edcfc; }