Criando tabelas grandes

O HTML 5 permite utilizar algumas tags semânticas para a criação de tabelas. Podemos usar as tags th, tr e td em cada uma dessas tags semânticas, menos no caption. Voltar para a página anterior.

• Tabela - <table>
• Legenda - <caption>
• Cabeçalho - <thead>
• Corpo - <tbody>
• Rodapé - <tfoot>

De forma a definir de que forma os dados estão relacionados definindo o atributo scope para as tags th. Além disso, podemos usar um estilo inline para definir o comprimento das colunas usando <th style="width=50px">, por exemplo.

Um recurso que ainda não é amplamente implementado em todos os navegadores, é o uso de cabeçalho fixo para tabelas grandes, é um efeito bem útil.

    table > thead{
        position: sticky;
        top: 0;
    }

Para criar um efeito zebrado usamos a pseudo-classe nth-child(x) para selecionar as linhas ímpares ou pares, e então aplicamos um efeito. Para as linhas ímpares x assume o valor 'odd' ou '2n-1' e para as linhas pares usamos 'even' ou '2n'.