Bootstrap: Tabelas

Q: P: Botões ou distintivos são estilizados corretamente dentro de tabelas?

R: Absolutamente sem problema. Todos os componentes do Bootstrap mantêm seu estilo normal dentro de tabelas. Você pode colocar botões, distintivos, alternâncias, etc., dentro de .

Q: P: Tabelas podem fazer ordenação/busca/paginação?

R: A table do Bootstrap apenas trata do estilo. Ordenação/busca/paginação precisam ser implementadas em combinação com bibliotecas JavaScript (como DataTables).

Q: P: A barra de rolagem para tabelas responsivas aparece apenas quando necessário?

R: Sim. table-responsive define overflow-x: auto; uma barra de rolagem horizontal só aparece quando a largura da tabela excede a largura do contêiner, e some automaticamente quando há menos conteúdo.

Última atualização: 2026-08-26

1. Introdução

(1) Pré-requisitos

Lição 11: Grupos de Lista e Distintivos

(2) 🎯 O que você vai aprender

Usar .table para embelezar rapidamente tabelas HTML
Usar variações como table-striped, table-hover
Controlar bordas com table-bordered, table-borderless
Colorir linhas/colunas com table-{color}
Criar tabelas responsivas com table-responsive

(3) O Ponto de Dor

A Alice construiu uma página de gerenciamento de usuários que precisa exibir ID do usuário, nome, e-mail, data de registro e botões de ação—mostrar um pedaço de dado em uma table é mais intuitivo do que usar cartões ou listas.

(4) A Solução

Tabelas são o método central de exibição de dados. A classe de tabela do Bootstrap requer apenas adicionar .table a uma <table> para obter um estilo de tabela limpo e profissional.

(5) O Benefício

Com as classes utilitárias de tabela do Bootstrap, você pode criar rapidamente tabelas de dados organizadas e profissionais, tornando os dados claros à primeira vista.

2. Tabelas Básicas

▶ Exemplo: Tabelas Básicas

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Tabela</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h5>Tabela Básica</h5>
    <table class="table">
      <thead>
        <tr><th>#</th><th>Nome</th><th>E-mail</th><th>Status</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>Ativo</td></tr>
        <tr><td>2</td><td>Bob</td><td>bob@example.com</td><td>Ativo</td></tr>
        <tr><td>3</td><td>Charlie</td><td>charlie@example.com</td><td>Inativo</td></tr>
      </tbody>
    </table>

    <h5>Linhas Listradas</h5>
    <table class="table table-striped">
      <thead>
        <tr><th>#</th><th>Produto</th><th>Preço</th><th>Estoque</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Laptop</td><td>$1.200</td><td>15</td></tr>
        <tr><td>2</td><td>Monitor</td><td>$350</td><td>42</td></tr>
        <tr><td>3</td><td>Teclado</td><td>$80</td><td>108</td></tr>
      </tbody>
    </table>

    <h5>Hover + Bordas</h5>
    <table class="table table-bordered table-hover">
      <thead class="table-dark">
        <tr><th>#</th><th>Cidade</th><th>País</th><th>População</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>Tóquio</td><td>Japão</td><td>37M</td></tr>
        <tr><td>2</td><td>Nova York</td><td>EUA</td><td>8,5M</td></tr>
        <tr><td>3</td><td>Londres</td><td>Reino Unido</td><td>9M</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

▶ Experimente

3. Variações de Tabela

Classe	Efeito	Cenário
`table`	Estilo básico (tipografia, margens, linhas horizontais)	Tabela minimalista
`table-striped`	Linhas com fundo cinza claro alternado	Dados/relatórios
`table-bordered`	Todas as células com bordas	Quando separação clara é necessária
`table-borderless`	Sem bordas	Design minimalista
`table-hover`	Fundo mais escuro no hover da linha	Tabelas interativas
`table-sm`	Versão compacta (padding pela metade)	Tabelas densas de dados

4. Cores de Linha/Coluna

HTML

<table class="table">
  <thead>
    <tr><th>Tarefa</th><th>Status</th><th>Prazo</th></tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Revisão de design</td><td>Concluído</td><td>10 Jun</td>
    </tr>
    <tr class="table-warning">
      <td>Implementação frontend</td><td>Em Andamento</td><td>20 Jun</td>
    </tr>
    <tr class="table-danger">
      <td>Migração de banco de dados</td><td>Atrasado</td><td>5 Jun</td>
    </tr>
  </tbody>
</table>

▶ Experimente

Classe	Significado	Quando Usar
`table-primary`	Azul	Linha de informação
`table-success`	Verde	Sucesso/Concluído
`table-danger`	Vermelho	Erro/Atrasado
`table-warning`	Amarelo	Aviso/Em Andamento
`table-info`	Ciano	Dica/Informação
`table-active`	Cinza	Selecionado/Destacado

5. Cores de Cabeçalho

HTML

<table class="table">
  <thead class="table-dark">
    <tr><th>Cabeçalho Escuro</th><th>Coluna</th></tr>
  </thead>
  <tbody>
    <tr><td>Dado</td><td>Dado</td></tr>
  </tbody>
</table>

<table class="table">
  <thead class="table-light">
    <tr><th>Cabeçalho Claro</th><th>Coluna</th></tr>
  </thead>
  <tbody>
    <tr><td>Dado</td><td>Dado</td></tr>
  </tbody>
</table>

▶ Experimente

6. Tabelas Responsivas

HTML

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr><th>#</th><th>Nome</th><th>E-mail</th><th>Telefone</th><th>Endereço</th><th>Cidade</th><th>País</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Alice</td><td>alice@example.com</td><td>+1-555-0100</td><td>Rua Principal, 123</td><td>Nova York</td><td>EUA</td><td>Ativo</td></tr>
    </tbody>
  </table>
</div>

▶ Experimente

7. Mais Exemplos de Tabela

▶ Exemplo: Tabela de Dados Abrangente

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Tabela Avançada</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <table class="table table-striped table-bordered table-hover">
      <thead class="table-dark">
        <tr>
          <th>ID do Pedido</th>
          <th>Cliente</th>
          <th>Produto</th>
          <th>Valor</th>
          <th>Status</th>
          <th>Ações</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>#1024</td>
          <td>Alice Chen</td>
          <td>Mouse Sem Fio</td>
          <td>$29,99</td>
          <td><span class="badge bg-success">Enviado</span></td>
          <td><button class="btn btn-sm btn-outline-primary">Ver</button></td>
        </tr>
        <tr>
          <td>#1025</td>
          <td>Bob Wang</td>
          <td>Teclado Mecânico</td>
          <td>$89,99</td>
          <td><span class="badge bg-warning">Processando</span></td>
          <td><button class="btn btn-sm btn-outline-primary">Ver</button></td>
        </tr>
        <tr class="table-danger">
          <td>#1026</td>
          <td>Charlie Li</td>
          <td>Hub USB-C</td>
          <td>$45,00</td>
          <td><span class="badge bg-danger">Cancelado</span></td>
          <td><button class="btn btn-sm btn-outline-primary">Ver</button></td>
        </tr>
        <tr>
          <td>#1027</td>
          <td>Diana Zhang</td>
          <td>Suporte de Monitor</td>
          <td>$34,99</td>
          <td><span class="badge bg-success">Entregue</span></td>
          <td><button class="btn btn-sm btn-outline-primary">Ver</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

▶ Experimente

▶ Exemplo: Tabela Listrada com Hover

HTML

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>Posição</th>
      <th>Jogador</th>
      <th>Pontuação</th>
      <th>Nível</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>PlayerOne</td>
      <td>9.850</td>
      <td>Especialista</td>
    </tr>
    <tr>
      <td>2</td>
      <td>SpeedRunner</td>
      <td>8.720</td>
      <td>Avançado</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Newbie99</td>
      <td>4.310</td>
      <td>Intermediário</td>
    </tr>
    <tr>
      <td>4</td>
      <td>GameMaster</td>
      <td>2.105</td>
      <td>Iniciante</td>
    </tr>
  </tbody>
</table>

▶ Experimente

▶ Exemplo: Tabela com Distintivos e Botões

HTML

<table class="table table-sm">
  <thead class="table-light">
    <tr>
      <th>Tarefa</th>
      <th>Prioridade</th>
      <th>Responsável</th>
      <th>Data de Vencimento</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Desenhar página inicial</td>
      <td><span class="badge bg-danger">Alta</span></td>
      <td>Alice</td>
      <td>2026-07-10</td>
      <td><button class="btn btn-success btn-sm">Concluir</button></td>
    </tr>
    <tr>
      <td>Escrever docs de API</td>
      <td><span class="badge bg-warning">Média</span></td>
      <td>Bob</td>
      <td>2026-07-15</td>
      <td><button class="btn btn-outline-primary btn-sm">Editar</button></td>
    </tr>
    <tr>
      <td>Corrigir bug de login</td>
      <td><span class="badge bg-danger">Crítica</span></td>
      <td>Charlie</td>
      <td>2026-07-08</td>
      <td><button class="btn btn-danger btn-sm">Corrigir Agora</button></td>
    </tr>
    <tr>
      <td>Atualizar dependências</td>
      <td><span class="badge bg-success">Baixa</span></td>
      <td>Diana</td>
      <td>2026-07-20</td>
      <td><button class="btn btn-outline-secondary btn-sm">Pular</button></td>
    </tr>
  </tbody>
</table>

▶ Experimente

▶ Exemplo: Demonstração de Tabela Responsiva

HTML

<div class="table-responsive">
  <table class="table table-bordered">
    <thead class="table-primary">
      <tr>
        <th>#</th>
        <th>Nome Completo</th>
        <th>E-mail</th>
        <th>Telefone</th>
        <th>Departamento</th>
        <th>Função</th>
        <th>Status</th>
        <th>Entrou em</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Alice Chen</td>
        <td>alice@empresa.com</td>
        <td>+1-555-0101</td>
        <td>Engenharia</td>
        <td>Desenvolvedor Sênior</td>
        <td><span class="badge bg-success">Ativo</span></td>
        <td>2024-03-15</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Bob Wang</td>
        <td>bob@empresa.com</td>
        <td>+1-555-0102</td>
        <td>Design</td>
        <td>Líder UI/UX</td>
        <td><span class="badge bg-success">Ativo</span></td>
        <td>2024-06-01</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Charlie Li</td>
        <td>charlie@empresa.com</td>
        <td>+1-555-0103</td>
        <td>Marketing</td>
        <td>Gerente de Conteúdo</td>
        <td><span class="badge bg-warning">Ausente</span></td>
        <td>2023-11-20</td>
      </tr>
    </tbody>
  </table>
</div>

▶ Experimente

(1) Fluxograma de Opções de Estilo de Tabela

flowchart LR
    A[table] --> B[Estilo Básico]
    A --> C[table-striped Cores Alternadas]
    A --> D[table-hover Realce no Hover]
    A --> E[table-bordered Borda Total]
    A --> F[table-borderless Sem Borda]
    A --> G[table-sm Compacto]
    A --> H[table-responsive Rolagem Horizontal]
    H --> I[table-responsive-sm]
    H --> J[table-responsive-md]
    H --> K[table-responsive-lg]

Classe de Tabela	Efeito	Cenário Típico
`table`	Linhas horizontais básicas + tipografia	Tabela de dados minimalista
`table-striped`	Linhas ímpares cinza claro	Listas/Relatórios
`table-bordered`	Todas as células com bordas	Tabelas financeiras/estatísticas
`table-borderless`	Completamente sem borda	Informação estilo cartão
`table-hover`	Realce de linha no hover	Listas interativas
`table-sm`	Padding pela metade	Cenários densos de dados

Cor de Linha	Semântica	Significado dos Dados
`table-primary`	Azul	Informação/Linha selecionada
`table-success`	Verde	Sucesso/Concluído
`table-danger`	Vermelho	Falha/Atrasado
`table-warning`	Amarelo	Aviso/Em Andamento
`table-info`	Ciano	Dica/Novos Dados
`table-active`	Cinza	Linha atual destacada

Variante Responsiva	Breakpoint de Disparo de Rolagem	Cenário
`table-responsive`	Sempre rola	Tabelas de dados multi-coluna
`table-responsive-sm`	<576px	Adaptação mobile
`table-responsive-md`	<768px	Adaptação tablet
`table-responsive-lg`	<992px	Telas de desktop pequenas
`table-responsive-xl`	<1200px	Adaptação de tela grande

❓ Perguntas Frequentes

📖 Resumo

.table para estilo básico, table-striped para cores alternadas de linha, table-hover para efeitos de hover.
table-bordered / table-borderless para controlar bordas, table-sm para modo compacto.
Cores de linha: table-{primary/success/danger/warning} para indicar status.
A família table-responsive resolve o transbordamento de tabela em telas pequenas.

📝 Exercícios

⭐ Crie uma tabela de inventário de produtos: as colunas devem incluir ID, Nome, Categoria, Preço, Quantidade em Estoque, Status. A tabela deve ter table-striped + table-hover.
⭐⭐ Envolva a tabela do Exercício 1 em table-responsive e visualize com rolagem horizontal no mobile.
⭐⭐⭐ Crie uma tabela de gerenciamento de usuários: três linhas de dados de usuário. A última coluna de cada linha deve conter botões "Editar" e "Excluir". O cabeçalho deve usar table-dark.

Lição Anterior: Grupos de Lista e Distintivos · Próxima Lição: Formulários

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós