HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tabelas de inicialização

❮ Anterior Próximo ❯

Tabela Básica de Bootstrap

Uma mesa Bootstrap básica tem um preenchimento leve e apenas divisores horizontais.

A .tableclasse adiciona estilo básico a uma tabela:

Exemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Linhas listradas

A .table-stripedclasse adiciona listras de zebra a uma tabela:

Exemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tabela com bordas

A .table-borderedclasse adiciona bordas em todos os lados da tabela e células:

Exemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Linhas ao passar o mouse

A .table-hoverclasse adiciona um efeito de foco (cor de fundo cinza) nas linhas da tabela:

Exemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Tabela condensada

A .table-condensedclasse torna uma tabela mais compacta cortando o preenchimento de células pela metade:

Exemplo

Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]

Classes contextuais

As classes contextuais podem ser usadas para colorir linhas da tabela ( <tr>) ou células da tabela ( <td>):

Exemplo

Firstname Lastname Email
Default Defaultson [email protected]
Success Doe [email protected]
Danger Moe [email protected]
Info Dooley [email protected]
Warning Refs [email protected]
Active Activeson [email protected]

As classes contextuais que podem ser usadas são:

Classe Descrição
.active Aplica a cor de foco à linha da tabela ou célula da tabela
.success Indica uma ação bem-sucedida ou positiva
.info Indica uma mudança ou ação informativa neutra
.warning Indica um aviso que pode precisar de atenção
.danger Indica uma ação perigosa ou potencialmente negativa

Tabelas responsivas

A .table-responsiveclasse cria uma tabela responsiva. A tabela rolará horizontalmente em dispositivos pequenos (abaixo de 768px). Ao visualizar em algo maior que 768px de largura, não há diferença:

Exemplo

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Teste-se com exercícios

Exercício:

Adicione um atributo de classe para estilizar a tabela como uma tabela básica do Bootstrap.

<table >
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  <tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
<table>

Referência Completa da Tabela Bootstrap

Para uma referência completa de todas as classes de tabela, acesse nossa Referência de Tabelas Bootstrap completa .


❮ Anterior Próximo ❯