Estilização de Tabelas CSS

Introdução

Neste laboratório, você aprenderá as propriedades CSS fundamentais usadas para estilizar tabelas HTML. Por padrão, as tabelas HTML são simples e podem ser difíceis de ler. Com CSS, você pode transformar uma tabela básica em uma apresentação de dados bem estruturada, visualmente atraente e fácil de entender.

Começaremos com uma tabela HTML básica e aplicaremos estilos progressivamente a ela. Você aprenderá a gerenciar bordas, adicionar espaçamento, estilizar o cabeçalho e alinhar texto dentro das células.

O arquivo index.html necessário já foi criado para você. Sua tarefa será escrever código CSS no arquivo styles.css para estilizar a tabela. Você pode visualizar suas alterações em tempo real na aba "Web 8080" do seu espaço de trabalho.

Definir border-collapse collapse na tabela

Neste passo, começaremos a estilizar nossa tabela. Por padrão, as células de tabelas HTML têm suas próprias bordas individuais, o que pode resultar em um visual de "borda dupla" que parece grosso e desatualizado. A propriedade border-collapse controla se as bordas da tabela são separadas ou colapsadas em uma única borda.

Definiremos border-collapse como collapse para criar bordas limpas e de linha única.

Primeiro, abra o arquivo styles.css no explorador de arquivos à esquerda. Adicione a seguinte regra CSS ao arquivo.

table {
  border-collapse: collapse;
}

Após adicionar o código, salve o arquivo. Embora você ainda não veja bordas, esta propriedade é essencial para o próximo passo. Você pode mudar para a aba "Web 8080" para ver a pré-visualização ao vivo, embora a mudança visual seja mínima nesta fase.

Aplicar border 1px solid black a th e td

Agora que definimos a tabela para usar um modelo de borda colapsada, vamos adicionar as bordas reais às células de cabeçalho (th) e às células de dados (td). Podemos selecionar ambos os elementos de uma vez usando um seletor separado por vírgulas.

Neste passo, você adicionará uma borda sólida preta de 1px a cada célula da tabela.

Adicione a seguinte regra CSS ao seu arquivo styles.css, abaixo da regra table existente.

th,
td {
  border: 1px solid black;
}

Salve o arquivo e mude para a aba "Web 8080". Agora você deverá ver uma borda limpa e de linha única ao redor de cada célula da tabela.

Usar padding 8px nas células da tabela

A tabela agora tem bordas, mas o conteúdo dentro das células está tocando as bordas, o que dá uma aparência apertada. Podemos usar a propriedade padding para adicionar espaço entre o conteúdo e a borda da célula, melhorando a legibilidade.

Neste passo, você adicionará 8px de padding a todas as células da tabela.

Modifique a regra th, td existente em styles.css para incluir a propriedade padding.

th,
td {
  border: 1px solid black;
  padding: 8px;
}

Após salvar o arquivo, verifique a aba "Web 8080" novamente. Você notará que as células agora são maiores e o texto tem um espaçamento confortável ao redor.

Adicionar background-color à linha do cabeçalho da tabela

Para fazer o cabeçalho da tabela se destacar das linhas de dados, é uma prática comum dar a ele uma cor de fundo diferente. Isso separa visualmente os títulos das colunas do conteúdo.

Neste passo, você adicionará uma cor de fundo cinza claro às células de cabeçalho (th).

Adicione uma nova regra CSS direcionada apenas aos elementos th em styles.css.

th {
  background-color: #f2f2f2;
}

Salve o arquivo e visualize o resultado na aba "Web 8080". A linha de cabeçalho da sua tabela agora deve ter uma cor de fundo distinta, facilitando a identificação.

Implementar text-align left para células de dados

O alinhamento do texto é crucial para a legibilidade da tabela. Por padrão, as células de cabeçalho (th) são centralizadas, enquanto as células de dados (td) são alinhadas à esquerda. Embora o alinhamento à esquerda seja o padrão para elementos td, defini-lo explicitamente é uma boa prática para garantir uma renderização consistente em todos os navegadores.

Neste passo, você definirá explicitamente o alinhamento do texto para as células de dados à esquerda.

Adicione uma nova regra CSS para o seletor td no seu arquivo styles.css.

td {
  text-align: left;
}

Salve o arquivo. Como este é o comportamento padrão, você pode não ver uma mudança visual na aba "Web 8080", mas sua folha de estilos agora é mais robusta e explícita sobre o design pretendido. Isso completa a estilização básica da nossa tabela.

Resumo

Parabéns por completar o laboratório! Você transformou com sucesso uma tabela HTML simples em uma tabela estilizada e com aparência profissional, usando propriedades CSS fundamentais.

Neste laboratório, você aprendeu a:

• Usar border-collapse: collapse; para criar bordas limpas e únicas para uma tabela.
• Aplicar uma border às células de cabeçalho (th) e de dados (td) da tabela.
• Adicionar espaçamento interno às células usando a propriedade padding.
• Diferenciar o cabeçalho da tabela definindo uma background-color.
• Controlar o alinhamento horizontal do texto dentro das células usando text-align.

Essas habilidades são essenciais para apresentar dados tabulares de forma eficaz na web.