Materialize CSS: Criando tabelas responsivas e com estilos

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.


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.


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.


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.

Artigos relacionados