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!

HTML
CSS
JS
​x
1
 <!DOCTYPE html>
2
<html lang="pt-br">
3
  <head>
4
    <!-- Meta tags Obrigatórias -->
5
    <meta charset="utf-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
​
8
    <!-- Bootstrap CSS -->
9
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10
​
11
    <title>Olá, mundo!</title>
12
  </head>
13
​
14
  <body>
15
​
16
        <div class="container">
17
​
18
          <h1>Tabelas</h1>
19
​
20
            <table class="table table-striped table-borderless table-hover table-sm">
21
                <thead class="thead-dark">
22
                  <tr>
23
                    <th scope="col">#</th>
24
                    <th scope="col">Primeiro</th>
25
                    <th scope="col">Último</th>
26
                    <th scope="col">Nickname</th>
27
                  </tr>
28
                </thead>
29
                <tbody>
30
                  <tr>
31
                    <th scope="row">1</th>
32
                    <td>Mark</td>
33
                    <td>Otto</td>
34
                    <td>@mdo</td>
35
                  </tr>
36
                  <tr>
37
                    <th scope="row">2</th>
38
                    <td>Jacob</td>
39
                    <td>Thornton</td>
40
                    <td>@fat</td>
41
                  </tr>
42
                  <tr>
43
                    <th scope="row">3</th>
44
                    <td>Larry</td>
45
                    <td>the Bird</td>
46
                    <td>@twitter</td>
47
                  </tr>
48
                </tbody>
49
              </table>
50
​
51
        </div>
52
​
53
    <!-- JavaScript (Opcional) -->
54
    <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
55
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
56
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
57
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
58
  </body>
59
</html>
60
1
1
1
1

[A] Anterior
5/7
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados