Alternating Row Colors

Alternating Row ColorsThere's two different ways this can be done. The first is by getting results from a mysql query, the second is going through the values of an array. I'll go over both. First the full files (ill break it up into two files, one using mysql, and one using an array)

First using mysql

<?

//db vars
$db_host = "host"; //change to your host
$db_user = "user"; //change to your user
$db_pass = "pass"; //change to your password
$db = "db"; //change to your db

//set a GLOBALS var to connect to the database
$GLOBALS['connection'] = mysql_connect($db_host, $db_user, $db_pass)
or die( "Unable to connect to SQL server");
mysql_select_db($db)
or die( "Unable to select database");

echo<<<EOF
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html>
<head>
<title>Title Here</title>
<style type="text/css">
td.RowOne {
background-color: #bfd9ff;
border: 1px solid #000000;
}
td.RowTwo {
background-color: #e8e8e8;
border: 1px solid #000000;
}
</style>
EOF;

//Set the Rows
$class1 = "RowOne";
$class2 = "RowTwo";
$class = $class1;

//Start the table
$table = "<table>";

//Get data from mysql table
$db_qur = "select * from TABLE";
$db_res = mysql_query($db_qur, $GLOBALS['connection']);
while($db_row = mysql_fetch_assoc($db_res)){
$table .= "<tr><td class="$class">$db_row[RowName]</td></tr>";
if($class == $class1){
$class = $class2;
} else {
$class = $class1;
}
}
$table .= "</table>";

//echo the table
echo $table;
?>

Next the file using an array

<?
echo<<<EOF
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

<html>
<head>
<title>Title Here</title>
<style type="text/css">
td.RowOne {
background-color: #bfd9ff;
border: 1px solid #000000;
}
td.RowTwo {
background-color: #e8e8e8;
border: 1px solid #000000;
}
</style>
EOF;

//Build the array
$array = array("value1", "value2", "value3", "value4", "value5");

//Set the Rows
$class1 = "RowOne";
$class2 = "RowTwo";
$class = $class1;

//Start the table
$table = "<table>";

//Loop through the array
foreach($array as $arr_value){
$table .= "<tr><td class="$class">$arr_value</td></tr>";
if($class == $class1){
$class = $class2;
} else {
$class = $class1;
}
}
$table .= "</table>";

//echo the table
echo $table;
?>

So theres the two different ways to do this. On the next pages I'll break everything down explaining whats going on.


Related Articles

  • Alternating Row Colors
    Theres two different ways this can be done. The first is by getting results from a mysql query, the second is going through the values of an array. Ill go over both. First the full files (ill break it up into two files, one using mysql, and one using an array)
  • Alternating Rows: Arrays
    The first thing we do here is echo out the html, again I wont go over this because theres really nothing to explain, except the css. We have two css classes, one for each of the alternating rows.
  • Alternating Rows: Mysql
    The first thing we need to do is connect to the database. I always put my db connection in a universal file, that way I can just change the variables once if I need to; but for the sake of the tutorial, im putting it in this file.
  • Alternating Backgrounds
    Alternate the backgrounds of table rows displayed from a MySQL database.
  • The Basics of Colors
    Learn everything about the basics of colors and use of colors!
  • How To Use Color Effectively When You Create A Web Site
    Colors are powerful, and create strong feelings. They can also make your web site look professional or look like a circus. Here are some powerful tips you should use every time you create a web site...
  • Colors as Visual Communicators
    People love stories. This must have originated from the time when getting tucked up in bed means a story afterwards. Fairy tales are colorful stories with colorful endings. Then came those fiction books with twists and turns and sometimes not so colorful endings...
  • Graphic Design Using Color
    Color is everywhere and conveys a message even if we dont realize it. While this message can vary by culture it pays to know what colors say in your own corner of the universe, and even what color means to your target market.
  • MySQL Join Tutorial
    What are joins and how do you make them?
  • Streamline Your Redesign: Working With Restricted Colors
    Before you start designing, have in mind a rough color scheme that you would like to apply to your web site. It seems to me there are 3 categories, or distinct styles, of coloring being applied to web pages:...

Contact Web Design Outsource and get started today

Need Website Designing, Development, Redesigning, Maintenance and SEO services or help growing your company's web presence? Request a free Quote Now.