Bootstrap table: saiba como usar e configurar tabelas no Bootstrap!
Última atualização 02 de agosto de 2022
Bootstrap table: saiba como usar e configurar tabelas no Bootstrap!
O Bootstrap Table é um recurso do Bootstrap, disponibilizando uma classe específica para manipulação de tabelas. Muitas vezes, pessoas iniciantes no desenvolvimento com Bootstrap podem achar essa classe um pouco complicada — se você está nesse grupo, saiba que não é nada disso!
Com a ajuda deste guia, até o final, tenha certeza que você vai entender os principais aspectos dessa classe e seu uso em aplicações, por meio de exemplos práticos que mostram o passo a passo para sua aplicação.
Você verá que trabalhar com tabelas em projetos Web não será mais um bicho-de-sete-cabeças e poderá dominar também essa parte tão importante para os projetos mais modernos. Para que isso seja possível, aproveite o seguinte conteúdo, no guia:
Bootstrap Table é uma classe usada a partir do Bootstrap 4. Basicamente, a classe é responsável pela estilização de tabelas, recurso amplamente usado em aplicações do mundo todo e em praticamente todas as áreas. A marcação mais básica do recurso é .table:
Veremos exemplos práticos de uso contextualizado, um pouco mais adiante, no guia!
Usando o Bootstrap Table na prática: 12 exemplos
Neste guia, trazemos até você uma abordagem totalmente prática para facilitar ainda mais o seu aprendizado. Nos exemplos, preparamos o código especialmente para você copiar diretamente para sua máquina ou IDE online, e fazer as alterações que quiser!
Lembre-se de que programação fica muito mais fácil de entender praticando! Então, prepare-se e vamos lá!
1. Criando uma tabela com Bootstrap
O funcionamento da classe é bem simples. Ela utiliza a tabela escrita em HTML e a estiliza de uma maneira mais confortável para visualização pela pessoa que está lendo as informações. Há inúmeras aplicações Web que utilizam tabelas para compartilhamento de informações, como datas e outros tipos de dados organizados.
Confira o código na prática!
O uso da classe mais simples, o .table ou
:
Bootstrap - Trabalhando com tabelas
Exemplo de uma tabela básica:
A classe .table é usada para adicionarmos um estilização básica para nossas tabelas, como linhas horizontais que facilitam a visualização.
Para quem pulou as aulas de HTML ou não se lembra muito bem, as tags ,
,
e são utilizadas para manipulação de tabelas, seus cabeçalhos e células pelo HTML.
Resultado
Abrindo o arquivo HTML no navegador, devemos ver algo bem parecido com isso:
2. Editando o cabeçalho das tabelas
Muitas vezes, durante a manipulação de dados em tabelas, precisamos mostrar mais de um conteúdo na mesma página. Para facilitar a visualização da divisão desses conteúdos, podemos dividir a tabela em cabeçalhos diferentes.
Confira o código, na prática
Abaixo, você pode conferir uma página escrita com o uso de Bootstrap completo. Repare nos diferentes cabeçalhos:
Bootstrap - Editando o cabeçalho das tabelas
Editando o cabeçalho das tabelas - repare na diferença entre os dois cabeçalhos:
A delimitação dos espaços é algo muito importante para as pessoas que lidam com o front-end em seu cotidiano. Para ajudar nessa prática, o Bootstrap 4 traz a possibilidade de adicionarmos bordas em nossas tabelas.
Confira o código, na prática
Para conseguir utilizar o recurso, basta adicionar a classe .table-bordered em seu código, dessa forma:
Agora, coloque o que aprendeu em prática! Use o código acima modificando nosso último exemplo. Basta substituir o código pela nova classe.
Resultado
Após as alterações, você deverá ter um resultado parecido com esse:
5. Removendo as bordas da tabela
E quando não queremos essas delimitações gráficas em nossas tabelas? O Bootstrap auxilia também nessa etapa — é possível retirar qualquer borda com a estilização possibilitada pelo framework.
Confira o código, na prática
O código que você vai utilizar será esse:
Resultado
Após substituir o código de nosso exemplo anterior, teremos o seguinte resultado:
6. Adicionando o efeito “hover” no Bootstrap Table
Usado para ajudar o usuário a seguir na tabela. Ela traz um pequeno detalhe — muda para uma cor mais escura ou mais clara — quando colocamos o mouse sobre a linha. Para usar essa estilização, você deverá incluir o código logo após na classe table, assim como fizemos nos exemplos anteriores.
Confira o código, na prática
Para usar a opção de hover, é bem simples: incluímos a classe .table-hover em nosso código:
Resultado
É esperado que, ao passar o mouse, as linhas da tabela se diferenciem:
7. Criando tabelas pequenas
Usamos a classe .table-small para definir um tamanho menor do que o padrão para tabelas. Para facilitar, lembre-se de que “sm” é a abreviação de “small”, em inglês, que significa “pequeno”. A equipe de front-end costuma utilizar o recurso quando precisa ocupar pouco espaço para mostrar informações em formato de tabela.
Confira o código, na prática
Para aplicar essa classe, use o seguinte código quando declarar a formatação da tabela em seu código:
Resultado
Você deverá ver um resultado bem próximo desse:
Será apenas a mesma tabela, um pouco menor.
8. Classes contextuais: colorindo texto ou células da tabela
Diversas vezes, as pessoas desenvolvedoras de front-end querem ainda mais visibilidade para alguma informação contida na tabela. Para isso, podemos usar as classes contextuais e mudar as cores de texto ou das próprias células.
Confira o código, na prática
Use o mesmo código que adotamos até agora, mas realize as mudanças na classe da tag
, como cores de fundo (“bg-success” e “bg-primary”), dessa forma:
Para ver mais possibilidades, você pode acessar a página oficial do Bootstrap e conferir as diversas cores e modelos aplicáveis em seus projetos!
Resultado
É esperado que a primeira cor de fundo, o bg-success seja verde e o segundo “bg-primary, seja azul — a terceira linha não contará com modificações:
9. Usando legendas em tabelas
Usar legendas para algumas tabelas é uma prática comum e, muitas vezes, necessária para um melhor entendimento das informações ali dispostas. Por isso, é possível usar a tag
para legendar a sua tabela.
Confira o código, na prática
Inclua a tag
…
logo depois de declarar a classe .table para inserir sua legenda:
…
Uma pequena lista de usuários em cores diferentes - esta é uma legenda caption
….
Resultado
10. Tornando as tabelas responsivas
No mundo do desenvolvimento, responsividade é sempre colocada em primeiro plano. Não seria diferente com a formatação e estilização das tabelas. Para usar a responsividade disponibilizada pelo Bootstrap em suas tabelas, usamos a classe .table-responsive.
Confira o código, na prática
Você poderá usar o seguinte código em seu seu documento HTML:
...
Resultado
Ao ser aplicado, você poderá conferir uma barra de rolagem em sua tabela, quando ela não couber inteira na tela do usuário. De outra forma, ela vai encolher ou esticar, conforme a tela de exibição:
11. Adicionando breakpoints de responsividade em locais específicos da tabela
Use .table-responsive {-sm; -md; -lg; -xl} — com o “sm” sendo o menor e o “xl” sendo o maior — para marcar quebras da página ao trabalhar com tabelas responsivas.Ao marcarmos o ponto em que não queremos responsividade, a tabela deverá se comportar normalmente.
Confira o código, na prática
O código a ser inserido deverá ficar parecido com esse:
...
Resultado
Caso usemos a classe .table-responsive-md depois de utilizarmos a table-responsive-sm em diferentes linhas, quebraremos nossa tabela, e ela ficará dessa maneira:
Então, é bom lembrar que a tabela sempre parecerá quebrada, até que sejam designados “Viewports” corretos!
12. Criando uma tabela escura
Muitas pessoas gostam do “dark mode”, e é por isso que o Bootstrap já traz essa possibilidade também para as tabelas! Com essa classe, você consegue deixar o plano de fundo totalmente preto e com a fonte clara!
Confira o código, na prática
Para usar a tabela na sua forma escura, basta usar o seguinte código:
Resultado
Ao abrirmos nosso código no navegador, teremos um resultado bem parecido com esse:
Chegamos ao final de mais um guia! Neste conteúdo, conferimos os principais detalhes que envolvem as tabelas em nossas aplicações Web usando o Bootstrap 4 Framework. Exploramos cada caso e possibilidade de modificação desses elementos e diferentes tipos de estilização e de responsividade, de maneira prática e com exemplos.
Você gostou e quer saber ainda mais sobre como programar aplicações para sistemas da Web? Então, faça a inscrição em nosso processo seletivo, acesse nosso curso introdutório gratuito de JavaScript e tire todas as suas dúvidas em nossa comunidade do Slack.
Nascido na terra distante e quente de Teresina - PI em 1986, é quase Bacharel em Sistemas de Informação e trabalha com Desenvolvimento de Software desde 2007. Começou sua carreira na linguagem PHP e depois, em 2009, mudou para Ruby, na qual teve a felicidade de trabalhar no projeto de tradução da documentação para português (do Brasil) do framework Ruby on Rails. Já trabalhou em empresas como Jus Navigandi, e Enjoei, marketplace. Além de ter lidado com as linguagens Ruby e GoLang (2013-2016), e por fim impactou mais de 2 milhões de estudantes em todo o Brasil no AppProva, com as linguagens Ruby, PHP, JavaScript, GoLang e Elixir. Atualmente na Trybe é responsável pelo time de tecnologia de Experiência de Estudantes.
