Estilos para Tabelas no Bootstrap

Temos estilos para tabelas no Bootstrap fornece aparências, layouts e funcionalidades adicionais, como tabelas responsivas, destaque de linhas, colunas ou células.

Ainda, conseguimos aplicar estilos alternados às linhas, criar tabelas com cabeçalho fixo e adicionar recursos de paginação e filtragem às tabelas.

Classes para tratamento de tabelas no Bootstrap

O Bootstrap fornece uma série de classes que podemos usar para estilizar e mudar aparência, layout e comportamento das tabelas.

Afinal, qual a diferença entre layout e aparência?

• Layout: tamanho e o espaçamento das tabelas.
• Aparência: bom… alterar a aparência das células da tabela 🙂

Vamos listar as classes abaixo e mais para o final do post iremos ver exemplos de uso.

Para usar essas classes bootstrap para tabelas só precisamos inseri-las dentro da tag <table>, dessa forma,

<table class="table table-striped">

Vejamos as classes para tabelas que o Bootstrap disponibiliza.

Classes para Layout

As classes de layout são usadas para controlar o tamanho e o espaçamento das tabelas.

• .table – Define a tabela como uma tabela Bootstrap.
• .table-bordered Adiciona bordas às células da tabela.
• .table-striped Adiciona listras às linhas da tabela.
• .table-hover Adiciona um efeito de sobreposição às linhas da tabela ao passar o mouse sobre elas.
• .table-condensed Reduz o tamanho das células da tabela.
• .table-responsive Adapta a tabela ao tamanho da janela do navegador.

Classes para Aparência

As classes de aparência são usadas para alterar a aparência das células da tabela.

• .table-primary Atribui uma cor primária às células da tabela.
• .table-secondary Atribui uma cor secundária às células da tabela.
• .table-success Atribui uma cor de sucesso às células da tabela.
• .table-danger Atribui uma cor de perigo às células da tabela.
• .table-warning Atribui uma cor de aviso às células da tabela.
• .table-info Atribui uma cor de informação às células da tabela.
• .table-light Atribui uma cor clara às células da tabela.
• .table-dark Atribui uma cor escura às células da tabela.

Classes para Comportamento

As classes de comportamento são usadas para alterar o comportamento das células da tabela.

• .thead-light Atribui uma cor clara às células da linha de cabeçalho da tabela.
• .thead-dark Atribui uma cor escura às células da linha de cabeçalho da tabela.
• .tbody-light Atribui uma cor clara às células do corpo da tabela.
• .tbody-dark Atribui uma cor escura às células do corpo da tabela.
• .tfoot-light Atribui uma cor clara às células da linha de rodapé da tabela.
• .tfoot-dark Atribui uma cor escura às células da linha de rodapé da tabela.

Tabela para os exemplos e testes

Vamos usar a tabela abaixo como exemplo,

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Endereço</th>
      <th>Telefone</th>
      <th>E-mail</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>João da Silva</td>
      <td>Rua das Flores, 123</td>
      <td>(11) 9999-9999</td>
      <td>joao.silva@example.com</td>
    </tr>
    <tr>
      <td>Maria do Carmo</td>
      <td>Avenida Paulista, 456</td>
      <td>(11) 8888-8888</td>
      <td>maria.carmo@example.com</td>
    </tr>
    <tr>
      <td>José Pereira</td>
      <td>Rua da Liberdade, 789</td>
      <td>(11) 7777-7777</td>
      <td>jose.pereira@example.com</td>
    </tr>
    <tr>
      <td>Ana Paula</td>
      <td>Avenida Rebouças, 1011</td>
      <td>(11) 6666-6666</td>
      <td>ana.paula@example.com</td>
    </tr>
    <tr>
      <td>Pedro Santos</td>
      <td>Rua Augusta, 1234</td>
      <td>(11) 5555-5555</td>
      <td>pedro.santos@example.com</td>
    </tr>
  </tbody>
</table>

que trará esse formato cru com dados

Nome	Endereço	Telefone	E-mail
João da Silva	Rua das Flores, 123	(11) 9999-9999	joao.silva@example.com
Maria do Carmo	Avenida Paulista, 456	(11) 8888-8888	maria.carmo@example.com
José Pereira	Rua da Liberdade, 789	(11) 7777-7777	jose.pereira@example.com
Ana Paula	Avenida Rebouças, 1011	(11) 6666-6666	ana.paula@example.com
Pedro Santos	Rua Augusta, 1234	(11) 5555-5555	pedro.santos@example.com

Exemplos de classes Bootstrap para tabelas