English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
A tabela HTML é usada para exibir dados em um formato de grade (como linhas e colunas). Use Bootstrap4pode mudar rapidamente e convenientemente a aparência da tabela.
Bootstrap4 Defina o estilo da tabela básica com a classe .table, exemplo a seguir:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tabela básica</h2> <p>Defina o estilo da tabela básica com a classe .table: </p> <table class="table"> <thead> <tr> <th>Primeiro Nome</th> <th>Sobrenome</th> <th>Email</th> </tr> </thead> <tbody> <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> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
Adicione .table-A classe striped, você verá <tbody> As linhas internas da tabela mostrarão listras, conforme o exemplo a seguir:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tabela com listras</h2> <p>Adicione .table-A classe striped, para definir uma tabela com listras: </p> <table class="table table-striped"> <thead> <tr> <th>Primeiro Nome</th> <th>Sobrenome</th> <th>Email</th> </tr> </thead> <tbody> <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> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
.table-A classe bordered pode adicionar uma borda à tabela
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tabela com borda</h2> <p>.table-A classe bordered pode adicionar uma borda à tabela: </p> <table class="table table-bordered"> <thead> <tr> <th>Primeiro Nome</th> <th>Sobrenome</th> <th>Email</th> </tr> </thead> <tbody> <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> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
.table-A classe hover pode adicionar o efeito de sobreposição do mouse a cada linha da tabela (fundo cinza):
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tabela em estado de sobreposição do mouse</h2> <p>.table-A classe hover pode adicionar o efeito de sobreposição do mouse a cada linha da tabela (fundo cinza): </p> <table class="table table-hover"> <thead> <tr> <th>Primeiro Nome</th> <th>Sobrenome</th> <th>Email</th> </tr> </thead> <tbody> <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> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
.table-A classe dark pode adicionar um fundo preto à tabela:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tabela com fundo preto</h2> <p>.table-A classe dark pode adicionar um fundo preto à tabela:/p> <table class="table table-dark"> <thead> <tr> <th>Primeiro Nome</th> <th>Sobrenome</th> <th>Email</th> </tr> </thead> <tbody> <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> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
Uso conjunto .table-dark e .table-A classe striped pode criar uma tabela com listras pretas:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Tabela com listras pretas</h2> <p>Uso conjunto .table-dark e .table-A classe striped pode criar uma tabela com listras pretas: </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>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> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
Uso conjunto .table-dark e .table-A classe hover pode definir o efeito de sobreposição do mouse em uma tabela de fundo preto:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Efeito de sobreposição do mouse - Tabela com fundo preto/h2> <p>Uso conjunto .table-dark e .table-A classe hover pode definir o efeito de sobreposição do mouse em uma tabela de fundo preto: </p> <table class="table table-dark table-hover"> <thead> <tr> <th>Primeiro Nome</th> <th>Sobrenome</th> <th>Email</th> </tr> </thead> <tbody> <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> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
Para definir cores de significado, pode-se atribuir cores às linhas ou células da tabela:
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Definir cores de significado</h2> <p>Para definir cores de significado, pode-se atribuir cores às linhas ou células da tabela:</p> <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>[email protected]</td> </tr> <tr class="table-primary"> <td>Primary</td> <td>Joe</td> <td>[email protected]</td> </tr> <tr class="table-success"> <td>Success</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr class="table-danger"> <td>Danger</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr class="table-info"> <td>Info</td> <td>Dooley</td> <td>[email protected]</td> </tr> <tr class="table-warning"> <td>Warning</td> <td>Refs</td> <td>[email protected]</td> </tr> <tr class="table-active"> <td>Active</td> <td>Activeson</td> <td>[email protected]</td> </tr> <tr class="table-secondary"> <td>Secondary</td> <td>Secondson</td> <td>[email protected]</td> </tr> <tr class="table-light"> <td>Light</td> <td>Angie</td> <td>[email protected]</td> </tr> <tr class="table-text dark-dark"> <td>Dark</td> <td>Bo</td> <td>[email protected]</td> </tr> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
A tabela a seguir lista as descrições das classes de cor de tabela:
| Class Name | Descrição |
|---|---|
| .table-primary | Azul: indica que esta é uma operação importante |
| .table-success | Verde: indica que esta é uma operação permitida |
| .table-danger | Vermelho: indica que esta é uma operação perigosa |
| .table-info | Azul claro: indica que o conteúdo foi alterado |
| .table-warning | Laranja: indica uma operação que deve ser notada |
| .table-active | Cinza: usado para efeitos de mouseover |
| .table-secondary | Cinza: indica que o conteúdo não é muito importante |
| .table-light | Cinza claro, pode ser usado como cor de fundo das linhas da tabela |
| .table-dark | Cinza escuro, pode ser usado como cor de fundo das linhas da tabela |
No Bootstrap v4.0.0-beta.2 no .thead-A classe dark é usada para adicionar uma cor de fundo preta aos cabeçalhos de tabela, .thead-A classe light é usada para adicionar uma cor de fundo cinza aos cabeçalhos de tabela:
No Bootstrap v4.0.0-beta Esta versão, .thead-A classe inverse é usada para adicionar uma cor de fundo preta aos cabeçalhos de tabela, .thead-A classe default é usada para adicionar uma cor de fundo cinza aos cabeçalhos de tabela.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Cor do cabeçalho</h2> <p>.thead-A classe dark é usada para adicionar uma cor de fundo preta aos cabeçalhos de tabela, .thead-A classe light é usada para adicionar uma cor de fundo cinza aos cabeçalhos de tabela:</p> <table class="table"> <thead class="thead-dark"> <tr> <th>Primeiro Nome</th> <th>Sobrenome</th> <th>Email</th> </tr> </thead> <tbody> <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> </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>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> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
.table-sm class is used to set smaller tables by reducing the inner padding:<
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Smaller Tables</h2> <p>.table-sm class is used to set smaller tables by reducing the inner padding:</p> <table class="table table-bordered table-sm"> <thead> <tr> <th>Primeiro Nome</th> <th>Sobrenome</th> <th>Email</th> </tr> </thead> <tbody> <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> </tbody> </table> </div> </body> </html>Teste e Veja ‹/›
.table-responsive class is used to create responsive tables: at screen widths less than 992px then it will create a horizontal scrollbar if the visible area width is greater than 992px then it will display different effects (without scrollbars):
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Responsive Table</h2> <p>.table-responsive class is used to create responsive tables: at screen widths less than 992px then it will create a horizontal scrollbar if the visible area width is greater than 992px then it will display different effects (without scrollbars):</p> <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>Anna</td> <td>Pitt</td> <td><35</td> <td> Nova York</td> <td>USA</td> <td>Feminino</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </body> </html>Teste e Veja ‹/›
You can use the following classes to set scrollbars at specified screen widths:
| Class Name | Screen Width |
|---|---|
| .table-responsive-sm | < 576px |
| .table-responsive-md | < 768px |
| .table-responsive-lg | < 992px |
| .table-responsive-xl | < 1200px |
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Responsive Table</h2> <p>.table-responsive-sm classe é usada para criar tabelas responsivas, quando a largura da tela for menor 576px quando for exibida a barra de rolagem horizontal.</p> <p>Reduza o tamanho do navegador para ver o efeito.</p> <div class="table-responsive-sm"> <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>Anna</td> <td>Pitt</td> <td><35</td> <td> Nova York</td> <td>USA</td> <td>Feminino</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table> </div> </div> </body> </html>Teste e Veja ‹/›