How to generate rows from a table with different colors? Each time the loop is executed generate a line 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>';
}If you need only this, you really do not need third-party libraries, you can use even basic CSS.
First you should understand how CSS selectors works.
For your need we need each row of the table to be one color, so I'll assume that the even lines are standard, white background, and the odd ones will have their background changed.
For this, we will use the selector nth-of-type that accepts numbers, odd and even literals (even) and also expressions in the standard an + b , where a and the b counter cycle of n .
For example, the expression 0 would consider the odd ones as well, ie 2n + 1 , 2 x 0 + 1 = 1 , 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 causes each odd line ( 2 x 1 + 1 = 3 ) to have its color changed to yellow, but only those of the body of the table, that is, <tr> .
See a complete 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 place the yellow background for odd lines in the table body, but we also include a solid, simple border.
You can do this using the 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>