Should I set the background on TD or TR?

Asked

Viewed 234 times

0

I have this question ever since. I wanted to know what is the most recommended way, if is to define the background in tr or in the td.

Example 1

.table > thead > tr {
      background: red;
 }

Example 2:

.table > thead > tr > td {
      background: red;
 }

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

Is there some sort of specification on that, or is it up to me?

html css
  • 2

    On TR if you want it to stay on the line, on TD or TH if you want it to stay on the cell ;)

3 answers

2

One difference I see between the two is that applying the style to the line will always be the whole line, having as an advantage build an effect "zebra": 

.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>), it is possible to apply styles to specific table cells, such as the use of 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 you’re using thead gets more semantic to use <th> instead of <td>, by referring to Table Header.

0

Depends a little on the goal. By setting within the "td" your background may be "failed" when you have some spacing between the tds as a padding. Putting inside the tr you wouldn’t have this kind of problem, plus you could overwrite some background in some specific td as needed.

0

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

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

A <tr> (table-Row) is a line and this line can have several cells, a <th> or <td> are cells, but cannot contain other table tags directly as daughter, other than the tag itself <table> which would generate a new table.

So when you color the <tr> in fact you are coloring the whole line, if the cells do not have color then they will be transparent and it will seem that 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 edges (spacing) between the cells because the pattern of the table type is by default border-collapse: separate;, but adjust 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 above examples, which will be the most recommended?

Not necessarily, if you want to color the whole line you can use both selectors, visually they will have the same effect, but as I said, one will color the cells and the other will color the line, ie it will be the "parent" element, which can have variations in the desired effects, if you want to do a zebra effect with hover it would be easier to use directly on <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 it 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 cheer up the cell phone 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 for example with nth-child

Is there some sort of specification on that, or is it up to me?

Technically in CSS there are no predefined limitations, just understand the difference of both line and cell.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.