how to display data in two column with php - php

How can I display data in two columns?
<?php
$query = "SELECT * FROM `release` WHERE artist_id = '$rcode' AND label_id = '$id'";
$result = mysql_query($query);
$tr_no = mysql_num_rows($result);
while ($info = mysql_fetch_array($result)) {
?>
<div>
<table style="width: 100%">
<tr>
<td ><img src="../artwork/<?php echo $info['label_id']; ?>/<?php echo $info['ID']; ?>.jpg" width="100" height="100" /></td>
<td valign="top">
<table style="width: 100%">
<tr>
<td style="width: 45px; height: 20px;" class="style5">
</td>
<td style="width: 180px"><?php echo $info['code']; ?></td>
</tr>
<tr>
<td style="width: 45px; height: 20px;" class="style5">
</td>
<td style="width: 180px"><?php echo $info['name']; ?></td>
</tr>
<tr>
<td style="width: 45px; height: 20px;" class="style5">
</td>
<td style="width: 180px"><?php echo trh($info['date']); ?></td>
</tr>
<tr>
<td style="width: 45px; height: 20px;" class="style5">
</td>
<td style="width: 180px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<?php
}
?>
Normally I am using this for just one column.
What is the easiest way of displaying it in two columns with the same fields I have in this code?

The answer also depends on the way you'd like to show the info.
If we assume you have the following six artist_id's in your DB
1,2,3,4,5,6
in which way would you like to show them? This way
1 2
3 4
5 6
or this way?
1 4
2 5
3 6
Update: as you say you'd like to show them in the first way, the solution is pretty simple. Every pair iteration (0, 2, 4...) you should open the row and every odd iteration (1, 3, 5...) you should close it , so you'd have
<tr><td>0</td><td>1</td></tr><tr><td>2</td><td>3</td></tr>...
The code would be
<?php
$query = "SELECT * FROM `release` WHERE artist_id = '$rcode' AND label_id = '$id'";
$result = mysql_query($query);
$tr_no = mysql_num_rows($result);
$ii = 0; // Iterator
while ($info = mysql_fetch_array($result)) {
?>
<div>
<table style="width: 100%">
<?php if ($ii%2 == 0) { // If pair, we open tr?>
<tr>
<?php } ?>
<td ><img src="../artwork/<?php echo $info['label_id']; ?>/<?php echo $info['ID']; ?>.jpg" width="100" height="100" /></td>
<td valign="top">
<table style="width: 100%">
<tr>
<td style="width: 45px; height: 20px;" class="style5">
</td>
<td style="width: 180px"><?php echo $info['code']; ?></td>
</tr>
<tr>
<td style="width: 45px; height: 20px;" class="style5">
</td>
<td style="width: 180px"><?php echo $info['name']; ?></td>
</tr>
<tr>
<td style="width: 45px; height: 20px;" class="style5">
</td>
<td style="width: 180px"><?php echo trh($info['date']); ?></td>
</tr>
<tr>
<td style="width: 45px; height: 20px;" class="style5">
</td>
<td style="width: 180px">
</td>
</tr>
</table>
</td>
<?php if ($ii%2 == 1) { // If odd, we close tr?>
</tr>
<?php } ?>
</table>
</div>
<?php $ii++; // We increment the iterator }
?>

You have several options depending on how fancy you want to get with your HTML/CSS. You can try to keep each to 50% width and float them left and the elements should automatically arrange themselves in two columns.
You can also be more explicit using a table-based layout. In this case, start with a and tag, then add elements inside your loop. After every two elements ( $index % 2 == 0), write a to start a new row.. then, after your loop is finished, close your . If you go this route, you'll want to make sure to add an extra if you've got an odd number of results from your query.
There may be more sophisticated ways to do this, but this is simple and straightforward enough to get the job done.

Unless you have a "LARGE" data set,
1) bring all the rows out into a numerically indexed array
2) divide the number of rows by two: x1 = 0; x2 = (int) count/2;
3) loop from 0 to count/2, creating a table with two columns,
3a) those indexed by x1++ in the first column

Get the total number of pictures, you can do that dynamically, and then put everything in a for loop as follows:
Let's say you want 9 pictures on three columns:
for ($i = 0; $i<=6; $i=($i + 3))
{
$result = mysql_query("select * from users order by id desc limit $i,3 ");
while(mysql_fetch_array($result))
{
//bla bla bla html code
}
}
Good luck.

<table border='1'><tr><?phpfor ($i = 0; $i<=17; $i=($i + 3)){echo "<td>$i</td>";}?></tr><tr><?phpfor ($n = 1; $n<=17; $n=($n + 3)){ echo "<td>$n</td>";}?></tr><tr><?phpfor ($m = 2; $m<=17; $m=($m + 3)){echo "<td>$m</td>";}?></tr></table>
|0|3|6|9|12|15|
|1|4|7|10|13|16|
|2|5|8|11|14|17|
Thank you :)

<table border='1'><?phpfor ($n = 0; $n<=2; $n++) {echo "<tr>";for ($i = $n; $i<=17; $i=($i + 3)){ echo "<td>$i</td>";}echo "</tr>";}?></table>
just use two loop like this
result
0 3 6 9 12 15
1 4 7 10 13 16
2 5 8 11 14 17

Related

Print Report only 6 data for 1 page

i create a report. i try print preview this report.
but i want show 6 data/page page size a4 (landscape).
i already try loop 24 data. and try print preview in google chrome
there 1 data must be down to page 2
see my picture
[![enter image description here][1]][1]
then i check page 2 already same.
this page 2
[![enter image description here][2]][2]
How to fix this, i want report show only 6 data/page
this is my full code, you can try in localhost.
<style>
#caption
{
color:white;
font-weight:bold;
text-align:center;
background-color: #4CAF50;
}
table
{
border-collapse: collapse;
}
th, td
{
padding: 0px;
font-family:arial;
font-size:13px
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
</style>
<table align="center" width="100%" border="1">
<tr>
<td colspan="7" style="vertical-align: top;" id="caption"><font size="3">Data Pendaftar</font></td>
</tr>
<?php
$x = 1;
while($x <= 24)
{
?>
<tr>
<td id="caption">Foto Siswa/i</td>
<td id="caption">Nama Lengkap Siswa/i</td>
<td id="caption">Tempat Lahir</td>
<td id="caption">Tanggal Lahir</td>
<td id="caption">Usia</td>
<td id="caption">L/P</td>
<td id="caption">Agama</td>
</tr>
<tr>
<td align="center" rowspan="3">
<img border="1" src="https://akphoto4.ask.fm/769/854/890/910003014-1s093lj-dc47ceo09kenpt5/original/avatar.jpg"style="width:80px;height:80px;">
</td>
<td align="center">Vasco Da Gama</td>
<td align="center">Spain</td>
<td align="center">01 February 1800</td>
<td align="center">79</td>
<td align="center">L</td>
<td align="center">Kristen</td>
</tr>
<tr>
<td id="caption" colspan="2">Alamat</td>
<td id="caption" colspan="2">No. Telpon | No. Hp </td>
<td id="caption" >Tanggal Daftar</td>
<td id="caption">Status</td>
</tr>
<tr>
<td colspan="2">Spain</td>
<td colspan="2" align="center">0800000000</td>
<td >07 Februari 2000 13:15:33</td>
<td align="center">Pending</td>
</tr>
<?php
$x++;
}
?>
</table>
In this situation, you could create a separate table per page with only 6 rows. Only display the "Data Pendaftar" on the first page, add class="break" to every table except the table on the last page and add a CSS rule table.break{page-break-after:always}. I added a <br /> after each table, so it looks good in the browser before it prints. This will always print 6 rows per page, even when you're accidentally in portrait mode...
<style>
#caption{color:white;font-weight:bold;text-align:center;background-color:#4CAF50}
table{border-collapse:collapse}
th, td{padding: 0px;font-family:arial;font-size:13px}
tr:nth-child(even){background-color:#f2f2f2}
th{background-color:#4CAF50;color:white}
table.break{page-break-after:always}
</style>
<?php $i = 1; while ($i <= 4) { ?>
<table align="center" width="100%" border="1"<?php if ($i < 4) { ?> class="break" <? } ?>>
<?php if ($i == 1) { ?>
<tr>
<td colspan="7" style="vertical-align: top;" id="caption"><font size="3">Data Pendaftar</font></td>
</tr>
<?php } $x = 1; while ($x <= 6) { ?>
<tr>
<td id="caption">Foto Siswa/i</td>
<td id="caption">Nama Lengkap Siswa/i</td>
<td id="caption">Tempat Lahir</td>
<td id="caption">Tanggal Lahir</td>
<td id="caption">Usia</td>
<td id="caption">L/P</td>
<td id="caption">Agama</td>
</tr>
<tr>
<td align="center" rowspan="3">
<img border="1" src="https://akphoto4.ask.fm/769/854/890/910003014-1s093lj-dc47ceo09kenpt5/original/avatar.jpg"style="width:80px;height:80px;">
</td>
<td align="center">Vasco Da Gama</td>
<td align="center">Span</td>
<td align="center">01 Feb 1800</td>
<td align="center">79</td>
<td align="center">L</td>
<td align="center">Kristen</td>
</tr>
<tr>
<td id="caption" colspan="2">Alamat</td>
<td id="caption" colspan="2">No. Telpon | No. Hp </td>
<td id="caption" >Tanggal Daftar</td>
<td id="caption">Status</td>
</tr>
<tr>
<td colspan="2">Spain</td>
<td colspan="2" align="center">021000000 | 0800000000</td>
<td >07 Februari 2000 13:15:33</td>
<td align="center">Pending</td>
</tr>
<?php $x++; } ?>
</table>
<br />
<?php $i++; } ?>

how to create a second a4 page in codeigniter?

I am writing a simple invoice web tool.
Invoices should be in the size of A4.
My Controller:
$this->load->view('static/print_header');
$this->load->view('static/print_invoice', $data);
$this->load->view('static/print_footer');
$data are my invoice items positions like:
HEADER
Pos ---- Item ---- Price
1 item1 10€
2 item2 10€
3 itemitem 20€
FOOTER
If I have to many items (or they have to much text) items will go inside Footer Section and I can't create a right A4 page.
How can I change my Controller to get something like this:
For eg.: 2 Pages if to many items:
Page1:
HEADER
Pos ---- Item ---- Price
1 item1 10€
2 item2 10€
3 itemitem 20€
FOOTER
Page2:
HEADER
Pos ---- Item ---- Price
4 item3 10€
5 itemitemitem 40€
6 itemitem1234 20€
FOOTER
EDIT: Add invoice code
<div id="content">
<div><span style="font-size: x-large;"><strong>Invoice</strong></span></div>
<hr />
<div>
<table style="width: 100%" id="invoice_task_list">
<tr style="background:#eee;">
<td style="width:8%;"><b>Pos.</b></td>
<td style="width:47%;"><b>Description</b></td>
<td style="width:15%;"><b>Date</b></td>
<td style="width:20%;"><b>Hours</b></td>
<td style="width:10%;"><b>Sum</b></td>
<?php
$pos = 1;
foreach( $items as $it): ?>
<tr>
<td style="width:8%;"><?php echo $pos; ?></td>
<td style="width:47%;"><?php echo $it->invoice_item_text; ?></td>
<td style="width:15%;">
<?php if ($it->invoice_item_type == 3) {$date = date('M Y', strtotime($it->invoice_item_date)); } else { $date = date('d.m.Y', strtotime($it->invoice_item_date)); } ?>
<?php echo $date; ?>
</td>
<td style="width:20%;"><?php if ($it->invoice_item_time != '0') { if ($it->invoice_item_type == 1 or $it->invoice_item_type == 2) echo gmdate('H:i', $it->invoice_item_time);}; ?></td>
<td style="width:10%;"><?php echo number_format($it->invoice_item_sum, 2, ',', ' '); ?> €</td>
</tr>
<?php $pos++; ?>
<?php endforeach; ?>
<tr>
<td colspan="3"> </td>
<td> Total (netto): </td>
<?php $netto = $sum['invoice_item_sum']; ?>
<td style="text-align: right;"><span class="currency"><?php echo number_format($netto, 2, ',', ' ') ?> €</span></td>
</tr>
<tr>
<td colspan="3"> </td>
<td> Tax 20.00% </td>
<td style="text-align: right;"><span class="currency">
<?php $tmptax = (($sum['invoice_item_sum'])/100)*$invoice['invoice_tax']; ?>
<?php echo number_format($tmptax, 2, ',', ' ')?> €</span></td>
</tr>
<tr>
<td colspan="3"> </td>
<td> Total (brutto): </td>
<td style="text-align: right;"><span class="currency" style="text-decoration: underline; font-weight: bold;">
<?php $total = ($sum['invoice_item_sum'])+((($sum['invoice_item_sum'])/100)*$invoice['invoice_tax']); ?>
<?php echo number_format($total, 2, ',', ' ')?> €</span></td>
</tr>
</table>
</div>
</div>
This sounds like more of a css issue than a php/codeigniter issue.
Make sure you have a clearfix after your invoice container:
.clearfix {
float:none;
clear:both;
}
And that you have the correct page break settings for printing.
#media print {
.footer {page-break-after: always;}
}
Note that an A4 piece of paper is 2480 x 3508 pixels, so make sure you CSS is adjusted for that!
Edit (After Clarifications):
There are a couple of different ways to determine whether or not your need to additional header/footer for another page. I'm going to go with what I think would be the simplest. If your rows are uniform in that (20) rows make up a whole page, then you can do a simple check and loop your views.
//Note that you'll have to specify only putting 20 records here
if ($rows->num_rows() > 20) {
for ($i = 0; $i < $rows->num_rows(); $i += 20) {
$data['start'] = $i;
$data['end' = $i + 20;
$this->load->view('static/print_header');
$this->load->view('static/print_invoice', $data);
$this->load->view('static/print_footer');
}
}
If trying to add header and footer on all pages try adding <thead> and <tfoot> elements. On using this it displays the top and bottom contents on all the pages Or you can use the css styles-
<thead>
// your header content
</thead>
<tfoot>
//your footer content
</tfoot>
CSS
#header {
display: table-header-group;
}
#footer {
display: table-footer-group;
}

Show Data Horizontally in Table using PHP & MySQL

I'm trying to display data horizontally in a table by using PHP & MySQL. The code that I'm currently using is (Obviously all values will be called from MySQL but currently I have put static values):-
$query = "select * from bonusdetails where BonusType='Free Money' order by Validity ASC limit 0,3;";
$result = mysql_query($query);
echo '<table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#941010" style="font-family:Arial, Helvetica, sans-serif; float:left; color:#ffffff;">';
while ($row = mysql_fetch_array($result))
{
echo '<tr>';
echo '<td align="center" style="padding:2px 0 0 0;"><img src="abc.jpg" width="124" height="64"/></td>';
echo '</tr>';
echo '<tr>';
echo '<td align="center" style="font-size:15px; padding:8px 0 0 0;">No Deposit Bonus</td>';
echo '</tr>';
echo '<tr>';
echo '<td style="font-size:17px; padding:5px 0 0 0;" align="center" >CODE: STAR75</td>';
echo '</tr>';
echo '<tr>';
echo ' <td align="center" style="padding:8px 0 5px 0;"><a href="#"><input name="more-details" type="button" style="background:url(images/more-details.png) no-repeat; width:102px;
height:27px; text-decoration:none; border:none; cursor:pointer;" /></a></td>';
echo '</tr>';
}
echo '</table>';
I'm getting output in this format: http://www.casinobonustips.com/submitbonus/bonus.php. is there a way to display the same data horizontally?
I will highly appreciate your assistance on this.
Thanks and Regards,
Devjeet
What you have:
<table>
<tr>
<td>A1</td>
</tr>
<tr>
<td>B1</td>
</tr>
<tr>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
</tr>
<tr>
<td>B2</td>
</tr>
<tr>
<td>C2</td>
</tr>
<tr>
<td>A3</td>
</tr>
<tr>
<td>B3</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
What you should have:
<table>
<tr>
<td>
<div>A1</div>
<div>B1</div>
<div>C1</div>
</td>
<td>
<div>A2</div>
<div>B2</div>
<div>C2</div>
</td>
<td>
<div>A3</div>
<div>B3</div>
<div>C3</div>
</td>
</tr>
</table>
Example: http://jsfiddle.net/ePMmx/1/
Do your styling to suit your needs.
You need to group <td></td> in one <tr></tr> to display them "horizontally", on the other hand, you are mixing "view" stuff with processing and retrieving the data, you maybe have to read about MVC pattern for better programming

HTML select box doesnt highlight last option

My code can be found here: http://macrorevolution.com/calculators/tdee/
When I put my mouse over the last <option></option> it does not highlight as opposed to the rest of the options. I've tried adding more options and each time it is the last option that does not highlight. How can I fix this?
<?php
$answer = "";
$agev = "";
$feetv = "";
$inchesv = "";
$weightv = "";
$sex = "";
$activelevel = "";
if(isset($_POST['agev']) && isset($_POST['feetv']) && isset($_POST['inchesv']) && isset($_POST['weightv']) && isset($_POST['sex'])) {
//&& isset($_POST['activelevel'])
$agev = $_POST['agev'];
$feetv = $_POST['feetv'];
$inchesv = $_POST['inchesv'];
$weightv = $_POST['weightv'];
$sex = $_POST['sex'];
$activelevel = $_POST['activelevel'];
$totalheightv = $inchesv + ($feetv*12);
$heightcm = $totalheightv*2.54;
$weightkg = $weightv/2.2;
if($activelevel=='1v') $activelevel=1.2;
else if($activelevel=='2v') $activelevel=1.375;
else if($activelevel=='3v') $activelevel=1.55;
else if($activelevel=='4v') $activelevel=1.725;
else if($activelevel=='5v') $activelevel=1.9;
else echo "error";
//echo $activelevel;
if($sex=='male') $answer = $activelevel * (66.47 + (13.75*$weightkg) + (5*$heightcm) - (6.75*$agev));
if($sex=='female') $answer = $activelevel * (665.09 + (9.56*$weightkg) + (1.84*$heightcm) - (4.67*$agev));
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Total Daily Energy Expenditure</title>
<style type="text/css">
.bold {
font-weight:bold;
}
table {
font-size:14px;
font-family: 'PT Sans', sans-serif;
background-color:#FFFFFF;
}
tr.spaceUnder > td
{
padding:0em 1em 1em 0em;
}
p.ss {
font-size:30px;
text-align:center
}
input {
margin-right:5px;
margin-left:5px;
}
.bp
{
border: 1px solid #000000;
text-align:center;
}
</style>
</head>
<body>
<div class="box pt20">
<p class="ss">MacroRevolution TDEE Calculator</p><br>
<table width='80%' style="margin: 0 auto;">
<tr class="spaceUnder">
<td colspan="4">
TDEE = Total Daily Energy Expenditure. TDEE is the amount calories your body burns in a 24 hour period which includes eating, sleeping, excercising, and working.
</td>
</tr>
</table>
<form method='post' action=''>
<table width='80%' style="margin: 0 auto;">
<tr class="spaceUnder">
<td>Age:</td>
<td><input type='text' name='agev' value="<?php echo $agev; ?>"/>Years</td>
</tr>
<tr class="spaceUnder">
<td>Height:</td>
<td align="justify"><input type='text' name='feetv' value="<?php echo $feetv; ?>"/>Ft
<input type='text' name='inchesv' value="<?php echo $inchesv; ?>"/>In</td>
</tr>
<tr class="spaceUnder">
<td>Weight:</td>
<td align="left"><input type='text' name='weightv' value="<?php echo $weightv; ?>"/>lbs</td>
</tr>
<tr class="spaceUnder">
<td colspan="2"><input type='radio' name='sex' value='male'>Male
<input type='radio' name='sex' value='female'>Female</td>
</tr>
<tr class="spaceUnder">
<td colspan="2">
<select name="activelevel">
<option name='activelevel' value='1v'>Little or no Excercise / Desk job</option>
<option name='activelevel' value='2v'>Light exercise / Workout 1-3 days/week</option>
<option name='activelevel' value='3v'>Moderate exercise / Workout 3-5 days/week</option>
<option name='activelevel' value='4v'>Heavy exercise / Workout 6-7 days/week</option>
<option name='activelevel' value='5v'>Very heavy exercise / Physical job / Workout 2 times a day</option>
</select>
</td>
</tr>
<tr class="spaceUnder">
<td colspan="2"><input type='submit' class="button highlight small" value='Calculate'/></td>
</tr>
<tr class="spaceUnder">
<td colspan="2">Your TDEE is <input type='text' style="width: 50px; font-weight:bold;" value='<?php echo round($answer,0); ?>' /><strong>k/cal per day</strong> </td>
</tr>
</table>
</form>
<table width='80%' style="margin: 0 auto;">
<td colspan="4">
TDEE = BMR x Activity Level <br>
Where the formula for BMR(Harris-Benedict formula) is <br><br>
Men: BMR=66.47+ (13.75 x W) + (5.0 x H) - (6.75 x A) <br>
Women: BMR=665.09 + (9.56 x W) + (1.84 x H) - (4.67 x A) <br><br>
W = Weight in kilograms (lbs/2.2)<br>
H = Height in centimeters (inches x 2.54)<br>
A = Age in years <br><br><br>
<table width='500px' style="border: 1px solid;" class="bp">
<tr class="bp">
<th class="bp">Amount of Activity</th>
<th class="bp">Description</th>
<th class="bp">TDEE Activity Level</th>
</tr>
<tr class="bp">
<td class="bp">Sedentary</td>
<td class="bp">Little or no Excercise / Desk job</td>
<td class="bp">1.2</td>
</tr>
<tr class="bp">
<td class="bp">Lightly Active</td>
<td class="bp">Light exercise / Workout 1-3 days/week</td>
<td class="bp">1.375</td>
</tr>
<tr class="bp">
<td class="bp">Moderately Active</td>
<td class="bp">Moderate exercise / Workout 3-5 days/week</td>
<td class="bp">1.55</td>
</tr>
<tr class="bp">
<td class="bp">Very Active</td>
<td class="bp">Heavy exercise / Workout 6-7 days/week</td>
<td class="bp">1.725</td>
</tr>
<tr class="bp">
<td class="bp">Extremely Active</td>
<td class="bp">Very heavy exercise / Physical job / Workout 2 times a day</td>
<td class="bp">1.9</td>
</tr>
</table>
<br><br><br>
</tr>
</table>
</div>
</body>
</html>
Update This Chrome bug ticket, similar to the bug ticket listed below except that this ticket is specific to Chrome 32.0.1700.76
I am assuming you are using Chrome?
My coworker and I ran into this issue yesterday on every page we had drop-downs.
There happens to be a chrome bug describing the exact same issue. This bug ticket states a different version of chrome in the head of the ticket, but if you read the comments they note it also affects other versions of Chrome. forum post I read happened to be the same as my browser/OS (mine's 64-bit)
Chrome Version: 32.0.1700.76 m
Operating System: Windows 7
To verify try the following steps in your chrome browser (steps found in bug ticket)
What steps will reproduce the problem?
Launch Chrome and open "chrome://settings"
Click on any dropdown arrow to open the dropdown list
Mouse hover on all the dropdown items and observe
I don't think the issue is your code, it's Chrome. So there isn't anything you can do at this time.
Everything said, even though it doesn't highlight, it should still be clickable.

Adding PHP alternate table row colours to existing HTML table

I have a Table already written in PHP that echos out data called from the database like so:
<TABLE cellSpacing=1 cellPadding=2 align=center bgColor=#aaaaaa border=0 width="100%" class="logintbl">
<TR>
<TD bgColor=whitesmoke colSpan=0><B>Pages</B></td>
</tr>
<tr>
<td>
<table align="center" cellSpacing=0 cellPadding=2 border="0" width="100%">
<tr>
<td align="center" valign="bottom"> <font color="#4d71a1"><b>Page Name</b></font> </td>
</tr>
<?php while ($row = mssql_fetch_array($result)) { ?>
<tr bgcolor="#eeeeee">
<td align="center"><?php echo $row["PageURL"]; ?></td>
<td align="center">
<img src="images/0013-pen.gif" width="16" height="16" alt="" border="0">
</td>
</tr>
<?php } ?>
<tr><td colspan="7"> </td></tr>
<tr>
<td colspan="7" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
I have been trying to alternate the colours of the rows, using a snippet of PHP and after some research implemented this:
<tr bgcolor="<?php echo ($clrCounter++ % 2 == 0 ? '#000000' : '#ffffff'); ?>">
It doesn't seem to work correctly, so I feel I am going wrong somewhere, I know there is longer ways to implement this that I could implement. I was just hoping for something simple. Am I wasting effort trying to implement it this way?
I integrated it as follows:
<TABLE cellSpacing=1 cellPadding=2 align=center bgColor=#aaaaaa border=0 width="100%" class="logintbl">
<TR>
<td bgColor=whitesmoke colSpan=0><B>Pages</B></td>
</tr>
<tr>
<td>
<table align="center" cellSpacing=0 cellPadding=2 border="0" width="100%">
<tr bgcolor="#3A7525">
<td align="center" valign="bottom"> <font color="#4d71a1"><b>Page Name</b></font> </td>
</tr>
<?php while ($row = mssql_fetch_array($result)) { ?>
<tr bgcolor="<?php echo ($clrCounter++ % 2 == 0 ? '#C2C2C2' : '#ffffff'); ?>">
<td align="center"><?php echo $row["PageURL"]; ?></td>
<td align="center">
<img src="images/0013-pen.gif" width="16" height="16" alt="" border="0">
</td>
</tr>
<?php } ?>
<tr>
<td colspan="7" align="center">
</td>
</tr>
</table>
</td>
</tr>
</table>
It sort of works, but for some reason the very first entry is blue? When I've specified white and grey.
You could use the following when looping through the results returned from your db:
<?php
// Define row colors
$color1 = "#FFFFFF";
$color2 = "#F4F9FF";
// Set row counter
$row_count = 0;
while ($row = mssql_fetch_array($result)) {
$row_color = ($row_count % 2) ? $color1 : $color2;
?>
<tr bgcolor="<?php echo $row_color; ?>">
<td align="center"><?php echo $row["PageURL"]; ?></td>
<td align="center">
<img src="images/0013-pen.gif" width="16" height="16" alt="" border="0">
</td>
</tr>
<?php
$row_count++;
}
?>
Alternatively, you could replace the bgcolor tags and assign a CSS class to each row.
Use the CSS selector :nth-of-type( ).
By putting different styles for both the :nth-of-type(even) and :nth-of-type(odd) the browser does the alternating styling for you, so you won't have to worry about it.
See the W3Schools entry on this.
Try This:
<tr <?php if($i%2){?>bgcolor="#eeeeee"<?php } else{ ?>bgcolor="red" <?php } $i++; ?>>
Thanks to Bas van den Heuvel for the great answer using CSS. If you encountered extra line spacing like I did, and want to remove it, use the following example code. This will make the alternating color lines be tighter together. (I used light grey and white)
p:nth-of-type(odd)
{
background:#e2e2e2;
margin: 0px;
padding: 0px;
}
p:nth-of-type(even)
{
background:#ffffff;
margin: 0px;
padding: 0px;
}

Categories