Making a CSS background rectangle appear when a field equals 1

Question

The code below echoes out an HTML table, populated with values from a MySQL database. The CSS changes when a field called "topten" equals 1.

When "topten" equals 1, I would like to have a rectangular background 100 pixels high, 800 pixels wide, and color #A6FFFF;. When "topten" does not equal 1, I would like there to be no background. I would imagine that I could do this by applying some CSS where there is "backgroundtt" below. How can I do this?

$result = mysql_query($sqlStr);

$arr = array(); 
echo "<table class=\"samplesrec\">";
while ($row = mysql_fetch_array($result)) {         
  if($row["topten"] == 1) {    
     echo '<div class="backgroundtt"></div>';
     echo '<tr class="class2a">';
     echo '<td class="sitename1"></td>';
     echo '</tr>';
     echo '<tr class="class2b">';
     echo '<td class="sitename2name"></td>';
     echo '</tr>';
     echo '<tr class="class2c">';
     echo '<td class="sitename2"></td>';
     echo '</tr>';
  } else {      
    echo '<tr class="class3a">';
    echo '<td class="sitename1"></td>';
    echo '</tr>';
    echo '<tr class="class3b">';
    echo '<td class="sitename2name"></td>';
    echo '</tr>';
    echo '<tr class="class3c">';
    echo '<td class="sitename2"></td>';
    echo '</tr>';
  }
}

echo "</table>";

Answer 1

a div inbetween a table and a table row tag is invalid table syntax. this may be the cause of your problem.

Answer 2

The simplest way to do this would probably to write it inline, like so:

if($row["topten"]==1){
    echo '<div style="position:absolute;width:800px;height:100px;background-color:#A6FFFF;z-index:-1;"></div>';
}
echo "<table class=\"samplesrec\">";
while ($row = mysql_fetch_array($result)) {         
   if($row["topten"] == 1) {    

       // move div above table to make it proper markup.
       echo '<tr class="class2a">';

This however assumes that the container is positioned relative, or that your table is positioned at 0,0 on your page with no margins.

If I were you I'd add a class name to the <td>s that you'd like to have a background on instead of adding an element though.

Answer 3

It is not valid markup to have a div inside of a table that is not in an actual table cell. What you will want to do instead is apply a class to the three rows that are in the topten call so that section might look like this:

 if($row["topten"] == 1) {    
 echo '<tr class="class2a coolBackgroundClass">';
 echo '<td class="sitename1"></td>';
 echo '</tr>';
 echo '<tr class="class2b coolBackgroundClass">';
 echo '<td class="sitename2name"></td>';
 echo '</tr>';
 echo '<tr class="class2c coolBackgroundClass">';
 echo '<td class="sitename2"></td>';
 echo '</tr>';
 }

Then you can set the background color like so in css:

.coolBackgroundClass { background-color: #A6FFFF; }

So instead of trying to absolutely position a div behind those rows (which in its placement is invalid markup) you just set the background color of each of the three rows so it looks like on large rectangular box. Also if your rows grow in size the box will grow with them.

Edited: missed a semicolon in css markup