How to enchance the table by displaying an alternate background color of “pink” and “white” for each table cell?

[Lim]

Hi, I started to learn php recently, I need to create a table with 10 rows and 15 columns.

However, I need to to enhance the table by displaying an alternate background color of “pink” and “white” for each table cell.

I need to follow this requirement:

• If row index + column index is an even number, use pink color.
• Otherwise, use white color.

Below is the code:

<?php
        echo "<table style= 'border: 1px solid'>";
        define("ROW", 10);
        define("COL", 15);
        for($i = 1; $i <= ROW; $i++){
            echo "<tr style= 'border: 1px solid; height: 20px'> \n";
            for($j = 1; $j <= COL; $j++){
                $sum = $i + $j;
                $td = "<td style= 'border: 1px solid; width: 20px; background-color: $sum%2 == 0? 'pink;':'white;';'</td>";
                
            }
            echo "</tr>";
        }
        echo "</table>";
        ?>

I would appreciate if someone can point out my mistakes, thank you so much for reading

[kicken]

Your code is incorrect.  You're not echoing your table cells, you storing them in a variable that is never used.  Your opening <td> tag is missing it's >.

You cannot do an expression inside a string.  Either do it outside the string and save the result to a variable then embed the variable, or use concatenation.

Lastly, you can do alternating colors with simple CSS and just create your table normally.

td {
  background-color: white;
}

td:nth-child(2n){
   background-color: pink;
}

 

Edited July 18, 2022 by kicken

[ginerjm]

Actually I just create 2 classes and alternate them for each tr tag.

	// make 2 classes
	.hilite0 {background-color:red;}
	.hilite1 {background-color:green;}

	// output 6 rows of my test table
	$h = true;
	for ($i=0; $i<=5; $i++)
	{
		echo "<table>";
		if ($h)
			$class = 'hilite1';
		else
			$class = 'hilite0';
		echo "<tr class='$class'><td>col1</td><td>col2</td></tr>";
		$h = !$h;
	}
	echo "</table>";

I realize that you wanted to do this (really?) for each cell, but IMHO I think it is easier to read a table when each row alternates rather than each cell.

Edited July 18, 2022 by ginerjm

[kicken]

If you want a checkerboard pattern (which is what you described I guess) rather than a stripped pattern (which is more typical), you can do that with css as well.

td {
  background-color: white;
}

tr:nth-child(2n+1) td:nth-child(2n+1), tr:nth-child(2n) td:nth-child(2n) {
  background-color: pink;
}

 

[ginerjm]

Some very clever css code!  Don't understand it at all but I assume it works.