Quando vê um site com todo o conteúdo ordenado e alinhado, significa que por trás existe uma estrutura que permite fazer isso, e a estrutura é representada pelas tabelas.
Adicione-nos às suas fontes preferidas.
Os “Gurus” da nova informática tendem a dar ordem e linearidade a um site recorrendo aos “Folhas de Estilo”, porque é assim que o W3C quer… Mencionaremos os “Folhas de Estilo” mais adiante, mas eu defendo que a ordem que as tabelas dão a um documento web é inigualável. Bem, agora que sabe que as tabelas estão na base da estrutura de uma página web, vamos fazer amizade com elas, ok?
Comecemos logo por dizer que as unidades de medida utilizadas para as tabelas são duas, ou seja,pixels e as percentagens. Utilizando a medida em pixels, a tabela será do tipo fixa, ou seja, qualquer resolução de vídeo que os seus utilizadores utilizem, a tabela será sempre exibida com as mesmas medidas. Se, em vez disso, utilizar uma medida em percentagem, a tabela tornar-se-á do tipo fluida, ou seja, adaptar-se-á automaticamente à resolução de vídeo dos seus utilizadores. Eis um exemplo para entender melhor este conceito.
Suponhamos que cria uma tabela de 400 px. Os seus utilizadores verão no ecrã sempre 400 px, independentemente da resolução que utilizem. Se, em vez disso, criar uma tabela de 80%, esta ocupará 80% do ecrã dos seus utilizadores… sempre e em qualquer circunstância.
Portanto, diremos em síntese que existem duas tipologias de tabelas, fixa e fluida que se distinguem pela unidade de medida utilizada na sua criação. Em conclusão, podemos tranquilamente dizer que as tabelas regulam o Layout de uma página web, ou seja, a representação gráfica no ecrã.
Depois de vermos o que são as tabelas e para que servem, comecemos a criar uma. Digamos logo que as tabelas podem ser divididas em linhas e colunas e a união desta divisão constitui as células da tabela. Uma tabela deve conter pelo menos uma linha para poder ser válida! Vejamos então alguns exemplos para entender melhor o que foi dito acima:
Tabela com uma linha:
| linha |
Tabela com duas linhas:
| linha |
| linha |
Tabela com uma linha e duas colunas – 2 células:
| célula | célula |
Tabela com duas linhas e duas colunas – 4 células:
| célula | célula |
| célula | célula |
Bem, feita esta importante premissa, vamos criar uma tabela de 400 pixels numa linha. Para criar uma tabela, usa-se a tag table juntamente com outros parâmetros que regulam a aparência da própria tabela. Eis então a nossa tabela com estes parâmetros que comentaremos mais tarde:
Neste exemplo, definimos a borda da tabela para 1px através do atributo border, assim como definimos o comprimento para 400px através do atributo width. Neste exemplo, não inserimos linhas, mas se é verdade que uma tabela para ser válida deve ter pelo menos uma linha… vamos inseri-la agora.
Através do uso de tr, inserimos uma linha na nossa tabela. Pode notar que com o simples uso de tr, embora válido, nada será mostrado no ecrã. É necessário o terceiro elemento base para a criação de uma tabela, e o elemento é td, que cria uma célula na tabela. Eis então os três elementos base para uma tabela, ou seja, table, tr e td.
Recapitulando, criámos uma tabela com 400px de comprimento, com uma borda de 1px, formada por uma linha e uma célula. Eis a nossa tabela:
Nas próximas lições, veremos como adicionar células, unir células e muitos outros elementos das tabelas.
Pubblicato in HTML & CSS
Seja o primeiro a comentar