Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 14 - Frameworks para Layout

Tabelas

Nesta videoaula, você verá como estilizar tabelas utilizando classes do Bootstrap.

Como sabemos, o Bootstrap fornece algumas classes prontas para facilitar a estilização de componentes. A classe mais importante nesse caso é a classe "table" que deve ser adicionada à tabela que se deseja estilizar. Apenas com a adição dessa classe, a tabela ganha um estilo mais profissional. Veja no exemplo:

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primeiro</th>
      <th scope="col">Último</th>
      <th scope="col">Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Perceba o uso das tags <thead> e <tbody> para descrever o cabeçalho e o corpo da tabela, respectivamente. Similarmente, existe também a tag <tfoot>, com o objetivo de descrever o rodapé da tabela, quando houver. Essas tags semânticas foram adicionadas no HTML5 e servem para descrever o conteúdo da tabela e facilitar, inclusive, a aplicação de estilo e acessibilidade.

Por padrão, a tabela tem uma aparência clara, se preferir, você pode adicionar a classe "table-dark" para deixá-la com aparência escura:

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primeiro</th>
      <th scope="col">Último</th>
      <th scope="col">Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Opções de cabeçalho

Você pode controlar a aparência do cabeçalho. Por padrão, o cabeçalho terá a aparência clara. Para alterar esse comportamento, você pode utilizar a classe "thead-dark" no elemento <thead>.

<table class="table table-dark">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primeiro</th>
      <th scope="col">Último</th>
      <th scope="col">Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Para mais opções para o cabeçalho, acesse este link

Linhas zebradas

Você pode utilizar a classe "table-striped" para tornar as linhas zebradas, facilitando a identificação das linhas. Veja no exemplo:

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primeiro</th>
      <th scope="col">Último</th>
      <th scope="col">Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>

Para mais detalhes, acesse este link

Linhas com efeito "hover"

Você pode adicionar efeito de destaque, quando o usuário tiver com o mouse em cima de uma linha. Para isso, deve-se utilizar a classe "table-hover". Veja no exemplo:

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primeiro</th>
      <th scope="col">Último</th>
      <th scope="col">Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>

Para mais detalhes, acesse este link

Tabela pequena

O estilo padrão das tabelas do Bootstrap possui um "padding" para espaçamento interno. Caso deseje ter uma tabela mais condensada, você pode utilizar a classe "table-sm". Veja no exemplo:

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primeiro</th>
      <th scope="col">Último</th>
      <th scope="col">Nickname</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>

Para mais detalhes, acesse este link

Exemplo completo

A seguir, veja código completo utilizado nesta videoaula e altere as opções para verificar seu impacto. Divirta-se!


Versão 5.3 - Todos os Direitos reservados