Tabelas Bootstrap

Estamos chegamos ao fim da saga de recursos básicos do Bootstrap, e para não deixar saudade vamos relembrar um pouco sobre o que já falamos:

  1. Principais funcionalidades (layout, component, Content e Utilities);
  2. Container e Grids;
  3. Tipografia com Bootstrap;
  4. Tratando Imagens;

E hoje vamos falar sobre as tabelas, seus principais tipos, como ficam visualmente e um pouco sobre responsividade, que assim como nas outras ferramentas, aqui também não poderia faltar.

 

Tabelas (básico/introdução)

Já com uma estrutura de tabela a ser trabalhada, estamos prontos para começar o trabalho com a classe table, que já cria um estilo de tabela pré-definido.

  • Detalhe importante para nos lembrar dos containers:

 

A classe table deve ficar dentro de uma classe container, ou seja, será sua herdeira.

Só de adicionarmos a classe table no código, e claro, com a tabela base já adicionada, aparece uma estrutura básica com uma divisão em linhas com os dados já contidos.

Lembrando que a estrutura de tabela é fundamental para a recepção de uma elevada quantidade de dados, sendo aliás uma ótima estrutura neste contexto e escala.

Existem diversos tipos de tabelas e  alguns dos tipos mais usados serão mencionados nas seções a seguir.

 

Em linhas de código

<table class=”table”>

</table>

 

Linhas zebradas

Neste tipo de tabela as linhas ficam dispostas de forma que em sequência, uma tem a cor cinza claro (como plano de fundo) e a de baixo branca, semelhante ao padrão listrado, daí o nome zebra.

Entretanto, como default, esta configuração pode ser um pouco sem destaque entre as cores, e caso julgue necessário, é possível customizá-la para aumentar o contraste entre as linhas para maior em destaque.

 

Em linhas de código

<table class=”table table-striped”>

</table>

 

Linhas com efeito hover

Nesta configuração, quando passamos o mouse sobre as linhas da tabela ocorre o efeito hover, que consiste em uma mudança de cor do background da linha, por exemplo, se o fundo for branco ele irá ficar preto.

Assim como o efeito zebra, pode ser customizado para uma cor mais destacada.

 

Em linhas de código

<table class=”table table-hover”>

</table>

 

Classes contextuais (linhas decoradas)

Use classes contextuais para colorir linhas ou células da tabela. Esta ferramenta permite relacionar estados que deseja-se exibir, por exemplo, eventos como: active, danger, success, warning; com uma cor específica.

Isto significa que a cada alerta diferente, a linha irá ficar com uma cor correspondente ao evento.

Por exemplo, em uma tabela de finanças, exibir em vermelho (warning) se o valor estiver incorreto, ou se alguém tiver quitado algum pagamento, exibir em verde (success).

 

Em linhas de código

<tr class=”table-primary”>…</tr>
<tr class=”table-secondary”>…</tr>
<tr class=”table-success”>…</tr>
<tr class=”table-danger”>…</tr>
<tr class=”table-warning”>…</tr>
<tr class=”table-info”>…</tr>
<tr class=”table-light”>…</tr>
<tr class=”table-dark”>…</tr>

 

Tabelas responsivas e concluindo

Tabelas responsivas permitem tabelas serem roladas horizontalmente, ou seja, é adicionado uma barra de scroll caso a tela seja minimizada ou se estiver sendo exibida em uma display pequeno.

Em questão de implementação para qualquer tabela seja responsiva em todas viewports, utilize um .table com a herança .table-responsive, além disso,  é possível escolher um breakpoint máximo.

Recordando o que já falamos muito nos outros textos, é a importância do design responsivo, e agora neste caso, da variedade de opções para tabelas e da customização possível dentro de cada uma destas ferramentas, revelando a grande versatilidade do framework Bootstrap.

 

Concluindo

Graças ao uso vasto de algumas aplicações muito utilizadas rotineiramente, como calendários, selecionadores de datas, controle de finanças, as tabelas foram desenvolvidas de forma que sejam simples, alternativas e versáteis.

Exatamente para garantir a flexibilidade na hora de produzir o código, e mesmo quando pensamos nas opções de design, já que estamos falando de tabelas.

Vale lembrar que todos os estilos de tabelas são herdados no Bootstrap 4, significando que qualquer tabela aninhada vai herdar todos comportamentos das classes pai.

Nos próximos artigos vamos começar uma nova saga, onde vamos falar sobre alguns dos diversos componentes do Bootstrap.

Continue conosco e não perca essa nova coletânea que já vem por aí!

 

E aí? Curtiu o artigo? Então deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.