Formatação Avançada de Tabelas

Aprenda como aplicar estilos personalizados em tabelas do Plone utilizando HTML para criar tabelas coloridas e organizadas.

Modelo de tabela formatada

Neste exemplo será utilizada uma tabela com:

  • Coluna de título em vermelho
  • Linhas alternadas (efeito zebrado)
  • Formatação visual personalizada

Objetivo

Melhorar a visualização de dados, deixando tabelas mais organizadas e fáceis de ler.

1

Resultado visual da tabela

Tabela formatada

Exemplo final

O modelo abaixo apresenta:

  • Título destacado em vermelho
  • Linhas alternadas em cinza
  • Melhor separação visual dos conteúdos
2

Copiar o código HTML

Inserção manual da tabela

Copie o código HTML abaixo e cole dentro da opção:

Tools → Source Code

<table style="width: 527px; margin-left: auto; margin-right: auto;"> <tbody> <tr style="border-color: #b40404; background-color: #fbf5ef;"> <td><strong style="color:#ff0000;">Título</strong></td> <td><strong style="color:#ff0000;">Autor</strong></td> <td><strong style="color:#ff0000;">Ano</strong></td> </tr> <tr style="background-color:#e6e6e6;"> <td>Lorem ipsum dolor sit amet</td> <td>Nome do autor</td> <td>2018</td> </tr> <tr> <td>Accumsan imperdiet nisl</td> <td>Outro autor</td> <td>2018</td> </tr> <tr style="background-color:#e6e6e6;"> <td>Posuere eros blandit mattis</td> <td>Autor exemplo</td> <td>2018</td> </tr> </tbody> </table>
3

Editar no Source Code

Source code tabela

Aplicação do código

Abra o editor da página, clique em:

Tools → Source Code

Cole o código HTML no local desejado da página.

Depois salve a página para visualizar a tabela formatada.

Personalização das cores

Alterar aparência da tabela

Você pode alterar facilmente:

  • Cor do título
  • Cor das linhas
  • Tamanho da tabela
  • Fonte e alinhamento

Exemplo de cores

Vermelho do título:

#ff0000

Fundo das linhas:

#e6e6e6
Tutorial de Tabelas
Portal Institucional UEM