Materialize CSS: Criando tabelas responsivas e com estilos

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

Veja neste artigo como trabalhar com tabelas em páginas web aproveitando os recursos de estilização visual e responsividade do framework Materialize.

Motivação

As tabelas estão presentes em grande parte das aplicações, independentemente de plataforma, e são usadas para apresentar conjuntos de dados para o usuário de forma organizada e compreensível.

Neste artigo vamos aprender a trabalhar com tabelas em páginas HTML utilizando o framework Materialize, que dispõe de recursos para estilizar visualmente esse tipo de componente.

Tabela básica no Materialize CSS

Quando referenciado na página, o Materialize já aplica estilos em alguns componentes sem que seja necessário adicionar classes específicas. As tabelas são um exemplo disso, e já têm sua aparência customizada pelo framework por padrão.

Na Listagem 1 temos um exemplo básico de uso de tabela em uma página na qual foi incluída a referência ao arquivo de CSS do Materialize.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
  </head>
  <body>
      <div class="container">
         <table>
              <thead>
                  <tr>
                      <th>Código</th>
                      <th>Descrição</th>
                      <th>Categoria</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td>001</td>
                      <td>Notebook i7 8GB Branco</td>
                      <td>Informática</td>
                  </tr>
                  <tr>
                      <td>002</td>
                      <td>Caneta Esferográfica Azul</td>
                      <td>Papelaria</td>
                  </tr>
              </tbody>
          </table>       
      </div>
  </body>
  </html>
  
Listagem 1. Incluindo uma tabela básica na página
Run

Nessa listagem, basicamente incluímos o arquivo de CSS do Materialize a partir da CDN (Content Delivery Network) e usamos a classe container na div que se encontra no corpo do documento. Essa classe, no entanto, apenas limita a largura dessa div, para que o conteúdo não fique “colado” nas margens da página. A partir daí, apenas adicionamos uma tabela sem nenhuma customização.

O resultado, quando abrimos o documento no browser, é o que vemos na Figura 1.

Elemento circular no website
Figura 1. Tabela básica estilizada pelo Materialize

Estilos adicionais para tabelas

Além da formatação padrão, o framework oferece algumas classes para aplicar efeitos às tabelas. Por exemplo, as classes bordered, striped e centered fazem com que as linhas da tabela ganhem bordas, cores alternadas e tenham seu conteúdo centralizado, respectivamente.

Para utilizá-las, basta adicioná-las ao atributo class da tabela, conforme o código abaixo:

  <table class="bordered striped centered">
  ...
  </table>
  

Run

O resultado deve ser semelhante ao da Figura 2.

Tabela com bordas, linhas coloridas e texto centralizado
Figura 2. Tabela com bordas, linhas coloridas e texto centralizado

Além dessas há, ainda, as classes highlight e responsive-table, que fazem com que as linhas sejam destacadas ao passar o mouse sobre elas e tornam a tabela responsiva. O código a seguir utiliza essas opções:

  <table class="bordered striped centered highlight responsive-table">
  ...
  </table>
  

Run

Quando ativo, o recurso de responsividade modifica o layout da tabela para visualização em telas menores. Nesses casos, as linhas são apresentadas na forma de colunas e é adicionada uma barra de rolagem horizontal, como podemos ver na Figura 3.

Tabela responsiva
Figura 3. Tabela responsiva

Com o Materialize, utilizando poucas classes CSS conseguimos estilizar as tabelas de nossas aplicações com aparência elegante e funcionalidades que possibilitam uma melhor usabilidade. Além disso, o framework conta com diversos outros recursos aplicáveis a outros componentes comuns, como botões, tipografia, entre outros.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?