Tabelas de bootstrap para iniciantes: como usar este framework para criar sites responsivos

Tabelas de bootstrap para iniciantes: como usar este framework para criar sites responsivos

Ainda que os Bootstraps poupem um tempo considerável no gerenciamento de templates dos desenvolvedores, seu objetivo-chave é criar sites responsivos.

Porém, antes de começar a falar sobre o tema, você precisa entender o que é Bootstrap e como funciona esse framework web. E mais, como através dele é possível que a interface do usuário de um site ou app seja acessada de qualquer tipo de tela, de forma intuitiva para o usuário e descomplicada ao programador.

Bootstrap: o que é e como funciona?

O Bootstrap é um código aberto que ganhou fama por ser utilizado para montar a plataforma da rede social das notícias “quentinhas”, o Twitter.

Quando um desenvolvedor trabalha na programação de um site, ele tem a opção de utilizar o código aberto do Bootstrap para facilitar em sua montagem (com códigos previamente prontos). Com ele, de forma muito mais prática, é possível tornar esse site responsivo.

Essa ferramenta front-end e de código-aberto, quando criada por Mark Otto e Jacob Thornton (na época, funcionários do Twitter) tinha o objetivo de tornar o desenvolvimento web algo mais rápido e prático, e não um universo sem fim de códigos.

Por isso, ele contém todos os tipos de templates baseados em HTML e CSS para várias funções e componentes, como por exemplo: navegação, sistema de grades, além de plugins em JavaScript (jQuery), para implementar recursos como dropdowns, carrosséis de imagens e slideshows de maneira fácil e com pouco código.

Seus padrões seguem os princípios de usabilidade e as tendências de design para interfaces, o que resulta em páginas esteticamente mais agradáveis e também úteis, de simples navegação.

Uma equação interessante e sustentável para usuário, empresa e desenvolvedor.

Guia prático sobre tabelas Bootstrap

Como o Bootstrap usa três linguagens: o HTML, o CSS e JavaScript, é importante que você tenha conhecimentos básicos em cada uma delas. Mesmo que já existam classes e funções prontas nele, é possível que surjam alterações pontuais no meio do caminho.

Por falar em programação, entre as vantagens deste framework está a de ter menos código digitado, ou seja, menos dor de cabeça para encontrar problemas de sintaxe.

Como um recurso muito utilizado na web é o elemento de tabelas, os desenvolvedores do Bootstrap pensaram numa forma de incluí-las em seus estilos predefinidos.

Assim, no uso prático da ferramenta, basta adicionar classes aos elementos para obter o resultado desejado. Ao criar uma tabela no HTML, se pode incluir na tag <table> a classe .table, nativa do Bootstrap, para que a tabela ganhe algumas formatações visuais.

Tabela

Na composição de suas tabelas do Bootstrap, você pode optar por muitos estilos. Abaixo, vamos dar alguns exemplos de tabela simples:

Tema escuro: basta acrescentar a classe .table-dark.

Alternar a cor das linhas: conhecida como linhas zebradas, ao aplicar a classe .table-striped, se consegue um efeito de cores alternadas entre as linhas do corpo da tabela.

Tabela com todas as bordas: no padrão da classe .table, já é possível observar uma borda entre as linhas como padrão. Porém, você pode adicionar bordas entre as colunas, também por meio da classe .table-bordered.

Tabela sem borda: para esse estilo, é utilizada a classe .table-borderless. Ou seja, uma tabela sem linha, porém que mantém todas as outras formatações.

Tabela compacta: por meio da classe .table-sm, se reduz o tamanho de uma tabela. Como ela possui a metade do valor de padding entre linhas que o padrão adotado pelo Bootstrap, é possível compactá-la.

Existem as classes preestabelecidas no Bootstrap, que têm a missão (quando inseridas dentro das tags) de “colorir” as linhas ou células. Para isso, é só acrescentar nestas linhas, ou em células, as classes abaixo:

➜ .table-active

➜ .table-primary

➜ .table-secondary

➜ .table-success

➜ .table-info

➜ .table-warning

➜ .table-dark

➜ .table-light

Depois de entender um pouco de estilização visual das tabelas, é necessário compreender também sobre como será a adequação delas na tela. Neste ponto, User Experience (UX) entra no jogo.

Aqui será necessário considerar a experiência de quem realmente testará a usabilidade deste site ou app. E as tabelas responsivas, com a realização de rolagem horizontal, de maneira rápida e intuitiva, vão ao encontro desse objetivo.

Para tornar uma tabela do Boostrap responsiva para todos os tamanhos de tela (viewport), o desenvolvedor utilizará a classe .table-responsive em um elemento pai. Dessa forma, basta acrescentar uma div pai à tabela com essa classe.

Última tabela

Para o desenvolvedor que deseja acrescentar o responsivo para breaking points mais específicos e personalizados, é necessário adicionar <div> às classes:

➜ .table-responsive-sm

➜ .table-responsive-md

➜ .table-responsive-lg

➜ .table-responsive-xl

Se você chegou até aqui, já deve ter compreendido que desenvolver tabelas neste framework precisa fazer parte do hall das ferramentas que você precisa saber usar.

Mas,se também surgiram dúvidas novas de como evoluir nesse uso para aprimorar os resultados, indo ao encontro das necessidades do mercado atual, que tal se especializar em um curso que te prepare para isso?

Na Digital House, temos cursos na área de programação, onde você vai aprender esta habilidade digital com professores especialistas de mercado através de uma metodologia disruptiva, a sala de aula invertida.

Ou seja, vai compreender linguagens de programação, aplicá-las em frameworks de maneira ágil e assertiva, evoluindo sua carreira de maneira prática e descomplicada.