Should I set the background in TD or TR?

One difference I see between the two is that applying the style to the line will always be the whole line, with the advantage of building a "zebra" effect:

.table>thead>tr:nth-child(odd) {
  background: red;
}

Zebra

.table>thead>tr:nth-child(odd) {
  background: red;
}

<table class="table">
  <thead>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </thead>
</table>

Applying to table data ( <td> ), you can apply styles to specific table cells, such as using nth-child :

.table>thead>tr>td:nth-child(1) {
  background: red;
}

Example

.table>thead>tr>td:nth-child(1) {
      background: red;
    }

<table class="table">
  <thead>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </thead>
</table>

And when using thead it becomes more semantic to use <th> instead of <td> , by referring to Table Header .

It depends a little on the objective. By setting within the "td" your background may be "failed" when you have some spacing between the tds as a padding. Putting it inside the tr you would not have that kind of problem, besides that you could overwrite some background in some specific td as needed.

The tags <td> and <th> are table cells, and <tr> are lines, besides there are elements that are used as "dividers", being <tbody> , <tfoot> and <thead>

• <th> table header cell indicates that it should contain a text or a description
• <td> table data cell indicates that it should contain data

  

Note: <th> does not necessarily have to be inside tfoot or thead, it can be used inside tbody

A <tr> (table-row) is one line and this row can have multiple cells, a <th> or <td> are cells, but can not contain other table tags directly as a child, other than the <table> tag itself, which would generate a new table. / p>

So when you color <tr> you are actually coloring the whole line, if the cells are colorless then they will be transparent and it will look like you colored everything:

.table {
   width: 100%;
}
.table tr {
    background: #fc0;
}

<table class="table">
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
</table>

In case you only notice the borders between the cells because the default of the table type is by default it is border-collapse: separate; , but if you set to border-collapse: collapse; , see the difference:

.table {
   width: 100%;
   border-collapse: collapse;
}
.table tr {
    background: #fc0;
}

<table class="table">
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
</table>

  

In the examples above, which one will be the most recommended?

Not necessarily, if you want to color the entire line you can use both selectors, visually they will have the same effect, but it's like said, one will color the cells and the other will color the line, ", which can have variations in the desired effects, if you want to make a zebra effect with hover it would be easier to use directly in <tr>

.table {
   width: 100%;
}
.table tr {
    background: #c0c0c0;
}
.table tr:hover {
    background: #fc0;
}

<table class="table">
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
</table>

Of course you can achieve the same effect as tr doing so:

.table {
   width: 100%;
}
.table tr td {
    background: #c0c0c0;
}
.table tr:hover td {
    background: #fc0;
}

<table class="table">
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
</table>

If you want to animate the hover in the cell do so:

.table {
   width: 100%;
}
.table tr {
    background: #c0c0c0;
}
.table td:hover {
    background: #fc0;
}

<table class="table">
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
</table>

This would only be more interesting if you want an effect eg with nth-child

  

Is there any kind of specification for this, or is it at my discretion?

Technically in CSS has no pre-defined limitations, just understand the difference of both line and cell.