Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login

Bootstrap: Como estilizar tabelas

Aprenda neste artigo como customizar tabelas utilizando tags e classes do framework Front-end Bootstrap.

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

Motivação

As tabelas estão presentes em grande parte das aplicações (sejam elas web, desktop ou mobile) e constituem um elemento fundamental na apresentação de dados para o usuário final.

Atualmente, com a importância que a interface de usuário possui, saber como aprimorar a aparência de uma tabela torna-se tão relevante quanto. Nesse cenário, uma das tecnologias que tem se tornado referência é o Bootstrap. Esse framework front-end, entre muitos outros recursos, disponibiliza diversas funcionalidades para estilizar e otimizar a exibição de diversos componentes, como é o caso das tabelas.

Tabela básica no Bootstrap

Para estilizar uma tabela com o Bootstrap, basta adicionar a classe table à tag <table>, e algumas formatações visuais já serão aplicadas, como mostra a Listagem 1.

<table class="table">
 <thead>
  <tr>
   <th>Marca</th>
   <th>Veículo</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Chevrolet</td>
   <td>Sonic</td>
  </tr>
  <tr>
   <td>Chevrolet</td>
   <td>Cruze</td>
  </tr>
  <tr>
   <td>Volkswagen</td>
   <td>Jeta</td>
  </tr>
 </tbody>
</table>

Run
Listagem 1. Estilização básica de tabela com o Bootstrap

O resultado da execução desse código é apresentado na Figura 1.

Tabela básica com Bootstrap
Figura 1. Tabela básica com Bootstrap

Classes adicionais para tabelas

Existem ainda algumas classes que permitem aplicar estilos diferenciados a uma tabela, são elas:

  • table-striped: Alterna a cor das linhas da tabela;
  • table-bordered: Adiciona borda à tabela.
  • table-hover: Ativa o destaque de uma linha quando passamos o cursor do mouse sobre ela;
  • table-condensed: Reduz a altura das linhas da tabela, deixando-a mais compacta.

Para aplicar esses estilos, basta adicionar as classes desejadas à tag <table>, da seguinte forma:

<table class="table table-striped table-bordered table-condensed table-hover">

Run

O resultado disso deve ser semelhante à Figura 2.

Tabela com classes adicionais
Figura 2. Tabela com classes adicionais

Alterando as linhas de uma tabela

As classes que vimos até aqui alteram o estilo da tabela como um todo, formatando todas as suas linhas de maneira uniforme. Caso seja necessário formatar linhas separadamente, podemos aplicar à tag <tr> classes como active, success, danger, warning e info. Um exemplo disso pode ser verificado no código da Listagem 2.

  <tbody>
      <tr class="active">
          <td>Chevrolet</td>
          <td>Sonic</td>
      </tr>
      <tr class="success">
          <td>Chevrolet</td>
          <td>Cruze</td>
      </tr>
      <tr class="danger">
          <td>Land Rover</td>
          <td>Evoque</td>
      </tr>
      <tr class="warning">
          <td>Volkswagen</td>
          <td>Jeta</td>
      </tr>
      <tr class="info">
          <td>Ford</td>
          <td>Focus</td>
      </tr>
  </tbody>

Run
Listagem 2. Configurando classes opcionais para as linhas da tabela

Com isso, cada linha ganhará uma cor diferente, como podemos observar na Figura 3.

Linhas da tabela estilizadas individualmente
Figura 3. Linhas da tabela estilizadas individualmente

É importante destacar que para aplicar esses estilos não foi necessário fazer uso de JavaScript. Portanto, caso seu projeto não necessite de outros recursos do Bootstrap, como modais e carousels, não é necessário incluir o arquivo de JavaScript do framework, reduzindo assim o tempo de carregamento da sua página.

Carregando
 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ajude-nos a evoluir: você gostou do post?  (2)  (0)
Confirmar voto
Compartilhe:
Ficou com alguma dúvida?