Bootstrap Como estilizar tabelas

Prévia do material em texto

Bootstrap: Como estilizar tabelas
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.
Listagem 1. Estilização básica de tabela com o Bootstrap
https://www.devmedia.com.br/curso/bootstrap-trabalhando-com-design-responsivo/407
O resultado da execução desse código é apresentado na Figura 1.
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.
Listagem 2. Configurando classes opcionais para as linhas da tabela
Com isso, cada linha ganhará uma cor diferente, como podemos 
observar na Figura 3.
	Bootstrap: Como estilizar tabelas
	Motivação
	Tabela básica no Bootstrap
	Alterando as linhas de uma tabela