Can I place a TD of a TABLE with button features through Bootstrap classes?

Question

I used to use Buttons inside TD when creating dynamic tables in which each row (TR) has a button.

But I started to see that instead of putting buttons inside the TD, they put a TAG "a" and assigned classes (bootstrap) of buttons to these TAG "a".

Like:

<a class="btn btn-primary"> 

This already turns a "a" TAG into a button.

Now I’d like to know if instead of me doing this below:

$.each($.parseJSON(data), function(chave, emp) {
  //CRIANDO AS LINHAS COM OS TD DA TABELA QUE SÃO O RESULTADO NA CONSULTA AO BANCO 


  empresas += '<tr id="' + emp.codigo + '">';
  empresas += '<td>' + emp.imagem + '</td>';
  empresas += '<td>' + emp.usuario + '</td>';
  empresas += '<td>' + emp.EMPRESA_ORIGEM + '</td>';
  empresas += '<td>' + emp.departamento + '</td>';
  empresas += '<td style="text-align: center;"><a class="btn btn-md btn-success" href="#" data-toggle="modal" data-target="#modal-alterar-empresas">ALTERAR</a></td>';
  empresas += '</tr>';

});

I might be able to do that.

$.each($.parseJSON(data), function(chave, emp) {
  //CRIANDO AS LINHAS COM OS TD DA TABELA QUE SÃO O RESULTADO NA CONSULTA AO BANCO 


  empresas += '<tr id="' + emp.codigo + '">';
  empresas += '<td>' + emp.imagem + '</td>';
  empresas += '<td>' + emp.usuario + '</td>';
  empresas += '<td>' + emp.EMPRESA_ORIGEM + '</td>';
  empresas += '<td>' + emp.departamento + '</td>';
  empresas += '<td href="#" data-toggle="modal" data-target="#modal-alterar-empresas" class="btn btn-md btn-success" style="text-align: center;"></td>';
  empresas += '</tr>';

});

That would work ?

These questions of assigning classes of buttons in TAGS that are not buttons is a valid thing ?

Answer 1

Dude are a lot of details, but I’m telling you right away that this is completely wrong, because you can’t put a href in a TD, and that would have no semantics or even be accessible

<td href="#" data-toggle="modal" data-target="#modal-alterar-empresas" class="btn btn-md btn-success" style="text-align: center;"></td>

The option to customize a tab <a> as a <button> doesn’t make much sense, except for the fact that button you can’t put a link href, because it is used to submit or for an action via JS. In addition, the button can make a submit and be accessed with the key Backspace (space) for example, and has a different semantics than an A that is actually a hyperlink.

You can even customize one <a> as a <buttom>, but their purpose is quite different as well as the semantics already said above.

As you can see here the global attributes of a button are totally different from the A https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

The HTML Element represents a clickable button.

Element A https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

The HTML element (or the HTML Anchor Element defines a hyperlink (hyperlink), the destination of a hyperlink, or both.