EasyCode365EasyCode365

Estilizando listas e tabelas

Listas e tabelas ajudam a organizar informações.

Listas são úteis para itens agrupados, passos, menus e pequenos conjuntos de conteúdo relacionado. Tabelas são úteis para dados estruturados, como horários, preços, pontuações ou comparações.

Listas e tabelas em HTML puro funcionam, mas muitas vezes precisam de CSS para ficar mais fáceis de ler.

Lembrete rápido: listas e tabelas

HTML tem dois tipos comuns de lista:

  • <ul> cria uma lista não ordenada, geralmente com marcadores.
  • <ol> cria uma lista ordenada, geralmente com números.

Dentro dos dois tipos de lista, <li> cria cada item da lista.

Somente leitura
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Tabelas usam algumas tags diferentes:

  • <table> cria a tabela.
  • <tr> cria uma linha da tabela.
  • <th> cria uma célula de cabeçalho.
  • <td> cria uma célula normal de dados.

Use tabelas para dados, não para layout de página.

Estilizando espaçamento de listas

Navegadores adicionam espaçamento padrão às listas.

Você pode controlar esse espaçamento com margin e padding.

Editável
<ul class="lesson-list">
  <li>Leia a aula</li>
  <li>Teste o exemplo</li>
  <li>Pratique por conta própria</li>
</ul>

<style>
  .lesson-list {
    padding-left: 24px;
    line-height: 1.8;
    background-color: #eff6ff;
    border-radius: 8px;
    font-family: Arial, sans-serif;
  }
</style>

padding-left cria espaço para os marcadores da lista. line-height adiciona respiro entre os itens.

Posição do marcador da lista

A propriedade list-style-position controla onde o marcador fica.

  • outside: o marcador fica fora da área do texto. Este é o padrão.
  • inside: o marcador passa a fazer parte da linha de texto.
Editável
<ul class="outside-list">
  <li>
    Um item de lista mais longo que quebra em uma segunda linha para você ver a posição do marcador.
  </li>
</ul>

<ul class="inside-list">
  <li>
    Um item de lista mais longo que quebra em uma segunda linha para você ver a posição do marcador.
  </li>
</ul>

<style>
  ul {
    width: 260px;
    font-family: Arial, sans-serif;
  }

  .outside-list {
    list-style-position: outside;
  }

  .inside-list {
    list-style-position: inside;
  }
</style>

A maioria das listas usa outside. Use inside apenas quando quiser que o marcador fique dentro da caixa de conteúdo.

Mudando estilos de marcadores e números

A propriedade list-style-type muda o marcador.

Para listas não ordenadas, valores comuns incluem:

  • disc
  • circle
  • square

Para listas ordenadas, valores comuns incluem:

  • decimal
  • decimal-leading-zero
  • lower-alpha
  • upper-roman
Editável
<h3>Tópicos</h3>
<ul class="square-list">
  <li>Seletores</li>
  <li>Cores</li>
  <li>Espaçamento</li>
</ul>

<h3>Passos</h3>
<ol class="roman-list">
  <li>Escrever HTML</li>
  <li>Adicionar CSS</li>
  <li>Verificar o resultado</li>
</ol>

<style>
  .square-list {
    list-style-type: square;
  }

  .roman-list {
    list-style-type: upper-roman;
  }
</style>

Use estilos de marcador que combinam com o significado da lista. Números são melhores para passos. Marcadores são melhores para grupos simples.

Removendo marcadores padrão

Às vezes uma lista é usada para estrutura, mas você não quer marcadores visíveis.

Um menu de navegação é um exemplo comum.

Editável
<ul class="nav-list">
  <li>Início</li>
  <li>Aulas</li>
  <li>Contato</li>
</ul>

<style>
  .nav-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  .nav-list li {
    padding: 8px 0;
  }
</style>

Quando remover os marcadores, confira também o margin e o padding padrão. Caso contrário, a lista ainda pode ter espaçamento indesejado.

Criando marcadores personalizados

Você pode criar marcadores personalizados simples com o pseudo-elemento ::marker.

Isso permite mudar o conteúdo e a cor do marcador sem adicionar HTML extra.

Editável
<ul class="check-list">
  <li>Salve seu arquivo</li>
  <li>Atualize o navegador</li>
  <li>Verifique o layout</li>
</ul>

<style>
  .check-list {
    line-height: 1.8;
    font-family: Arial, sans-serif;
  }

  .check-list li::marker {
    content: "✓ ";
    color: #16a34a;
    font-weight: bold;
  }
</style>

Mantenha marcadores personalizados simples. Um marcador claro é melhor do que um marcador decorativo que distrai do conteúdo.

Nota: mudar content dentro de ::marker precisa de um navegador moderno. Navegadores antigos podem mostrar o marcador padrão.

Estilizando bordas de tabelas

Tabelas são mais fáceis de escanear quando linhas e células estão claramente separadas.

Você pode adicionar bordas com a propriedade border.

Editável
<table class="basic-table">
  <tr>
    <th>Linguagem</th>
    <th>Uso</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Estrutura</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>Estilo</td>
  </tr>
</table>

<style>
  .basic-table,
  .basic-table th,
  .basic-table td {
    border: 1px solid black;
  }
</style>

Isso adiciona uma borda ao redor da tabela e de cada célula.

Usando border-collapse

Por padrão, bordas de células de tabela podem mostrar pequenos espaços entre as células.

A propriedade border-collapse corrige isso.

Editável
<table class="clean-table">
  <tr>
    <th>Dia</th>
    <th>Tarefa</th>
  </tr>
  <tr>
    <td>Segunda</td>
    <td>Praticar CSS</td>
  </tr>
  <tr>
    <td>Terça</td>
    <td>Criar um menu</td>
  </tr>
</table>

<style>
  .clean-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  .clean-table th,
  .clean-table td {
    border: 1px solid #9ca3af;
    padding: 10px;
  }
</style>

Use border-collapse: collapse; quando quiser uma linha de borda limpa entre as células.

Adicionando padding e alinhamento à tabela

O texto da tabela não deve tocar nas bordas.

Adicione padding às células <th> e <td>.

Você também pode alinhar conteúdo:

  • text-align controla o alinhamento horizontal.
  • vertical-align controla o alinhamento vertical.
Editável
<table class="score-table">
  <tr>
    <th>Estudante</th>
    <th>Pontuação</th>
  </tr>
  <tr>
    <td>
      Alice<br />
      Prática extra concluída
    </td>
    <td>92</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>85</td>
  </tr>
</table>

<style>
  .score-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  .score-table th,
  .score-table td {
    border: 1px solid #d1d5db;
    padding: 12px;
    vertical-align: middle;
  }

  .score-table th {
    text-align: left;
  }

  .score-table th:last-child,
  .score-table td:last-child {
    text-align: right;
  }
</style>

Texto costuma ser mais fácil de ler à esquerda. Números costumam ser mais fáceis de comparar quando ficam alinhados à direita.

Cores alternadas em linhas

Tabelas longas são mais fáceis de ler quando uma linha sim, outra não, tem uma cor de fundo diferente.

Isso costuma ser chamado de zebra striping.

Use :nth-child(even) para selecionar cada linha par.

Editável
<table class="striped-table">
  <thead>
    <tr>
      <th>Curso</th>
      <th>Aulas</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>12</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>15</td>
    </tr>
    <tr>
      <td>JavaScript</td>
      <td>16</td>
    </tr>
  </tbody>
</table>

<style>
  .striped-table {
    border-collapse: collapse;
    font-family: Arial, sans-serif;
  }

  .striped-table th,
  .striped-table td {
    border: 1px solid #d1d5db;
    padding: 10px;
    text-align: left;
  }

  .striped-table tbody tr:nth-child(even) {
    background-color: #f3f4f6;
  }
</style>

Usar tbody tr:nth-child(even) mantém a cor alternada nas linhas de dados, não na linha de cabeçalho.

Tornando tabelas mais legíveis

Uma tabela legível tem estrutura clara.

Bons hábitos para estilizar tabelas:

  • Faça os cabeçalhos se destacarem das células normais.
  • Use padding suficiente dentro das células.
  • Use bordas ou cores de linha para separar dados.
  • Alinhe dados parecidos da mesma forma.
  • Evite usar tabelas para layout de página.
Editável
<table class="readable-table">
  <thead>
    <tr>
      <th>Plano</th>
      <th>Preço</th>
      <th>Melhor para</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Básico</td>
      <td>$0</td>
      <td>Testar aulas</td>
    </tr>
    <tr>
      <td>Plus</td>
      <td>$9</td>
      <td>Prática diária</td>
    </tr>
  </tbody>
</table>

<style>
  .readable-table {
    border-collapse: collapse;
    width: 100%;
    font-family: Arial, sans-serif;
  }

  .readable-table th,
  .readable-table td {
    border: 1px solid #d1d5db;
    padding: 12px;
    text-align: left;
  }

  .readable-table th {
    background-color: #1f2937;
    color: white;
  }

  .readable-table tbody tr:nth-child(even) {
    background-color: #f9fafb;
  }
</style>

A linha de cabeçalho é escura, as células têm padding, e a cor alternada das linhas ajuda os leitores a acompanhar os dados.

Erros comuns de iniciantes

  • Usar tabelas para layout de página: use tabelas para dados, não para cabeçalhos, barras laterais ou toda a estrutura da página.
  • Esquecer border-collapse: bordas de tabela podem parecer duplicadas ou separadas sem essa propriedade.
  • Deixar células apertadas: adicione padding a <th> e <td> para dar espaço ao texto.
  • Remover marcadores mas manter o espaçamento antigo: depois de list-style-type: none;, confira margin e padding.
  • Usar marcadores personalizados decorativos demais: marcadores devem ajudar a escanear a lista, não distrair.

Mini tarefa prática

Observe esta regra CSS:

Somente leitura

Que efeito visual isso cria em uma tabela?

Confira as respostas do quiz quando estiver pronto.

Quiz rápido com respostas

  1. Qual propriedade CSS remove o espaço entre bordas de células de tabela?
  2. Qual valor de list-style-type remove os marcadores completamente?
  3. Qual propriedade controla se o conteúdo de uma célula fica no top, middle ou bottom?

Respostas:

  1. border-collapse
  2. none
  3. vertical-align

Resposta da mini tarefa: isso cria zebra striping ao aplicar um fundo cinza-claro a cada linha par de dados.

Pequeno desafio

Estilize a lista e a tabela abaixo.

Seus objetivos:

  • Esconder os marcadores padrão da lista.
  • Remover o espaçamento padrão da lista.
  • Adicionar border-collapse à tabela.
  • Dar aos cabeçalhos da tabela fundo preto e texto branco.
  • Colorir as linhas pares da tabela com fundo cinza-claro.
Editável
<div>
  <ul class="nav-menu">
    <li>Início</li>
    <li>Sobre</li>
    <li>Contato</li>
  </ul>

  <table class="data-table">
    <thead>
      <tr>
        <th>Nome</th>
        <th>Idade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>25</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>30</td>
      </tr>
      <tr>
        <td>Charlie</td>
        <td>35</td>
      </tr>
    </tbody>
  </table>
</div>

<style>
  .nav-menu {
    /* Esconda os marcadores */

    /* Remova o espaçamento padrão */

    font-family: Arial, sans-serif;
  }

  .data-table {
    /* Colapse as bordas da tabela */

    font-family: Arial, sans-serif;
  }

  .data-table th,
  .data-table td {
    border: 1px solid black;
    padding: 8px;
  }

  .data-table th {
    /* Adicione fundo preto */

    /* Adicione texto branco */
  }

  .data-table tbody tr:nth-child(even) {
    /* Adicione um fundo cinza-claro */
  }
</style>

Resumo

  • Listas usam <ul>, <ol> e <li>.
  • Tabelas usam <table>, <tr>, <th> e <td>.
  • Use list-style-type para mudar ou remover marcadores de lista.
  • Use list-style-position para controlar se os marcadores ficam fora ou dentro da área de texto.
  • Use ::marker para marcadores personalizados simples.
  • Use border-collapse: collapse; para bordas de tabela limpas.
  • Use padding para tornar células de tabela mais fáceis de ler.
  • Use text-align e vertical-align para alinhar conteúdo da tabela.
  • Use tbody tr:nth-child(even) para criar cores alternadas em linhas.