BootStrap - Tabelas

Hoje em dia no Bootstrap o conceito do uso de tabelas foi substituído pelo grid. No grid do bootstrap a linha do browser é dividida em 12 partes e cada elemento colocado no grid vai ocupar toda a linha. Se eu colocar 2 elementos cada um deles vai ocupar 50% da linha. Se forem 3 elementos cada um ocupará 33,33% da linha e assim por diante. O uso que eu faço mais comum do grid é numa tela de login onde sempre temos um campo texto seguido por uma caixa de texto, por exemplo: Nome : ______________. O grid consegue deixar os campos perfeitamente alinhados na vertical.

Lembre-se de outro detalhe...Bootstrap é mobile first, ou seja, prioriza a exibição para dispositivos móveis que são a maioria dos dispositivos que hoje navegam na Internet.

Nos primórdios da civilização

No começo da www se quisessemos alinhar elementos como se fossem uma 'planilha eletrônica' só havia um recurso : Tabelas. E como vocês sabem, desgraça pouca é bobeira, o pessoal inventava de colocar penduricalhos nelas do tipo total, quebra por tipo de produto, esconder os valores iguais em linhas consecutivas ( só exibia a primeira ) etc. Portanto no inferno dos programadores asp clássico, com certeza, esse elemento estará lá. E sua aparência era horrível...pra ficar aceitável só com muita formatação. Veja abaixo um exemplo básico de uma tabela html.

Coluna 1 Cabeçalho Coluna 2 Cabeçalho Coluna 3 Cabeçalho
Coluna 1 Linha 1 Coluna 2 Linha 1 Coluna 3 Linha 1
Coluna 1 Linha 2 Coluna 2 Linha 2 Coluna 3 Linha 2
Coluna 1 Linha 3 Coluna 2 Linha 3 Coluna 3 Linha 3

O único estilo que coloquei na tabela acima é o border="1" para exibir as bordas e align="center" para centralizar a tabela na tela. É lógico que dá para melhorar muito o visual do elemento, mas nosso objetivo é fazer o mais rápido e o mais bonito possível, sem perder tempo, usando o BootStrap.

Bootstrap : Tabela comum

A classe .table define um estilo básico (claro,padding e divisores horizontais) para a tabela:

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
   <table class="table">
       <thead>
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr class="table-info">
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr class="table-info">
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr class="table-info">
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>

Comparando com a tabela do HTML a gente só pode dizer...uau. Para ficar bonito coloquei nas linhas a classe class="table-info" para que a cor de fundo da linha ficasse num azul mais escuro que o fundo da página porque, por default, linhas de grade do Boostrap são cinza claro e isso faria com que as divisões das colunas ficariam praticamente invisíveis. Outra coisa que dá pra notar é que foi feita uma distribuição bem alinhadas dos itens...isso porque eu usei o bootstrap
<link rel="stylesheet" href="../BootstrapEngine/css/bootstrap.min.css">
e a classe table.

Quer dar mais uma babada....reduza a largura do browser e veja o que acontece na tabela HTML e na do Bootstrap. A tabela bootstrap é responsiva por default. Babou ?



Bootstrap : Tabela com estilo so cabeçalho dark

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Tudo que fiz foi aplicar uma classe no header da tabela : <thead class=" thead-dark">. Você pode usar também o estilo thead-light para o cabeçalho fazendo ele ficar claro o que fica bem em um fundo com uma cor mais destacada.



BootStrap - Tabelas zebradas

Striped Rows

A classe .table-striped class define o estilo tabela zebrada :

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
   <table class="table table-striped">
       <thead class="thead-light">
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr>
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr>
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>

Coloquei no estilo da table class="table table-striped" e no header a classe class="thead-light". Sendo assim as linhas da tabela apareceram zebradas ( um tom de azul mais escuro numa linha na outra a cor de fundo) e o cabeçalho aparaceu com o fundo branco.



BootStrap - Tabelas com bordas

A classe .table-bordered adiciona bordas em todos os lados da tabela e das células :

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
   <table class="table table-bordered">
       <thead>
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr>
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr>
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>

Não fui muito feliz porque a cor de fundo da página é praticamente a cor da borda da tabela. Faça o teste com uma cor de fundo que se destaque em relação a borda cinza-clara da página. Você também pode aplicar uma classe que personalize a cor da linha tipo <tr class="table-active"">. No final desta página mostro esses estilos de linha.



BootStrap - Tabelas com efeito Mouse over (hover)

A classe .table-hover habilita o eveito hover (fundo cinza quando o mouse esta sobre a linha) :

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
   <table class="table table-hover">
       <thead>
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr>
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr>
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>

Passe o mouse sobre a tabela e verá que a linha sob o mouse é destacada.



BootStrap - Tabelas com fundo escuro

A classe .table-dark adiciona um fundo preto a tabela:

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
   <table class="table table-dark">
       <thead>
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr>
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr>
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>


BootStrap - Tabelas com fundo escuro e zebrado

Combine as classes .table-dark e .table-striped para criar um fundo escuro e zebrado a tabela :

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
     <div style="padding-left:5px" class="container">
      <p>Combine as classes .table-dark e .table-striped para criar um fundo escuro e zebrado a tabela :</p>
      <table class="table table-dark table-striped">
          <thead>
           <tr>
            <th>Primeiro Nome</th>
            <th>Sobrenome</th>
            <th>Email</th>
           </tr>
          </thead>
          <tbody>
           <tr>
            <td>João</td>
            <td>Ninguém</td>
            <td>João@exemplo.com</td>
           </tr>
           <tr>
            <td>Maria</td>
            <td>Mole</td>
            <td>maria@exemplo.com</td>
           </tr>
           <tr>
            <td>Júlio</td>
            <td>Agosto</td>
            <td>Júlio@exemplo.com</td>
           </tr>
          </tbody>
      </table>
     </div>


BootStrap - Tabelas com fundo escuro e com efeito mouse over

A classe .table-hover adiciona o efeito hover effect (cor de fundo cinza) nas linhas da tabela:

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
   <table class="table table-dark table-hover">
       <thead>
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr>
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr>
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>

BootStrap - Tabelas sem bordas

A classe .table-borderless remove as bordas da tabela:

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
   <table class="table table-borderless">
       <thead>
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr>
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr>
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>


BootStrap - Tabelas com bordas contextualizadas

As classes contextuais podem ser usadas para dar a cor de fundo na tabela, nas linhas ou mesmo nas células. As classes que podem ser usadas são : .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:

Primeiro Nome Sobrenome Email
Default Defaultson def@algumemail.com
Primary Joe joe@exemplo.com
Success Ninguém João@exemplo.com
Danger Mole maria@exemplo.com
Info Agosto Júlio@exemplo.com
Warning Refs bo@exemplo.com
Active Activeson act@exemplo.com
Secondary Secondson sec@exemplo.com
Light Angie angie@exemplo.com
Dark Bo bo@exemplo.com

Código do item acima :
   <table class="table">
       <thead>
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>Default</td>
      <td>Defaultson</td>
      <td>def@algumemail.com</td>
        </tr>
        <tr class="table-primary">
      <td>Primary</td>
      <td>Joe</td>
      <td>joe@exemplo.com</td>
        </tr>
        <tr class="table-success">
      <td>Success</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr class="table-danger">
      <td>Danger</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr class="table-info">
      <td>Info</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
        <tr class="table-warning">
      <td>Warning</td>
      <td>Refs</td>
      <td>bo@exemplo.com</td>
        </tr>
        <tr class="table-active">
      <td>Active</td>
      <td>Activeson</td>
      <td>act@exemplo.com</td>
        </tr>
        <tr class="table-secondary">
      <td>Secondary</td>
      <td>Secondson</td>
      <td>sec@exemplo.com</td>
        </tr>
        <tr class="table-light">
      <td>Light</td>
      <td>Angie</td>
      <td>angie@exemplo.com</td>
        </tr>
        <tr class="table-dark text-dark">
      <td>Dark</td>
      <td>Bo</td>
      <td>bo@exemplo.com</td>
        </tr>
       </tbody>
   </table>


BootStrap - Tabelas com o cabeçalho diferenciado

Use a classe .thead-dark para adicionar um funco escuro aos cabeçalhos das tabelas e a classe .thead-light para adicionar um fundo cinza aos cabeçalhos das tabelas:

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com
Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
   <table class="table">
       <thead class="thead-dark">
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr>
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr>
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>
   <table class="table">
       <thead class="thead-light">
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr>
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr>
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>


BootStrap - Tabelas pequenas

A classe .table-sm faz a tabela menor por diminuir o padding das células pela metade :

Primeiro Nome Sobrenome Email
João Ninguém João@exemplo.com
Maria Mole maria@exemplo.com
Júlio Agosto Júlio@exemplo.com

Código do item acima :
   <table class="table table-bordered table-sm">
       <thead>
        <tr>
      <th>Primeiro Nome</th>
      <th>Sobrenome</th>
      <th>Email</th>
        </tr>
       </thead>
       <tbody>
        <tr>
      <td>João</td>
      <td>Ninguém</td>
      <td>João@exemplo.com</td>
        </tr>
        <tr>
      <td>Maria</td>
      <td>Mole</td>
      <td>maria@exemplo.com</td>
        </tr>
        <tr>
      <td>Júlio</td>
      <td>Agosto</td>
      <td>Júlio@exemplo.com</td>
        </tr>
       </tbody>
   </table>


BootStrap - Tabela responsiva

A classe .table-responsive cria uma tabela responsiva que rolará horizontalmente em telas com menos de 992px de largura (se necessário). Quando visualizadas em telas maiores que 992px não haverá diferença :

# Primeiro Nome Sobrenome Idade Cidade País Sexo exemplo exemplo exemplo exemplo
1 Ana Pitanga 35 Ladeira abaixo Brasil Mulher Yes Yes Yes Yes

Código do item acima :
      <div class="table-responsive">
          <table class="table">
           <thead>
            <tr>
                <th>#</th>
                <th>Primeiro Nome</th>
                <th>Sobrenome</th>
                <th>Idade</th>
                <th>Cidade</th>
                <th>País</th>
                <th>Sexo</th>
                <th>exemplo</th>
                <th>exemplo</th>
                <th>exemplo</th>
                <th>exemplo</th>
            </tr>
           </thead>
           <tbody>
            <tr>
                <td>1</td>
                <td>Ana</td>
                <td>Pitanga</td>
                <td>35</td>
                <td>Ladeira abaixo</td>
                <td>Brasil</td>
                <td>Mulher</td>
                <td>Yes</td>
                <td>Yes</td>
                <td>Yes</td>
                <td>Yes</td>
            </tr>
           </tbody>
          </table>
      </div>
     </div>

Reduza a largura do browser a menos de 992 pixels e verá que a tabela será mantida no seu tamanho original mas será truncada à direita e logo abaixo dela será exibida uma barra de scroll horizontal que permite exibir a parte faltante da tabela.

Considerações finais

O BootStrap é realmente muito bom....tudo isso por poucos kilo-bytes de código ( css e js ). Tudo bem feito e pronto para ser usado. Por isso framewors hoje em dia são obrigatórios em ambientes de alta produtividade.