Artigos HTML e CSS Materialize CSS: Criando tabelas responsivas e com estilos

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.