ejs template placing things out of order - node.js

Question

I am using an ejs template to loop through an array and add rows to a table. Here is the following code in my template:
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover">
<thead>
<tr>
<th>
Title
</th>
<th>
Creator
</th>
</tr>
</thead>
<tbody>
<tr class="createNewBoard">
<th scope="row">
Add New
</th>
<td>
+
</td>
</tr>
<% boards.forEach(function(board) { %>
<a href="/<%= board._id %>">
<tr>
<th scope="row">
<%= board.title %>
</th>
<td>
<%= board.creator %>
</td>
</tr>
</a>
<% }) %>
</tbody>
</table>
</div>
And here is what is produced:
<div class="col-md-8 col-md-offset-2">
<table class="table table-hover">
<thead>
<tr>
<th>
Title
</th>
<th>
Creator
</th>
</tr>
</thead>
<tbody>
<tr class="createNewBoard">
<th scope="row">
Add New
</th>
<td>
+
</td>
</tr>
<tr>
<th scope="row">
Yooo
</th>
<td>
gus.henry#me.com
</td>
</tr>
<tr>
<th scope="row">
Swag
</th>
<td>
gus.henry#me.com
</td>
</tr>
</tbody>
</table>
</div>
Why is it placing the anchor tags at the top, rather than in the table rows? Other than ejs, using bootstrap.
Thanks.

Answer 1

This is to do with the way tables are parsed in compliant browsers (i.e. chrome).
your <a> tag should be inside a <td></td> to be valid HTML, and chrome for one will move it out of the <tbody> when it renders the page.
Because ejs is interpreted by the server, the browser never sees any of the ejs <% %> stuff - so do a 'view source' on your output page and you'll see the <a> tags where you expected them to be.
It looks like you're trying to cause a click on a table row to navigate to your /[board id] page. You can instead do something like the this:
<% boards.forEach(function(board) { %>
<tr onclick="javascript:window.location='/<%= board._id %>';">
<th scope="row">
<%= board.title %>
</th>
<td>
<%= board.creator %>
</td>
</tr>
<% }) %>
Or, if you really want a non-javascript solution, you could position an <a> tag absolutely (so it covers the cell) in each <td> and <th> as follows:
<% boards.forEach(function(board) { %>
<tr>
<th scope="row">
<%= board.title %>
<a class="coveringA" href="/<%= board._id %>"></a>
</th>
<td>
<%= board.creator %>
<a class="coveringA" href="/<%= board._id %>"></a>
</td>
</tr>
<% }) %>
with accompanying css as follows:
table td {
overflow:hidden;
}
.coveringA {
position:absolute;
display:block;
top:0px;
left:0px;
right:0px;
bottom:0px;
background:rgba(0,0,0,0); /* sets an invisible background to ensure its clickable in IE9 */
}