Exemplo de Formatação do Estilo de uma Tabela
Este exemplo apresenta uma tabela com cabeçalho destacado e linhas alternadas, facilitando a leitura de conteúdos organizados em várias linhas.
Modelo com cabeçalho destacado e linhas zebradas
Neste modelo, o cabeçalho utiliza destaque em vermelho e as linhas do conteúdo alternam entre tons claros. Essa técnica é conhecida como zebra striping e ajuda a acompanhar visualmente cada linha da tabela.
Exemplo do resultado
A tabela abaixo reproduz a ideia do modelo original, porém com uma estrutura HTML mais adequada para conteúdos atuais.
| Título | Autor | Ano |
|---|---|---|
| Lorem ipsum dolor sit amet, consectetur adipiscing elit | Ultricies vel platea purus iaculis ultricies pharetra | 2018 |
| Accumsan imperdiet nisl duis potenti at class orci | Suscipit vivamus varius aenean ac libero | 2018 |
| Posuere eros blandit mattis ligula nullam accumsan ornare platea phasellus | Luctus massa velit tempor in felis vestibulum | 2018 |
Acesse o código-fonte da tabela
Na edição da página, acesse o código-fonte e localize o trecho correspondente à tabela que deseja alterar.
Código do exemplo
Copie o código abaixo e adapte os títulos, conteúdos e cores conforme a necessidade da tabela.
<div style="overflow-x:auto;">
<table
style="
width:100%;
border-collapse:collapse;
font-family:Arial,sans-serif;
font-size:14px;
">
<thead>
<tr style="background-color:#fbf5ef;">
<th
scope="col"
style="
padding:12px 14px;
border:1px solid #e2e7eb;
color:#b40404;
text-align:left;
">
Título
</th>
<th
scope="col"
style="
padding:12px 14px;
border:1px solid #e2e7eb;
color:#b40404;
text-align:left;
">
Autor
</th>
<th
scope="col"
style="
padding:12px 14px;
border:1px solid #e2e7eb;
color:#b40404;
text-align:left;
">
Ano
</th>
</tr>
</thead>
<tbody>
<tr style="background-color:#f3f5f7;">
<td
style="
padding:12px 14px;
border:1px solid #e2e7eb;
">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</td>
<td
style="
padding:12px 14px;
border:1px solid #e2e7eb;
">
Ultricies vel platea purus
iaculis ultricies pharetra
</td>
<td
style="
padding:12px 14px;
border:1px solid #e2e7eb;
">
2018
</td>
</tr>
<tr style="background-color:#ffffff;">
<td
style="
padding:12px 14px;
border:1px solid #e2e7eb;
">
Accumsan imperdiet nisl duis
potenti at class orci
</td>
<td
style="
padding:12px 14px;
border:1px solid #e2e7eb;
">
Suscipit vivamus varius
aenean ac libero
</td>
<td
style="
padding:12px 14px;
border:1px solid #e2e7eb;
">
2018
</td>
</tr>
<tr style="background-color:#f3f5f7;">
<td
style="
padding:12px 14px;
border:1px solid #e2e7eb;
">
Posuere eros blandit mattis ligula
nullam accumsan ornare platea phasellus
</td>
<td
style="
padding:12px 14px;
border:1px solid #e2e7eb;
">
Luctus massa velit tempor
in felis vestibulum
</td>
<td
style="
padding:12px 14px;
border:1px solid #e2e7eb;
">
2018
</td>
</tr>
</tbody>
</table>
</div>
Neste código atualizado, a tabela utiliza width:100% em vez de uma largura fixa. Isso evita que uma tabela com 527 px ultrapasse a área disponível em celulares. O bloco externo com overflow-x:auto também permite rolagem horizontal caso o conteúdo seja maior que a tela.
Confira a alteração no editor
Depois de substituir ou ajustar o código, confirme a alteração e verifique o resultado no editor antes de salvar a página.
