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
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
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
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
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
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
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
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
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
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
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
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 :