Olá pessoal, hoje irei mostrar uma dica rápida e bem legal para deixar sua tabela em HTML mais bonita.
Podemos aplicar o efeito das linhas da tabela alternando as cores com apenas CSS, utilizando a pseudo-classe :nth-child(), que possibilita selecionar os elementos de acordo com sua posição.
No exemplo abaixo utilizei a pseudo-classe :nth-child() com o valor even para pegar os elementos tr (linha da tabela) com as posições pares, mas também podemos utilizar odd para selecionar as posições ímpares.
Código HTML:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wesley</td>
<td>26</td>
</tr>
<tr>
<td>João</td>
<td>80</td>
</tr>
<tr>
<td>Maria</td>
<td>52</td>
</tr>
<tr>
<td>Tereza</td>
<td>36</td>
</tr>
<tr>
<td>Carlos</td>
<td>29</td>
</tr>
<tr>
<td>Monize</td>
<td>22</td>
</tr>
<tr>
<td>Zé</td>
<td>63</td>
</tr>
<tr>
<td>Carla</td>
<td>21</td>
</tr>
<tr>
<td>Isabel</td>
<td>31</td>
</tr>
<tr>
<td>Fernando</td>
<td>14</td>
</tr>
<tr>
<td>Rafael</td>
<td>33</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Média das idades</th>
<td>37</td>
</tr>
</tfoot>
</table>
Código CSS:
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
table {
text-align: center;
font-family: Montserrat, Arial, sans-serif;
background:#fafafa ;
margin: 0 auto;
width: 80%;
}
tr:nth-child(even) {
background:lightgray;
}
Pronto pessoal, aprendemos como deixar as linhas da tabela com cores alternadas, valeu 😎✌!
Top comments (0)