THead complexa
Veremos como fazer um thead complexo.
<table> <caption>Produzidos x Vendidos por Loja</caption> <thead> <tr> <th rowspan="2"></th> <th colspan="2">Afonso Pena</th> <th colspan="2">Antônia Pereira</th> </tr> <tr> <th>Produzidos</th> <th>Vendidos</th> <th>Produzidos</th> <th>Vendidos</th> </tr> </thead> </table>
Primeiro de tudo iremos criar o nosso table, colocando a descrição com o caption.
Criaremos o thead para começarmos o nosso cabeçalho, abrimos o tr dentro para linha e colocamos dentro deste tr 3 th, o primeiro sendo vazio.
Na próxima linha já temos os produzidos e vendidos, com o auxilio do emmet, criamos direto 4 th e colocamos os produzidos e vendidos.
Notamos que ainda está desorganizado, então usaremos o atributo rowspan="2"
, na primeira linha, para ocupar 2 linhas, empurrando os elementos para o lado.
Agora vemos que sobrou 2 colunas vazias, então usaremos o atributo de coluna colspan="2"
nas 2 lojas.
Links úteis
Discord
O grupo é um dos pilares do nosso método e impulsiona tanto o desenvolvimento de habilidades técnicas e comportamentais, quanto a carreira através de conexões profissionais.
Plataforma
Nossa plataforma de aprendizado contínuo reúne todos os nossos programas completos e é a casa dos eventos gratuitos da Rocketseat.