Às vezes, você precisa de um pouco mais de flexibilidade no seu design tabela HTML5. Dê uma olhada em uma página da agenda diária de um senhor do mal. Sendo um senhor do mal é claramente um negócio complexo. Do ponto de vista do código, os itens que ocupam mais de uma célula são as mais interessantes. Projetando armadilhas leva duas manhãs, e melhorar o esconderijo leva de três.

Dê uma olhada no código, e você vai ver como ele funciona:

Usando colspan e rowspan
Meu horário
 
Segunda-feira
terça-feira
quarta-feira
quinta-feira
Sexta-feira
Café da manhã
no covil
com companheiros
no covil
no covil
no covil
Manhã
armadilhas de design
melhorar Hideout
Tarde
minions de trem
minions de trem
minions de trem
minions de trem
dominação mundial
Tarde
riso manaical
riso manaical
riso manaical
riso manaical

O segredo para fazer células maior que o padrão é de dois atributos especiais: e.

Como abranger várias colunas

As atividades da manhã tendem a acontecer ao longo de vários dias. armadilhas projetando terá tanto segunda-feira e terça-feira, e melhorar o esconderijo ocuparão as restantes três pela manhã. Tome um outro olhar na manhã row- aqui está como isso é feito:

 Manhãarmadilhas de designmelhorar Hideout

A célula Projeto Traps se estende por mais de duas colunas normais. O atributo informa quantas colunas esta célula irá tomar.

A linha de manhã ainda ocupa seis colunas. A é larga uma coluna, como normal, mas a célula Projeto Armadilhas abrange duas colunas ea célula Melhorar Hideout leva de três, o que totaliza seis colunas de largura. Se você aumentar a largura de uma célula, você precisa eliminar algumas outras células na linha para compensar.

Como abranger várias linhas

Uma propriedade relacionada - - permite que uma célula para ocupar mais do que uma linha de uma tabela. Olhar para trás, a coluna de sexta-feira, e você verá a célula World Domination ocupa dois intervalos de tempo. (Se a dominação do mundo foi fácil, todo mundo iria fazê-lo.) Aqui está o código relevante:

 Tardeminions de tremminions de tremminions de tremminions de tremdominação mundialTarderisada maníacarisada maníacarisada maníacarisada maníaca

A linha noite tem apenas cinco entradas porque a célula Mundial Domínio se estende para dentro do espaço que seria normalmente ocupado por um par.

Esboçar o que você quer realizar em primeiro lugar.