Generate rows of a table with different colors with repeat loop

Question

How to generate rows of a table with different colors? Each time the loop is executed generate a row with a predetermined color?

Ex.:

foreach ($data as $key) {
    echo '<tr>';
    echo '<td>' . $key['value1'] . '</td>';
    echo '<td>' . $key['value2'] . '</td>';
    echo '<td>' . $key['value3'] . '</td>';
    echo '<td>' . $key['value4'] . '</td>';
    echo '</tr>';   
}

Answer 1

If you only need this, you really don’t need third-party libraries, you can use basic CSS yourself.

First you must understand how the selectors of CSS work.

For your need we need each row of the table to be of one color, so I’m going to assume that even lines are standard, white background, and odd ones will have their background altered.

For this, we will use the selector Nth-of-type which accepts numbers, literals Odd(unique) and Even(pair) and also expressions in the pattern an + b, being a the cycle of repetition, b one offset and n an indexed counter of 0.

For example the expression 2n + 1 would consider the odd ones as well, ie 2 x 0 + 1 = 1, 2 x 1 + 1 = 3, etc..

Using this table as an example:

<table>
    <thead>
        <tr>
            <th>Marca</th>
            <th>Modelo</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Fiat</td>
            <td>Punto</td>
        </tr>

        <tr>
            <td>Volkswagen</td>
            <td>Fusca</td>
        </tr>

        <tr>
            <td>Ford</td>
            <td>Fiesta</td>
        </tr>
    </tbody>
</table>

In our CSS we will use this:

tbody > tr:nth-of-type(odd) {
    background-color: yellow;
}

This makes each line (<tr>) odd has its color changed to yellow, but only those of the table body, that is, which are in <tbody>.

See a full example with a little more CSS:

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

tbody > tr:nth-of-type(odd) {
  background-color: yellow;
}

<table>
  <thead>
    <tr>
      <th>Marca</th>
      <th>Modelo</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Fiat</td>
      <td>Punto</td>
    </tr>

    <tr>
      <td>Volkswagen</td>
      <td>Fusca</td>
    </tr>

    <tr>
      <td>Ford</td>
      <td>Fiesta</td>
    </tr>
  </tbody>
</table>

In this example we continue to put the yellow background for odd rows of the table body, but also include a solid and simple border.

Answer 2

You can perform this using bootstrap, it has a specific class for zebra tables.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
<table class="table table-striped">
	<tr>
		<th>Nome</th>
		<th>Telefone</th>
		<th>Email</th>
	</tr>

	
	<tr>
		<td>Joao</td>
		<td>(11) 1111-1111</td>
		<td>joao@localhost</td>
	</tr>

	<tr>
		<td>Maria</td>
		<td>(11) 1111-1111</td>
		<td>Maria@localhost</td>
	</tr>

	<tr>
		<td>Jose</td>
		<td>(11) 1111-1111</td>
		<td>jose@localhost</td>
	</tr>
	
</table>