Assign styles according to content

It is not possible to style elements based on their CSS content, with the exception of the pseudo-class :empty , which in your case will not help us.

How about you use vanilla Javascript?

First you create a simple function that checks if the text inside your <th> element is in pure capitals:

 function todasMayusculas(str) {
   return str.toUpperCase() == str;
 }

This function will return a Boolean, either true or false.

What good will this do us?

You can browse the DOM for elements <th> with either:

document.querySelectorAll("th") or document.getElementsByTagName("th")

  

document.querySelectorAll () ~ document.getElementsByTagName ()

This will return a list of nodes, if you found results, which you can iterate:

var th = document.querySelectorAll("th");

for (var i = 0; i < th.length; i++) {
    ...
}

Then you use the function you created for each item in the list.

Since this function is waiting for a string we will use textContent , which returns the text within the element.

If the result of todasMayusculas() throws us true, you add a class of your choice, in this case it will be called seleccionado :

for (var i = 0; i < th.length; i++) {
    if (todasMayusculas(th[i].textContent)) {
      th[i].classList.add("seleccionado");
    }
}

Finally, you add this class to your CSS file with the desired properties:

.seleccionado {
  background-color: #dfe6e9;
  font-weight: bold;
}

We put everything together and it looks like this:

(function() {
  var th = document.querySelectorAll("th");

  for (var i = 0; i < th.length; i++) {
    if (todasMayusculas(th[i].textContent)) {
      th[i].classList.add("seleccionado");
    }
  }

  function todasMayusculas(str) {
    return str.toUpperCase() == str;
  }
})();

.seleccionado {
  background-color: #dfe6e9;
  font-weight: bold;
}

<table>
  <thead>
  </thead>
  <tbody>
    <tr>
      <th>ALL AVAILABLE METALS</th>
      <td></td>
    </tr>
    <tr class="alt">
      <th>Rose Gold</th>
      <td>
        <p>14Kt, 18Kt</p>
      </td>
    </tr>
    <tr class="">
      <th>White Gold</th>
      <td>
        <p>14Kt, 18Kt</p>
      </td>
    </tr>
    <tr class="alt">
      <th>Yellow Gold</th>
      <td>
        <p>14Kt, 18Kt</p>
      </td>
    </tr>
    <tr class="">
      <th>OTHER INFORMATION</th>
      <td></td>
    </tr>
    <tr class="alt">
      <th>Finish Type</th>
      <td>
        <p>Polished</p>
      </td>
    </tr>
    <tr class="">
      <th>Width Bottom</th>
      <td>
        <p>2.1mm</p>
      </td>
    </tr>
  </tbody>

jsFiddle

Note:

You have a misspelling in the word available .

As you mention, it is difficult to give an optimal answer without seeing your current situation, but I can imagine something like this:

Inventing that the property you need to see different is Name

.nombre{
    background-color: #dfe6e9;
    font-weight: bold;
}

<?php
    foreach ($datos as $valor) { ?>
       <tr>
        <? if(preg_match_all('/[A-Z]/', $valor['Nombre'])){ ?>
           <td class="nombre"><?=$valor['Nombre'];?></td>
        <? } else {?>
           <td><?=$valor['Nombre'];?></td>
        <? }?>
        <td><?=$valor['Value'];?></td>
       </tr>
<? } ?>