Tabela HTML com as cores das linhas alternadas

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 😎✌!