Driver FixRecommendedSound, Wi-Fi or graphics acting up? Check drivers firstFind missing or outdated drivers fast.Check DriversOctober DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsWindows FixRecommendedWindows errors stealing your time? Find the fix fastScan stability, cleanup and performance issues.Fix Now×
Skip to content
World desk2 min

How to Add Alternating Row Colors to a PHP-Generated Table

Use CSS nth-child for modern table striping, or check the PHP row number with modulo when the loop must identify alternating rows.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For a current table, use CSS to stripe the data rows; if an assignment forbids CSS selectors, use PHP’s row counter and ask whether inline styles are allowed. These are different approaches: PHP can decide which row is even, but a class by itself cannot change its color without CSS.

Use CSS for a current implementation

Alternating table-row backgrounds are often called zebra striping. CSS keeps presentation separate from the PHP that generates the table. Put column headings in a <thead> and data rows in a <tbody>, then style only the body:

As an Amazon Associate I earn from qualifying purchases.

<table>
  <thead>
    <tr>
      <th scope="col">Row</th>
      <th scope="col">1</th>
      <th scope="col">2</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>1</td><td>2</td></tr>
    <tr><th scope="row">2</th><td>2</td><td>4</td></tr>
  </tbody>
</table>
tbody tr:nth-child(even) {
  background-color: #eee;
}

even selects every second row, beginning with the second row in the body. Use odd instead if the first data row should receive the background. MDN’s table styling guide documents both patterns and also describes nth-of-type.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

If the PHP loop must choose the alternating rows

When the exercise requires the loop to decide row parity, use the row number and PHP’s remainder operator. For positive row numbers, a remainder of zero after division by two means the row is even; PHP documents this operator in its arithmetic operators reference.

for ($row = 1; $row <= 12; $row++) {
    $rowClass = ($row % 2 === 0) ? 'even' : 'odd';
    echo '<tr class="' . $rowClass . '">';

    // Output the row header and cells here.

    echo '</tr>';
}

This marks rows but does not color them on its own. If CSS is permitted, define styles for .even and .odd. If the assignment bans CSS selectors, ask whether an inline style attribute is permitted; otherwise the class has no visual effect. The original SitePoint forum discussion does not establish which interpretation the instructor intended.

Keep the header out of the stripe pattern

Target rows inside tbody, not every table row, so column headings are not included in the alternating sequence. Include an explicit <tbody>: as MDN explains in its table row reference, browsers can insert one when rows are written directly under a table. A selector that expects table > tr may therefore fail to match the rendered structure.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Clarify the assignment’s “HTML attribute” requirement

The 2017 SitePoint question asks for alternating colors using “html attribute names” while also requiring valid HTML5 and disallowing CSS3 selectors and properties. Those terms do not point to one unambiguous method. Forum replies discuss possibilities such as bgcolor, inline style, or class, but do not confirm the instructor’s intent. Ask which attribute or technique is allowed before choosing an implementation: a class still needs a stylesheet, while inline styling is itself CSS.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Crashes, No Sound, or Screen Glitches?Free driver scan
PC Slower Than It Used to Be?Free scan - under a minute

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.