Tabela comum
A classe .table define um estilo básico (claro,padding e divisores horizontais) para a tabela:
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<table
class="table">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabelas zebradas
Striped Rows
A classe .table-striped class define o estilo tabela zebrada :
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<table class="table
table-striped">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabelas com bordas
A classe .table-bordered adiciona bordas em todos os lados da tabela e das células :
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<table class="table
table-bordered">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabelas com efeito Mouse over (hover)
A classe .table-hover habilita o eveito hover (fundo cinza quando o mouse esta sobre a linha) :
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<table class="table
table-hover">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabelas com fundo escuro
A classe .table-dark adiciona um fundo preto a tabela:
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<table class="table
table-dark">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabelas com fundo escuro e zebrado
Combine as classes .table-dark e .table-striped para criar um fundo escuro e zebrado a tabela :
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<div style="padding-left:5px" class="container">
<p>Combine as classes .table-dark e .table-striped para criar um fundo escuro e zebrado a tabela :</p>
<table class="table
table-dark table-striped">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
</div>
BootStrap - Tabelas com fundo escuro e com efeito mouse over
A classe .table-hover adiciona o efeitoo hover effect (cor de fundo cinza) nas linhas da tabela:
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<table class="table
table-dark table-hover">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabelas sem bordas
A classe .table-borderless remove as bordas da tabela:
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<table class="table
table-borderless">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabelas com bordas contextualizadas
As classes contextuais podem ser usadas para dar a cor de fundo na tabela, nas linhas ou mesmo nas células. As classes que podem ser usadas são : .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:
| Primeiro Nome |
Sobrenome |
Email |
| Default |
Defaultson |
def@algumemail.com |
| Primary |
Joe |
joe@exemplo.com |
| Success |
Ninguém |
João@exemplo.com |
| Danger |
Mole |
maria@exemplo.com |
| Info |
Agosto |
Júlio@exemplo.com |
| Warning |
Refs |
bo@exemplo.com |
| Active |
Activeson |
act@exemplo.com |
| Secondary |
Secondson |
sec@exemplo.com |
| Light |
Angie |
angie@exemplo.com |
| Dark |
Bo |
bo@exemplo.com |
Código do item acima :
<table class="table">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@algumemail.com</td>
</tr>
<tr class="
table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe@exemplo.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr class="
table-danger">
<td>Danger</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr class="
table-info">
<td>Info</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
<tr class="
table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo@exemplo.com</td>
</tr>
<tr class="
table-active">
<td>Active</td>
<td>Activeson</td>
<td>act@exemplo.com</td>
</tr>
<tr class="
table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec@exemplo.com</td>
</tr>
<tr class="
table-light">
<td>Light</td>
<td>Angie</td>
<td>angie@exemplo.com</td>
</tr>
<tr class="
table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabelas com o cabeçalho diferenciado
Use a classe .thead-dark para adicionar um funco escuro aos cabeçalhos das tabelas e a classe .thead-light para adicionar um fundo cinza aos cabeçalhos das tabelas:
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<table class="table">
<thead class="
thead-dark">
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="
thead-light">
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabelas pequenas
A classe .table-sm faz a tabela menor por diminuir o padding das células pela metade :
| Primeiro Nome |
Sobrenome |
Email |
| João |
Ninguém |
João@exemplo.com |
| Maria |
Mole |
maria@exemplo.com |
| Júlio |
Agosto |
Júlio@exemplo.com |
Código do item acima :
<table class="table table-bordered
table-sm">
<thead>
<tr>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Ninguém</td>
<td>João@exemplo.com</td>
</tr>
<tr>
<td>Maria</td>
<td>Mole</td>
<td>maria@exemplo.com</td>
</tr>
<tr>
<td>Júlio</td>
<td>Agosto</td>
<td>Júlio@exemplo.com</td>
</tr>
</tbody>
</table>
BootStrap - Tabela responsiva
A classe .table-responsive cria uma tabela responsiva que rolará horizontalmente em telas com menos de 992px de largura (se necessário). Quando visualizadas em telas maiores que 992px não haverá diferença :
| # |
Primeiro Nome |
Sobrenome |
Idade |
Cidade |
País |
Sexo |
exemplo |
exemplo |
exemplo |
exemplo |
| 1 |
Ana |
Pitanga |
35 |
Ladeira abaixo |
Brasil |
Mulher |
Yes |
Yes |
Yes |
Yes |
Código do item acima :
<div class="
table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Primeiro Nome</th>
<th>Sobrenome</th>
<th>Idade</th>
<th>Cidade</th>
<th>País</th>
<th>Sexo</th>
<th>exemplo</th>
<th>exemplo</th>
<th>exemplo</th>
<th>exemplo</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ana</td>
<td>Pitanga</td>
<td>35</td>
<td>Ladeira abaixo</td>
<td>Brasil</td>
<td>Mulher</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
</div>