Html, linhas e colunas

Vamos ver como criar outros modelos adicionando linhas e colunas. Já que vocês conhecem os elementos fundamentais de uma tabela, vamos fazer uma com duas células.

Aqui está como será nossa tabela:

O que determina a inserção de uma célula em uma tabela entre os três elementos listados? A tag td. Então usamos td para adicionar duas células em nossa tabela:

Toda vez que você repetir a tag td, uma célula será formada. Se você a repetir três vezes, terá claramente três células. Agora vamos ver como criar uma tabela com duas linhas usando tr. Aqui está como será nossa tabela:

Também neste caso, a tag tr é repetida para o número de linhas a inserir. Preste bastante atenção… a tag tr sempre envolve a tag td pois, as duas linhas formam na prática duas células. Agora, vamos criar uma tabela com duas linhas e duas células na parte inferior.

Criamos uma tabela formada por duas linhas e duas células na parte inferior. Aqui está o código usado:

Apresento a vocês o colspan que serve para dividir uma única célula em várias células. No nosso caso, a linha inferior da tabela foi dividida, através do colspan, em duas células. Usando colspan deve-se inserir as medidas das duas células individuais geradas pelo próprio colspan, medidas que devem levar em conta o total da tabela:

 

A medida total da célula é 400px, que será dividida em duas células pelo colspan.

 

Dividindo em duas células de tamanho igual, obteremos duas células de 200px cada (400:2). Se quisermos que uma das duas células geradas pelo colspan seja maior que a outra, devemos sempre considerar como referência a medida total da tabela, portanto:

Portanto, você pode atribuir medidas diferentes às duas células geradas, contanto que a soma não ultrapasse 400px. Você pode fazer exercícios construindo tabelas com várias combinações de medidas, inserindo linhas e células, redimensionando-as para ver o efeito e encontrar a combinação mais adequada às suas necessidades.

Pubblicato in HTML & CSS