Publicado em

Bootstrap: Como Criar Tabelas

O Bootstrap já traz, por padrão, alguns estilos para deixar as tabelas HTML bem estilizadas, e também com espaçamentos bem definidos.

As tabelas, com o Bootstrap, também conseguem se adaptar ao tamanho da página, ou seja, elas podem ser totalmente responsivas.

Neste tutorial, você vai entender como trabalhar com tabelas no Bootstrap junto com alguns exemplos.

 


Tabela Simples com o Bootstrap

Para criar uma tabela básica, mas já com um estilo inicial, você pode adicionar a classe .table na tag <table>.

<table class="table">
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>...</th>
      <td>...</td>
    </tr>
  </tbody>
</table>

O layout básico tem uma divisão superior em todos os elementos <td>. Esse trecho, com itens dentro das colunas, ficaria assim:

É uma boa prática colocar o <thead> e o <tbody> nas suas tabelas, para separar o cabeçalho e o rodapé da tabela. Isso também facilita a manipulação e organização dos conteúdos depois.

Nenhuma novidade aqui. Esses são os elementos HTML de tabelas comuns.

O que o Bootstrap faz é aplicar estilos a essas tags, com a classe .table.


Como Fazer as Linhas “Zebradas”

Para colocar as linhas com cores alternadas, ou “zebradas”, você deve usar a classe .table-striped na tabela, e cada linha dentro do <tbody> receberá o estilo de cor.

<table class="table table-striped">
 ...
</table>

A tabela ficaria assim:

O nome dessa técnica é table striping, e isso também pode ser feito com CSS puro.


Como Colocar Bordas na Tabela

Para colocar bordas na tabela, você deve usar a classe .table-bordered na marcação tabela, e todas as células receberão uma borda em todos os lados.

<table class="table table-bordered">
 ...
</table>

Nesse caso, a tabela ficaria assim:


Tabela Responsiva com Bootstrap

Para fazer com que a tabela fique responsiva, você deve colocar toda a <table> dentro de uma <div> com a classe .table-responsive, para que ela possa ter a rolagem horizontal em devices menores (resolução menor que 768px).

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Nas telas maiores, não haverá diferença nenhuma na tabela.


Como Colocar Efeitos

Para habilitar o efeito de destaque em uma linha (mouse over) basta adicionar a classe .table-hover na tabela.

<table class="table table-hover">
 ...
</table>

Para fazer a tabela ficar mais compactada, com menos espaçamento, adicione a classe .table-condensed na tabela.

<table class="table table-condensed">
 ...
</table>

Você também pode adicionar cores nas linhas, ou em células específicas, usando as classes contextuais que são: .success, .warning, .danger, .info, e .active.

...
<tr class="active">
 <td class="warning">Item em Alerta</td>
</tr>
...

Essas classes são muito úteis para chamar a atenção do usuário em informações específicas da tabela, ou que precisem de alguma ação.


Exemplo Completo

Vamos ver um exemplo de uma tabela completa, com as classes do Bootstrap:

Você pode ver esse exemplo funcionando no link abaixo:

Demo no CodePen


Nunca Use Tabelas para Fazer Layouts!

Você viu até aqui que o Bootstrap deixa as tabelas com um visual e com espaçamentos muito bons.

Mas, nunca use tabelas para fazer layouts, ou qualquer outro tipo de posicionamento.
Pra isso, existe o Grid System do Bootstrap.

As tabelas servem apenas para exibir informações tabulares. Como se fossem planilhas, ou relatórios.

Aqui na Academy tem vários tutoriais para você aprender a fazer layouts com o Bootstrap, usando o Grid System.

Um comentário sobre “Bootstrap: Como Criar Tabelas

  1. Parabéns pelo excelente material !!!
    É o melhor que já vi sobre Bootstrap !!!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *