Componentes do Bootstrap – Tables

Bootstrap Componentes Tables

Bootstrap, esse nome tem poder.

Olá, faz um bom tempo que não tinha post hehehe… Então, voltando ao Bootstrap, hoje iremos ver um de seus componentes mais utilizados, as tables. Se você não lembra ou não sabe como usar o bootstrap, clique aqui e veja o post anterior.

Como bem sabemos as tabelas servem para exibir dados tabulares, houve um tempo que já foi utilizada até para organizar o layout, ou melhor, usada como forma de grid, mas isso é coisa do passado, como vimos no post anterior o bootstrap possui um esquema muito desenrolado para fazer grid. Vamos então se atentar ao uso das tabelas.

Pra começo de conversa uma tabela é constituída normalmente de cabeçalho(thead) e corpo(tbody), e de vez em quando as pessoas usam o rodapé(tfoot). Claro que isso é algo que nem todos usam, normalmente só aprendemos a usar as Linhas(tr) e colunas (td,th). Veja um exemplo de uma tabela sem estilo:

<table border="1">
  <!-- Cabeçalho da tabela -->
  <thead>
    <tr>
      <th>Nome</th>
      <th>Email</th>
      <th>Diaspora</th>
    </tr>
  </thead>

  <!-- Corpo da tabela -->
  <tbody>
    <tr>
      <td>Alessandro Feitoza</td>
      <td>eu@alessandrofeitoza.eu</td>
      <td>alessandro_diaspora</td>
    </tr>
    <tr>
      <td>Rapadura Doce</td>
      <td>rapadura@doce.org</td>
      <td>rapadura_doce</td>
    </tr>
  </tbody>
  <!-- Rodapé (se tiver) -->
  <tfoot>
    
  </tfoot>
</table>

Isso claro, gerará uma tabela sem estilo, veja:

table_sem_estilo

Certo, vamos agora dar um estilo a essa tabela, utilizando então as classes do CSS do bootstrap, vamos colocar essas 3 classes e veja a mágica.

1 – table: Apenas deixa o estilo padrão de tabelas do bootstrap.

<table class="table">

table_com_estilo

2 – table-striped: deixa aquele estilo da zebrinha, uma linha mais escura, e outra mais clara 🙂

<table class="table table-striped">

table_striped

Agora, sabe aquele estilo que a gente passa o cursor do mouse e a linha pisca? Pois é chapa, tem também:

3 – table-hover: facilita navegar entre os dados da tabela, deixa em enfâse a linha em que o cursor está sobre.

<table class="table table-striped table-hover">

table-hover

Existem várias outras classes, mas você deve estar se perguntando: “Arriegua, criei uma tabela com o estilo do bootstrap, mas no meu smarthphone não funcionou, será que não é responsiva?”.

Então meu/minha jovem, vamos lá, para criar uma tabela responsível temos que colocar a table dentro de uma div, assim ó:

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

Resultado:

table-responsive

Ah, agora sim, ficou show, hehehe. Observe que é criada uma barra de rolagem que permite visualizar o restante da tabela. 🙂

Além dessas classes também podemos colorir as linhas e/ou colunas, veja:

<tr class="success">
  <td>Alessandro Feitoza</td>
  <td>eu@alessandrofeitoza.eu</td>
  <td>alessandro_diaspora</td>
</tr>
<tr class="info">
  <td>Rapadura Doce</td>
  <td>rapadura@doce.org</td>
  <td>rapadura_doce</td>
</tr>
<tr>
  <td class="warning">Chico Tejo</td>
  <td class="danger">chico@tejo.com</td>
  <td class="active">chico_tejo</td>
</tr>

E com isso temos:

table-color

Para saber mais sobre as tables do bootstrap acesse: http://getbootstrap.com/css/#tables

Então é isso, essas foram algumas dicas para trabalhar com as tabelas do bootstrap, espero que tenha sido útil, e em breve tem mais.

Saudações Livres a todos, e até o futuro. 🙂

 

5 Comentários

  1. Um dos Melhores professores de PHP e Desenvolvedor WEB que tive o prazer de conhecer, e ser seu aluno…

    Curso na EGP de 21 a 25 de novembro de 2016.
    Parabéns, Alessandro Feitoza!

    Responder

Deixe um comentário.