Explicações relacionadas a este exemplo foram utilizadas nas seguintes aulas:
(devido a dinâmica de gravações, não necessariamente todas as aulas que utilizaram o exemplo estarão listadas aqui)
- (aula 88g) 1.3.2 - Sequência com significado (módulo 10 - WCAG)
- (aula 88ai) 2.5.3 - Rótulo no nome acessível (módulo 10 - WCAG)
- (aula 147m) Tabela - dados tabulares (módulo 14 - Design System)
Importante:
Os exemplos ou códigos apresentados nesta página não necessariamente são os melhores para serem utilizados em um projeto específico. São meros exemplos construídos para explicações mais aprofundadas nas aulas mencionadas.
Exemplo de construção de tabelas
Exemplo SEM identificação de colunas e linhas
| Nome | Sobrenome | Idade | Aniversário |
| Bruna | Mendes | 5 | 18 de Abril |
| Marcela | Teodoro | 8 | 14 de Janeiro |
| Rafael | Marcondes | 11 | 17 de Novembro |
| Pedro | Almeida | 7 | 7 de Outubro |
Exemplo COM identificação de colunas e linhas (scope row, scope col)
| Nome | Sobrenome | Idade | Aniversário |
|---|---|---|---|
| Bruna | Mendes | 5 | 18 de Abril |
| Marcela | Teodoro | 8 | 14 de Janeiro |
| Rafael | Marcondes | 11 | 17 de Novembro |
| Pedro | Almeida | 7 | 7 de Outubro |
Exemplo com identificação de colunas e linhas e LEGENDA (caption)
| Nome | Sobrenome | Idade | Aniversário |
|---|---|---|---|
| Bruna | Mendes | 5 | 18 de Abril |
| Marcela | Teodoro | 8 | 14 de Janeiro |
| Rafael | Marcondes | 11 | 17 de Novembro |
| Pedro | Almeida | 7 | 7 de Outubro |