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>
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>
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>
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.
