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

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