Guia de Status HTTP - Estudo de Tabelas em HTML5

Este projeto foi desenvolvido como parte do meu aprendizado em desenvolvimento web, focado na estruturação de dados complexos através de HTML5 semântico e estilização avançada com CSS3. O objetivo foi criar uma tabela de referência para códigos de status HTTP, exercitando a organização de informações e seletores estruturais, com base em um assunto de redes que estou revisando.

O design prioriza a legibilidade, utilizando uma paleta de cores neutra e realces visuais para facilitar a navegação por diferentes categorias de erro e sucesso.

O que foi praticado

O projeto focou na implementação técnica de elementos tabulares e lógica de estilo:

Estruturação de Tabelas (HTML)

• Organização Semântica: Uso de <table> para conter os dados e <thead> para definir o cabeçalho.
• Legendas: Implementação da tag <caption> para fornecer um título descritivo acessível à tabela.
• Linhas e Células: Criação de registros utilizando <tr> e diferenciação entre células de cabeçalho (<th>) e células de dados (<td>).
• Identificação Única: Uso de IDs específicos (ex: id="status-100") para facilitar a manipulação futura ou navegação por âncoras.

Estilização e UX (CSS)

• Layout Fluido: Configuração de largura da tabela para 90% e centralização com margens automáticas.
• Zebra Striping: Uso do seletor :nth-child(even) para alternar cores de fundo entre cinza e branco, melhorando o rastreamento visual das linhas.
• Estados Visuais: Criação da classe .deprecated com fundo avermelhado (#e75858) para sinalizar códigos obsoletos, como o 305 e 306.
• Refinamento de Borda: Uso de border-collapse: collapse para garantir linhas de grade limpas e profissionais.

---

Cola: Tabelas

Tags HTML

Tag	Função
<table>	Declara o início da estrutura da tabela.
<caption>	Define o título ou legenda da tabela.
<thead>	Agrupa o conteúdo do cabeçalho.
<tbody>	Agrupa o corpo da tabela (onde ficam os dados).
<tr>	Define uma linha (Table Row).
<th>	Define uma célula de cabeçalho (Table Header).
<td>	Define uma célula de dado comum (Table Data).
<img>	Pode ser usada dentro de um <td> para ícones representativos.

Propriedades CSS para Tabelas

• border-collapse: collapse;: Remove o espaço entre as bordas das células.
• nth-child(n): Estiliza elementos com base em sua posição (ex: par ou ímpar).
• vertical-align: Controla o alinhamento vertical do conteúdo dentro da célula.
• text-align: Define o alinhamento horizontal (esquerda, direita ou centro).
• padding: Adiciona espaço interno entre o conteúdo e a borda da célula.

---

Aprendizados

Este projeto reforçou que as tabelas no HTML são ferramentas poderosas para exibição de dados quando utilizadas corretamente. Além da parte visual, aprendi que a estrutura correta (como o uso de <thead>) é essencial para a acessibilidade, permitindo que leitores de tela interpretem as informações de forma lógica para o usuário.