# Uso

Nesta seção iremos aprender como criar tabelas e apresentar as classes que podemos utilizar

Tabela sem classes

A tabela sem uso de classes ja possui de certa forma um estilo customizado, veja um exemplo abaixo:

# Nome Email
1 Jardel Gonçalves jardel@dinkyui.com
2 Mara Vitoória mara@dinkyui.com
3 Antonio Carlos toin@dinkyui.com
4 Diego Gaspar diego@dinkyui.com 
  
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jardel</td>
      <td>jardel@dinky.com</td>
    </tr>
    ...
  </tbody> 
</table>

Cor do cabeçalho

É possível alterar tanto a cor de fundo do cabeçalho como do texto, para isso basta adicionar o nome de uma cor como classe da tag thead para adicionar uma cor de fundo ao cabeçalho e para alterar a cor do texto, basta adicionar o prefixo t- e o nome da cor. Veja um exemplo:

# Nome Email
1 Jardel Gonçalves jardel@dinkyui.com
2 Mara Vitoória mara@dinkyui.com
3 Antonio Carlos toin@dinkyui.com
4 Diego Gaspar diego@dinkyui.com 
  
<table>
  <thead class="red t-white">
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jardel</td>
      <td>jardel@dinky.com</td>
    </tr>
    ...
  </tbody> 
</table>

Realçar linhas

Outra classe interessante é a highlight que realça (destaca) as linhas ao passar o mouse sob elas. Veja como usá-la:

# Nome Email
1 Jardel Gonçalves jardel@dinkyui.com
2 Mara Vitoória mara@dinkyui.com
3 Antonio Carlos toin@dinkyui.com
4 Diego Gaspar diego@dinkyui.com 
  
<table class="highlight">
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jardel</td>
      <td>jardel@dinky.com</td>
    </tr>
    ...
  </tbody> 
</table>

Linhas listradas

A classe striped faz com que as linhas de uma tabela tenham as cores alternadas. Veja abaixo como usá-la:

# Nome Email
1 Jardel Gonçalves jardel@dinkyui.com
2 Mara Vitoória mara@dinkyui.com
3 Antonio Carlos toin@dinkyui.com
4 Diego Gaspar diego@dinkyui.com 
  
<table class="striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jardel</td>
      <td>jardel@dinky.com</td>
    </tr>
    ...
  </tbody> 
</table>

Tabela responsiva

As vezes quando estamos listando dados em uma tabela e vemos através de dispositivos com telas maiores as tabelas se comportam de forma desejada, más, quando estamos em dispositivos menores infelizmente as tabelas tende a ter outro comportamento afetando a visibilidade dos dados. Por isso, criamos a classe responsive que ajudar a melhorar a visualização dos dados em telas menores criando uma barra horizontal. Veja um exemplo (caso esteja acessando por um computador diminua a largura do seu navegador).

# Nome Email
1 Jardel Gonçalves jardel@dinkyui.com
2 Mara Vitoória mara@dinkyui.com
3 Antonio Carlos toin@dinkyui.com
4 Diego Gaspar diego@dinkyui.com 
 
<div class="responsive">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Nome</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Jardel</td>
        <td>jardel@dinky.com</td>
      </tr>
      ...
    </tbody> 
  </table>
</div>