AULA 8: Criação de tabelas

Nesta aula vamos aprender o básico sobre a criação de tabelas.

As tabelas

As tabelas são sem dúvida uma das componentes mais importantes da criação de páginas web, hoje vamos aprender o básico sobre elas. Sobre este assunto ainda há muito a dizer.

Por vezes vemos páginas com listas de preços, grelhas de produtos, etc. Isto é feito com tabelas. Apesar das tabelas terem outras aplicações bem mais complexas, esta será uma boa maneira de começar.

Como fazer tabelas?

As tabelas podem parecer complicadas de início, mas se prestar atenção e fizer algumas experiências, verá que não é assim tão difícil. Uma tabela, para ficar bem feita precisa de 3 tags. O tag principal é o <table> que tem a sua terminação </table>.

Se colocar apenas este tag, nada aparecerá. Isto porque a tabela é composta por barras e colunas, se não as indicar, nunca terá uma tabela completa.

As barras (horizontais) são indicadas com <tr></tr>. Se queremos por exemplo uma tabela com uma barra horizontal apenas faremos:

<table>
<tr>
</tr>
</table>

Não, ainda não é suficiente, pois é necessário indicar também quantas colunas (verticais) esta tabela tem, para utiliza-se o <td></td>, mas sempre dentro dos <tr> que por sua vez estão sempre dentro da <table>

Uma tabela com apenas uma barra horizontal e uma coluna vertical (portanto, apenas um quadrado) ficará da seguinte forma:

<table>
<tr>
<td>

Aqui fica o conteúdo da tabela, um texto ou uma imagem (o respectivo tag, entenda-se).

</td>
</tr>
</table>

Avançamos a disposição dos tags <tr> e <td> apenas para tornar mais simples a leitura do html. Isto não influencia o resultado final, mas pode ser importante na leitura de tabelas complexas.


Não tem lógica usar uma tabela apenas com uma célula (pelo menos para já, mais tarde veremos como as tabelas podem ser utilizadas para estruturar as páginas). Vamos então criar algo mais complexo, uma lista de preços com três produtos.
Esta tabela terá então, um cabeçalho e 3 produtos o que dá ao todo 4 barras horizontais, e terá duas colunas verticais para os nomes dos produtos e preços.

Vejamos então como ficaria o HTML desta tabela ainda só com barras horizontais:

<table>

<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>

</table>

Já tem 4 barras horizontais. Vamos inserir as duas colunas verticais.
Se a primeira barra tem duas colunas, todas as outras terão forçosamente de ter também duas colunas, uma vez que isto se comporta como um quadriculado.

Vamos acrescentar as duas colunas:

<table>

<tr>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

</table>


Perfeito, agora vamos inserir os dados em cada uma das células


<table>

<tr>
<td>Produto</td>
<td>Preço</td>
</tr>

<tr>
<td>Chocolates</td>
<td>€10,00</td>
</tr>

<tr>
<td>Caramelos</td>
<td>€5,00</td>
</tr>

<tr>
<td>Gelados</td>
<td>€12,00</td>
</tr>

</table>


Dependendo do browser que usa, poderá ver apenas o texto ou não , pois alguns browsers partem do principio que queremos ver as bordas da tabela. Para poder ver qual o aspecto da sua tabela (independentemente do browser que usa), acrescente-lhe uma borda, para isso e para definir a grossura da borda da sua tabela utilize o parâmetro border="" do tag <table>

Assim:

<table border="2">

Acrescente este atributo no seu tag <table> já existente e veja o resultado, poderá também melhorar o aspecto das suas tabelas utilizando para isso os tags que lhe explicámos nas outras aulas.

A partir daqui o funcionamento é sempre o mesmo. As tabelas podem causar algumas dores de cabeça a quem ainda não estiver habituado a criá-las. Aconselhamos pois a criar uma tabela de novo. Defina primeiro quantas células esta irá ter, o número de colunas e barras. Desenhe-a num papel primeiro para o ajudar a visualizar. Lembre-se de primeiro indicar o tag <table>, depois quantas barras horizontais esta irá ter, e depois, dentro dessas barras indicar em cada uma delas em quantas colunas elas se dividem.

Sugerimos:

Experimente, por exemplo, fazer assim a sua lista de links ou de amigos na net com os seus e-mails ou homepages. Indique o nome na coluna à esquerda, esse nome poderá estar linkado para a homepage correspondente ou e-mail. Na coluna da direita pode ter um texto descritivo da pessoa, quem é, qualidades e defeitos. Também pode inserir imagens lá dentro (obviamente), umas fotografias dos seus amigos não ficariam mal e até ajudava a praticar um pouco o redimensionamento de imagens, já que não vai querer ter cada fotografia com o tamanho diferente...


Força e boa sorte!