ALTERNATING THE BACKGROUND COLOR OF TABLE ROWS AND MORE - Jun 30th, 2012


Markr wanted to know how to automatically alternate between 2 background colors in a table.

Dave Edis, from Interactive Tools had an effective approach as always, he said:

Here's some code to do that:



<?php $bgColor = (@$bgColor == '#F8F8F8') ? '#EFEFEF' : '#F8F8F8'; ?>

Then you can display it like this: <?php echo $bgColor ?>



and the result will be:



<table>
<tr>
<th>title</th>
<th>name</th>
<th>phone</th>
<th>email</th>
</tr>
<?php foreach ($contact_listRecords as $record): ?>
<?php $bgColor = (@$bgColor == '#F8F8F8') ? '#EFEFEF' : '#F8F8F8'; ?>
<tr bgcolor="<?php echo $bgColor ?>">
<td><?php echo $record['title'] ?></td>
<td><?php echo $record['name'] ?></td>
<td><?php echo $record['phone'] ?></td>
<td><a href="mailto:<?php echo $record['email'] ?>"><?php echo $record['email'] ?></a></td>
</tr>
<?php endforeach; ?>
</table>



A variation on this theme might be to alternate the float of images in listings on a list page, like this:


<table width="100%" border="0" cellpadding="0">
<?php foreach ($your_tableRecords as $record): ?>

<?php $float = (@$float == 'left') ? 'right' : 'left'; ?>
<?php $pad = (@$pad == 'padl') ? 'padr' : 'padl'; ?>
<tr>
<td >
<div class="<?php echo $pad ?>" style="float:<?php echo $float ?>"><div style="float:none"> <?php foreach
(
$record['image_1'] as $upload): ?><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo
$upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt='' /><?php endforeach ?></div></div> <div
align="center" style="text-align:left"><?php echo strtoupper($record['headline']); ?><?php
<?php echo $record['content'); ?></div></td>
</tr>

<?php endforeach; ?>
</table>


Note: the css style for the classes "padl" and "padr" creates appropriate padding around the images like this:


.padl { border-right: 20px solid transparent; border-left: 20px solid transparent; border-bottom: 10px solid
transparent; }
.padr { border-left: 20px solid transparent; border-bottom: 10px solid transparent; }





The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.


Terms of Service