WDD 131 | S04 – Atividade de Aprendizagem: Tabelas HTML

S04 – Atividade de Aprendizagem: Tabelas HTML

Visão Geral

As tabelas HTML são uma maneira estruturada de representar dados, incluindo dados tabulares, que tradicionalmente são apresentados em linhas e colunas.

Objetivos de Aprendizagem do Curso

Desenvolva páginas web responsivas que sigam as melhores práticas e usem HTML e CSS válidos.

Aqui estão alguns exemplos de estruturas de tabelas HTML que são usadas no site de doações da Igreja.

Captura de tela do uso da tabela para extratos de doações da Igreja. — Exemplo de Layout de Tabela HTML – Extratos de Doações com Listras de Zebra

Captura de tela do uso da tabela no recibo de doação — Exemplo de Layout de Tabela HTML – Recibo de DoaçãoVocê acha que uma tabela HTML é a melhor escolha para este formulário de recibo de doação com entradas?Qual é a finalidade da linha de furos na borda superior e da linha pontilhada de perfuração?

Preparação

Um problema de design importante com a marcação de tabelas é que as tabelas HTML têm sido usadas incorretamente para layout de página. Não use estruturas de tabela HTML para layout de página, pois isso criará vários problemas:

O código fica sobrecarregado, o que pode gerar confusão e dificultar a manutenção e a depuração da página. Há escolhas melhores.
Os layouts de tabela reduzem a acessibilidade para pessoas com deficiência visual quando usados para layout de página em vez da finalidade pretendida.
As tabelas não são ideais para comportamento de página responsivo.

Tabelas são uma maneira útil e familiar de exibir dados estruturados, e são acessíveis para leitores de tela e outras tecnologias assistivas. Os recursos a seguir ajudarão você a entender as práticas recomendadas para usar tabelas em HTML.

Ponderar: Regras de Acessibilidade Para Tabelas – SAPO UX
Prática: Exemplo do CodePen ☼ Estrutura e Formatação de Tabela

Os exemplos usam listras de zebra para melhorar a legibilidade. Listras de zebra (ou candy striping) são a prática de colorir uma linha sim, outra não em uma tabela para melhorar a legibilidade. Isso é feito usando a pseudoclasse nth-child.

Instruções da Atividade

Crie a seguinte tabela HTML.

Captura de tela do exemplo da tarefa de criação de tabela.

Use as tags thead e tbody na estrutura da sua tabela.
Use um elemento caption dentro da sua tabela para exibir a legenda "Tabela 1: Comparação de Recursos da Conta".
O esquema de cores fica por sua conta.
Você deve incluir listras de zebra usando a pseudoclasse nth-child.
Você pode usar os emoticons integrados ✔️ e ❌ ou copiá-los desta página.

Avalie Seu Conhecimento

Exemplo de Solução – CodePen ☼ Tabela HTML: Acme Wildwest