Tabelas
O curso trata de tabelas HTML para dados tabulares: registros nas linhas e atributos nas colunas. Começa pelo teste da planilha e pela história das tabelas de layout. Depois passa por tr, td e th, pelo que o navegador corrige em silêncio e pelas regiões caption, thead, tbody e tfoot. As aulas seguintes explicam a aritmética de colspan e rowspan, scope e headers para leitores de tela e o overflow horizontal em telas pequenas. A última aula monta uma tabela de pedidos no Rails, com estado vazio e totais.
O que você vai aprender
- ✓Quando um conteúdo é dado tabular e quando a tabela é a ferramenta errada
- ✓Como tr, td e th formam linhas, células e cabeçalhos, incluindo células vazias
- ✓Como caption, thead, tbody e tfoot nomeiam a tabela e agrupam as linhas
- ✓Como colspan e rowspan funcionam e como manter a mesma contagem de colunas em cada linha
- ✓Como scope, headers e id fazem o leitor de tela anunciar os cabeçalhos certos
- ✓Como tratar tabelas largas com um wrapper rolável e conferir a estrutura nas DevTools
Para que servem as tabelas (e o que elas já estragaram)
Abra qualquer painel admin de uma app Rails: pedidos, usuários, faturas, deploys. O formato é sempre o mesmo: linhas de registros, colunas de atributos. Antes de escrever uma única tag, faça a pergunta que decide se <table> é a ferramenta certa:
Ler a aula completa grátis →Currículo
7 aulasPara que servem as tabelas (e o que elas já estragaram)
Mostra quando um conteúdo é dado tabular, as tags básicas de tabela e por que tabelas de layout caíram.
Linhas, células, e o que o navegador corrige em silêncio
Trata de linhas, células, cabeçalhos de coluna e de linha, células vazias e as correções silenciosas do navegador.
thead, tbody, tfoot e caption: uma tabela com regiões
Mostra como o caption nomeia a tabela e como thead, tbody, tfoot, colgroup e col a organizam.
colspan e rowspan: células que cruzam a grade
Explica colspan e rowspan, a regra de contagem de colunas, rótulos de grupo e spans em totais e estados vazios.
scope e headers: tabelas que um leitor de tela navega
Mostra como leitores de tela anunciam cabeçalhos, o atributo scope, headers e id e quando dividir tabelas complexas.
Tabelas que não cabem: overflow sem quebrar nada
Trata tabelas largas com um wrapper overflow-x, descarta correções nocivas e aborda cabeçalhos fixos e alinhamento numérico.
Juntando tudo: uma tabela de pedidos com cara de produção
Monta uma tabela de pedidos no Rails com todas as aulas, quebra de propósito e confere com ferramentas.