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.
Neste artigo, abordamos os seguintes tópicos:
-
- Incluindo a classe de tabela Bootstrap
- Estilos básicos para a tabela Bootstrap
- Tema escuro
- Alternando a cor das linhas
- Mesclando o tema escuro com as linhas alternadas
- Tabela com todas as bordas
- Tabela sem bordas
- Linhas com efeito hover
- Tabela bootstrap compacta
- Estilos básicos para o cabeçalho da tabela Bootstrap
- Classes contextuais para linhas ou células
- Tabelas responsivas
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:
<table class="table">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
<tr>
<th>3</th>
<td>Alan</td>
<td>Maia</td>
<td>alan_maia</td>
</tr>
</tbody>
</table>
Como resultado, vamos obter uma 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:
<table class="table table-dark">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
<tr>
<th>3</th>
<td>Alan</td>
<td>Maia</td>
<td>alan_maia</td>
</tr>
</tbody>
</table>
Neste exemplo, o resultado será:
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:
<table class="table table-striped">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
<tr>
<th>3</th>
<td>Alan</td>
<td>Maia</td>
<td>alan_maia</td>
</tr>
</tbody>
</table>
Dessa forma, obtemos o resultado conforme a imagem abaixo:
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:
<table class="table table-striped table-dark">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
<tr>
<th>3</th>
<td>Alan</td>
<td>Maia</td>
<td>alan_maia</td>
</tr>
</tbody>
</table>
Dessa forma, unindo os dois efeitos na mesma tabela, o resultado do exemplo será:
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:
<table class="table table-bordered">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
<tr>
<th>3</th>
<td>Alan</td>
<td>Maia</td>
<td>alan_maia</td>
</tr>
</tbody>
</table>
O resultado será conforme a imagem abaixo:
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:
<table class="table table-borderless">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
<tr>
<th>3</th>
<td>Alan</td>
<td>Maia</td>
<td>alan_maia</td>
</tr>
</tbody>
</table>
Assim sendo, obtemos uma tabela conforme a imagem abaixo:
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:
<table class="table table-hover">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
<tr>
<th>3</th>
<td>Alan</td>
<td>Maia</td>
<td>alan_maia</td>
</tr>
</tbody>
</table>
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:
<table class="table table-sm">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
<tr>
<th>3</th>
<td>Alan</td>
<td>Maia</td>
<td>alan_maia</td>
</tr>
</tbody>
</table>
Perceba como o resultado será uma tabela com menor espaçamento entre as linhas:
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:
<table class="table">
<thead class="thead-light">
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
</tbody>
</table>
<br>
<table class="table">
<thead class="thead-dark">
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>Usuário</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Joao</td>
<td>Mateus</td>
<td>johny</td>
</tr>
<tr>
<th>2</th>
<td>Jose</td>
<td>Silva</td>
<td>jsilva</td>
</tr>
</tbody>
</table>
O resultado final para as tabelas do código acima será o seguinte:
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:
<table class="table">
<thead>
<tr>
<th>Classe</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class='table-active'>
<td>.table-active</td>
<td>exemplo</td>
</tr>
<tr class='table-primary'>
<td>.table-primary</td>
<td>exemplo</td>
</tr>
<tr class='table-secondary'>
<td>.table-secondary</td>
<td>exemplo</td>
</tr>
<tr class='table-success'>
<td>.table-success</td>
<td>exemplo</td>
</tr>
<tr class='table-info'>
<td>.table-info</td>
<td>exemplo</td>
</tr>
<tr class='table-danger'>
<td>.table-danger</td>
<td>exemplo</td>
</tr>
<tr class='table-warning'>
<td>.table-warning</td>
<td>exemplo</td>
</tr>
<tr class='table-dark'>
<td>.table-dark</td>
<td>exemplo</td>
</tr>
<tr class='table-light'>
<td>.table-light</td>
<td>exemplo</td>
</tr>
</tbody>
</table>
Dessa forma, obtemos o seguinte resultado:
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:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>numero</th>
<th>exemplo</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>exemplo</td>
</tr>
<tr>
<td>02</td>
<td>exemplo</td>
</tr>
</tbody>
</table>
</div>
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!
