HTML, texto e tabelas

Mesmo que seja colorida o quanto quiser, uma tabela deve conter algo, caso contrário, não teria propósito de existir. Vejamos então como combinar e formatar uma tabela adequadamente para que ela acolha texto em seu interior.

Alinhamento do texto Vejamos, uma vez inserido um texto, como alinhar o texto dentro da tabela com o comando align. Primeiro, vamos criar a tabela.

Eis a tabela:

Vamos inserir texto:

Eis como a tabela se apresenta com o texto:

Eis a minha tabela

Perfeito! Agora, se quiséssemos alinhar o texto ao centro desta forma:

Eis a minha tabela

O código será:

Sim, os parágrafos voltam a entrar em jogo. Com o atributo p identificamos um parágrafo e com align alinhamo-lo como quisermos, no nosso exemplo, ao centro. Claramente, para o alinhamento pode utilizar os parâmetros left e à sua escolha. Margens Se o texto ficar demasiado próximo da borda da tabela, é possível aumentar o espaço entre estes dois elementos utilizando o atributo cellpadding que nos permite criar espaço expresso em pixels. Vamos comparar duas tabelas, uma sem cellpadding e outra com cellpadding: Sem cellpadding:

Eis a minha tabela

Com cellpadding definido para 3px:

Eis a minha tabela

Eis o código com cellpadding:

O espaçamento Agora vamos ver como podemos ajustar o espaçamento do texto dentro da tabela. Vamos retomar nosso exemplo adicionando uma linha de texto:

Aqui está minha tabela Aqui está minha tabela

Vamos ver agora como eliminar o espaço criado entre os dois parágrafos de texto para poder ter este resultado:

Aqui está minha tabela Aqui está minha tabela

Para eliminar o espaço, utilizamos a tag style. Com margin-top para o espaçamento superior e margin-bottom para o inferior, podemos definir para zero pixels essas duas margens, ou seja, sendo cada linha de parágrafo, uma linha própria, a cada uma delas definimos as margens, uma superior e uma inferior, eliminando-as completamente. Vamos tentar definir a margem superior para ambos os parágrafos como 5 pixels:

Aqui está minha tabela Aqui está minha tabela

Como podem ver, entre o primeiro parágrafo e o segundo, na parte superior, é criado um espaço de 5px. Agora, se eu também definir a margem inferior para 5px, obteremos o seguinte:

Aqui está minha tabela Aqui está minha tabela

Pratiquem a definição de várias medidas para as margens, experimentando assim as várias combinações. Esta lição que acabamos de ver é muito importante para a configuração gráfica do texto.

Pubblicato in HTML & CSS