Artigos HTML e CSS Bootstrap: Como estilizar tabelas

Motivação

As tabelas estão presentes em grande parte das aplicações (sejam elas web, desktop ou mobile) e constituem um elemento fundamental na apresentação de dados para o usuário final.

Atualmente, com a importância que a interface de usuário possui, saber como aprimorar a aparência de uma tabela torna-se tão relevante quanto. Nesse cenário, uma das tecnologias que tem se tornado referência é o Bootstrap. Esse framework front-end, entre muitos outros recursos, disponibiliza diversas funcionalidades para estilizar e otimizar a exibição de diversos componentes, como é o caso das tabelas.

Tabela básica no Bootstrap

Para estilizar uma tabela com o Bootstrap, basta adicionar a classe table à tag <table>, e algumas formatações visuais já serão aplicadas, como mostra a Listagem 1.

Listagem 1. Estilização básica de tabela com o Bootstrap 

        <table class="table">
            <thead>
                <tr>
                    <th>Marca</th>
                    <th>Veículo</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Chevrolet</td>
                    <td>Sonic</td>
                </tr>
                <tr>
                    <td>Chevrolet</td>
                    <td>Cruze</td>
                </tr>
                <tr>
                    <td>Volkswagen</td>
                    <td>Jeta</td>
                </tr>
            </tbody>
        </table>
Run

O resultado da execução desse código é apresentado na Figura 1.

Tabela básica com Bootstrap
Figura 1. Tabela básica com Bootstrap

Classes adicionais para tabelas

Existem ainda algumas classes que permitem aplicar estilos diferenciados a uma tabela, são elas:

  • table-striped: Alterna a cor das linhas da tabela;
  • table-bordered: Adiciona borda à tabela.
  • table-hover: Ativa o destaque de uma linha quando passamos o cursor do mouse sobre ela;
  • table-condensed: Reduz a altura das linhas da tabela, deixando-a mais compacta.

Para aplicar esses estilos, basta adicionar as classes desejadas à tag <table>, da seguinte forma:

<table class="table table-striped table-bordered table-condensed table-hover">
Run

O resultado disso deve ser semelhante à Figura 2.

Tabela com classes adicionais
Figura 2. Tabela com classes adicionais

Alterando as linhas de uma tabela

As classes que vimos até aqui alteram o estilo da tabela como um todo, formatando todas as suas linhas de maneira uniforme. Caso seja necessário formatar linhas separadamente, podemos aplicar à tag <tr> classes como active, success, danger, warning e info. Um exemplo disso pode ser verificado no código da Listagem 2.

Listagem 2. Configurando classes opcionais para as linhas da tabela 

        <tbody>
            <tr class="active">
                <td>Chevrolet</td>
                <td>Sonic</td>
            </tr>
            <tr class="success">
                <td>Chevrolet</td>
                <td>Cruze</td>
            </tr>
            <tr class="danger">
                <td>Land Rover</td>
                <td>Evoque</td>
            </tr>
            <tr class="warning">
                <td>Volkswagen</td>
                <td>Jeta</td>
            </tr>
            <tr class="info">
                <td>Ford</td>
                <td>Focus</td>
            </tr>
        </tbody>
Run

Com isso, cada linha ganhará uma cor diferente, como podemos observar na Figura 3.

Linhas da tabela estilizadas individualmente
Figura 3. Linhas da tabela estilizadas individualmente

É importante destacar que para aplicar esses estilos não foi necessário fazer uso de JavaScript. Portanto, caso seu projeto não necessite de outros recursos do Bootstrap, como modais e carousels, não é necessário incluir o arquivo de JavaScript do framework, reduzindo assim o tempo de carregamento da sua página.

Confira também

HTML Básico

HTML Básico

Curso
CSS na prática

CSS na prática

Curso
Curso de Bootstrap

Curso de Bootstrap

Curso