Tabela Bootstrap: entenda de forma descomplicada!

Tabela Bootstrap

Neste artigo, vamos explicar como criar e estilizar uma tabela Bootstrap. Antes de prosseguir, recomenda-se que tenha conhecimentos básicos sobre o Bootstrap e também sobre como funciona uma tabela em HTML.

O Bootstrap é um dos mais conhecidos Frameworks de código aberto para CSS na atualidade, sento adotado por grande parte dos desenvolvedores web. Através dele, é possível adotar diversas classes com CSS já predefinido, facilitando muito o desenvolvimento de páginas HTML. Atualmente, se encontra na versão 4.

Um recurso muito utilizado na web é o elemento de tabelas. Portanto, os desenvolvedores do Bootstrap pensaram numa forma de incluir as tabelas em seus estilos predefinidos.

15% OFF

Neste artigo, abordamos os seguintes tópicos:

Incluindo a classe de tabela Bootstrap

Como explicado anteriormente, o Bootstrap funciona através de estilos predefinidos. Dessa forma, basta adicionar classes aos elementos para obter o resultado desejado. Ao criar uma tabela no HTML de forma comum, podemos incluir na tag <table> a classe .table, nativa do Bootstrap. Dessa forma, a tabela já receberá algumas formatações visuais.

No exemplo abaixo, vamos aplicar a classe .table na nossa estrutura básica de tabela Bootstrap:

Como resultado, vamos obter uma tabela Bootstrap:

Ainda não tem um www

Tabela BootsTrap

Com isso, observamos uma tabela diferente da que seria gerada apenas com o uso do HTML puro, já com uma formatação básica. Porém, além da classe .table, é possível ainda incluir diversas outras classes que compõem a tabela Bootstrap.

Estilos básicos para a tabela Bootstrap

Tema escuro

Para atribuir um tema de tons escuros à tabela Bootstrap, basta acrescentar a classe .table-dark, como no seguinte código:

Neste exemplo, o resultado será:

Tabela Bootstrap com tema escuro

Alternando a cor das linhas

Também conhecido como linhas zebradas, ao aplicar a classe .table-striped, obtemos um efeito de cores alternadas entre as linha do corpo da tabela. Veja o exemplo:

Dessa forma, obtemos o resultado conforme a imagem abaixo:

Tabela com linhas Zebradas

Mesclando o tema escuro com as linhas alternadas

Também é possível incluir ambas as classes na mesma tabela. Dessa forma, vamos obter uma tabela com tema escuro e com linhas alternadas, conforme exemplificado no código abaixo:

Dessa forma, unindo os dois efeitos na mesma tabela, o resultado do exemplo será:

Tabela com Tema escuro e linhas Zebradas

Tabela com todas as bordas

No padrão da classe .table, já é possível observar que ele traz uma borda entre as linhas como padrão. Porém, é possível também adicionar bordas não só às linhas, mas também entre as colunas através da classe .table-bordered. Dessa forma, vamos utilizar essa classe na tabela Bootstrap do código em exemplo:

O resultado será conforme a imagem abaixo:

Table com borda

Podemos ainda, utilizar essa classe em conjunto com outras classes. Podemos então incluir um tema escuro, com linhas alternadas e com bordas para a tabela Bootstrap. Que tal tentar?

Tabela sem borda

Anteriormente vimos como aplicar bordas entre todas as células da tabela. Porém, caso necessite deixar a tabela sem nenhuma borda, inclusive sem a borda entre linhas (padrão da classe .table), podemos utilizar a classe .table-borderless. Dessa forma, teremos como resultado uma tabela sem nenhuma linha, porém mantendo todas as demais formatações. Vejamos o exemplo abaixo:

Assim sendo, obtemos uma tabela conforme a imagem abaixo:

Table sem borda

Tal como na classe que acrescenta bordas à tabela, também podemos incluir outras classes em conjunto a essa.

Linhas com efeito hover

É possível incluir com o Bootstrap a classe .table-hover. Dessa forma, ao passar o mouse por cima de uma linha da tabela, a mesma realizará um efeito visual. Este recurso também pode ser utilizado em conjunto com outras classes nativas. Experimente aplicar o código abaixo e veja o resultado:

Tabela Bootstrap compacta

Através da classe .table-sm, podemos reduzir o tamanho de uma tabela. Essa classe possui a metade do valor de padding entre linhas que o padrão adotado pelo Bootstrap, o que faz com que ela seja capaz de compactar a tabela. Vejamos então o exemplo a seguir:

Perceba como o resultado será uma tabela com menor espaçamento entre as linhas:

Tabela Bootstrap Pequena

Estilos básicos para o cabeçalho da tabela Bootstrap

Além dos estilos básicos para aplicar na tabela, existe ainda a opção de aplicar um estilo exclusivamente ao cabeçalho da tabela Bootstrap. Para isso, basta acrescentarmos ao <thead> as classes .thead-light ou .thead-dark, deixando assim mais claro ou mais escuro. Veja então no exemplo abaixo duas tabelas:

O resultado final para as tabelas do código acima será o seguinte:

Modificando o <thead> da tabela bootstrap

Classes contextuais para linhas ou células

Existem classes preestabelecidas no Bootstrap que podem ser inseridas dentro das tags de linhas ou células. Elas servem para “colorir” as linhas ou células. Basta acrescentar as classes abaixo em linhas ou em células:

  • .table-active
  • .table-primary
  • .table-secondary
  • .table-success
  • .table-info
  • .table-warning
  • .table-dark
  • .table-light

Portanto, vejamos o exemplo abaixo utilizando essas classes na tabela Bootstrap:

Dessa forma, obtemos o seguinte resultado:

Classes Contextuais da Tabela Bootstrap

Apesar do resultado ser bem interessante, é importante saber que esses estilos não se aplicam para o tema escuro. Ainda assim, você pode estar utilizando as classes de cores de fundo (background) do bootstrap para aplicar às linhas ou células de uma tabela com tema escuro.

Tabelas responsivas

Agora que já sabemos tudo que precisamos para estilizar o visual das nossas tabelas, vamos ver como deixá-las adaptadas a todas as telas!

As tabelas responsivas permitem a realização de rolagem horizontal, de forma rápida e intuitiva. Para tornar uma tabela Boostrap responsiva para todos os tamanhos de tela (viewport), independente do breakpoint, utilizamos a classe .table-responsive em um elemento pai. Dessa forma, basta acrescentar uma div pai à tabela com essa classe, conforme no código do exemplo abaixo:

Observe então que a classe é aplicada à <div> que irá servir como container, elemento pai, da tag <table>.

Porém, caso queira acrescentar o responsivo para breaking points específicos, basta acrescentar à <div> as classes:

  • .table-responsive-sm
  • .table-responsive-md
  • .table-responsive-lg
  • .table-responsive-xl

Para melhor entendimento dos breakpoints apresentados anteriormente, recomendamos a leitura da documentação do Bootstrap sobre os breakpoints responsivos.

Com este tutorial você possui um guia completo para utilizar as tabelas Bootstrap em qualquer página da web! Para isso, você pode adquirir o Bootstrap gratuitamente no site oficial e começar a praticar agora mesmo!

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rafaelmarquesdev/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

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

hhchat