Html
As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegação e observações. Tabelas implementam um conceito importante de design, as "grades", segundo as quais organizamos textos e ilustrações de maneira organizada.
Como já foi possível perceber, as tabelas podem conter textos, listas, parágrafos, imagens, diversas outras formatações - inclusive outras tabelas. Novas versões de HTML e de navegadores populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.
A formatação de tabelas faz parte da versão 3.0 da linguagem HTML. Manipular tabelas em HTML dá trabalho e necessita de calma.
A tag para criação de uma tabela é , e dentro dela você coloca atributos importantes para a criação correta da sua tabela. Não esqueça de fazer o fechamento da tag com .
Atributos de Tabela
BORDER: O elemento delimita uma tabela e a espessura de sua borda:
Listagem 1: Sintaxe de uso do atributo border
1 ...
WIDTH e HEIGHT: com esses atributos, você pode definir o tamanho que a tabela vai ocupar na tela. WIDTH (largura), HEIGHT (altura). Eles podem ser em pixels ou em porcentagem. Basicamente o HEIGHT não é usado , mas o valor de largura é muito útil. Veja como usar:
Listagem 2: Sintaxe de uso dos atributos width e height
1
Segue um exemplo de tabela com valor de largura que ocupe 75% da tela (WIDTH="75%"):
Linha 1, Coluna 1 Linha 1, Coluna 2
Linha 2, Coluna 1 Linha 3, Coluna 2
Dentro dessa formatação, inserimos as linhas e elementos da tabela:
...: define um cabeçalho para a tabela
>.. : delimita uma linha
...: delimita uma coluna da tabela
Veja como fica o código para a criação de uma tabela com 2 linhas e 2 colunas:
Listagem 3: Código de uma tabela 2x2
1
2
3
4
5
6
7
8
9
10
Linha1, Coluna