Apresentando dados tabulares com estilo

Olá a todos mais uma vez.

Você costuma usar tabelas HTML? Você já precisou usar uma tabela HTML para mostrar dados de um banco de dados? Você (ou seu usuário) alguma vez já se confundiu com as linhas nos dados tabulares?

Bem, acho que a resposta da maioria a todas as perguntas é sim. Vamos abordar a última pergunta.

Para não haver confusões entre as linhas nós temos diversas soluções:

- Bordas na tabela: Esta é a mais fácil de se implementar e o mais básico: É só colocar o atributo border="1" na tag <Table>. Com os estilos CSS podemos colocar até bordas mais bonitas. É legal, é fácil, mas não é muito sofisticado - porém não subestime - às vezes menos é mais.


- Estilo "zebra": Cada linha de uma cor diferente, alternando entre duas cores. Uma solução bem bacana. Quando a tabela é dinâmica é bem fácil de fazer:

<table>
  <tr>
    <th>Título</th>
  </tr>
  <?
    foreach ($resutset as $registro) {
      $cor = ($cor == "#ffffff" ? "#eaeaea" : "#ffffff");
      echo "<tr style='background: $cor'>";
      ..
      ..
      echo "</tr>";
  }
  ?>
</table>

- DHTML: Todas as linhas têm o mesmo fundo, mas a linha atual muda de cor quando o usuário passa o mouse sobre ela. Exemplo:

<table>
  <tr>
    <th>Título</th>
  </tr>
  <?
    foreach ($resutset as $registro) {
    ?>
      <tr onmouseover="this.style.background = '#eaeaea'"
        onmouseout="this.style.background = 'none'">
        ...
        ...
        ...
      </tr>
      <?
  }
  ?>
</table>

Assim também fica muito legal.

Este assunto pode parecer bobo, mas às vezes são coisas pequenas assim que definem a identidade de um site ou de uma aplicação web, levando ao seu sucesso.

Grande abraço a todos e até a próxima!