Como estilizar uma tabela em CSS?

Para estilizar uma tabela em CSS, é possível utilizar diversas propriedades que permitem definir a aparência da tabela, como a cor de fundo, a cor da borda, a largura das colunas, entre outras. Abaixo estão algumas propriedades comuns para estilizar tabelas em CSS:

border: Define a espessura e o estilo da borda da tabela e das células.

background-color: Define a cor de fundo da tabela e das células.

width: Define a largura da tabela.

border-collapse: Define se as bordas das células devem ser combinadas ou separadas.

text-align: Define a alinhamento horizontal do conteúdo das células.

vertical-align: Define a alinhamento vertical do conteúdo das células.

padding: Define o espaçamento interno entre o conteúdo da célula e a borda.

margin: Define o espaçamento externo entre a tabela e outros elementos da página.

A seguir, um exemplo básico de como estilizar uma tabela em CSS:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
      <td>Data 9</td>
    </tr>
  </tbody>
</table>

Abaixo o CSS para formatar

table {
  border: 1px solid black;
  border-collapse: collapse;
  background-color: #f5f5f5;
  width: 100%;
  margin-bottom: 20px;
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #333;
  color: #fff;
}

tr:nth-child(even) {
  background-color: #ddd;
}

tr:hover {
  background-color: #ccc;
}

Neste exemplo, a tabela tem uma borda preta sólida com largura de 1 pixel, o fundo é cinza claro (#f5f5f5), as células têm um preenchimento interno de 8 pixels e são alinhadas à esquerda. As células de cabeçalho (th) têm um fundo preto (#333) e texto branco, enquanto as células de dados (td) têm um fundo branco (#fff). As linhas pares têm um fundo cinza claro (#ddd) e as linhas ímpares têm o fundo padrão. Ao passar o mouse sobre uma linha, a cor do fundo muda para cinza mais escuro (#ccc).