# Using <a> element instead of <tr> to get clickable rows

I want to create clickable rows in an html table. Each row should be a link leading to a different page. I can of course add onclick handler, but that will create kind of a crappy UI - poor accessibility, no keyboard navigation, no right/middle click...

I found a better way to do it. Instead of using normal table element, force divs to act as different table tags through css display rules. And for rows, use a-s, with appropriate href attribute.

Here's what I mean:

    
  .table {
display: table;
border-collapse: collapse;
font-family: sans-serif;
width: 100%;
}
}
.tbody {
display: table-row-group;
}
.td, .th {
display: table-cell;
text-align: center;
}
.tr {
display: table-row;
}
background: #ccc;
color: #555;
}
a.tr {
text-decoration: none;
color: black;
}
a.tr:hover {
background: #eee;
cursor: pointer;
}
  <div class="table">
<div class="tr">
<div class="th">ID</div>
<div class="th">Name</div>
</div>
</div>
<div class="tbody">
<a class="tr" href="#">
<div class="td">524</div>
<div class="td">John Smith</div>
</a>
<a class="tr" href="#">
<div class="td">331</div>
<div class="td">Miles Corner</div>
</a>
</div>
</div>

Note how rows are clickable, you can tab through them and there is a nice tooltip showing link you will go to. Much better than onclick.

If I use a framework like React, I don't even have to replace all elements with div-s. I can just add <a> tags instead of <tr>s and it will work.

My question is, what's the catch? What am I missing? Is there some accessibility, browser compatibility, or other reason not to do this?

If it's a table, make it a <table>. Write a traditional <tbody> containing <tr>, in turn containing <td>, in turn containing individual <a>. Then the text will be links. This is simpler, doesn't require any fancy CSS, and better communicates your intent to browsers.