Tabelas
Criar tabelas em HTML pode parecer complicado à primeira vista, mas depois que se entende a estrutura básica das tabelas, fica tudo muito simples.
A tag que determina o início de uma tabela é <table>
e seu par de encerramento é </table>
No entanto, para criarmos as colunas e linhas existem outras tags que devem estar dentro da tag <table> .
Para criar uma linha utilizamos <tr>
e para encerrá-la </tr>.
As colunas são criadas com <td> e </td>.
Se quisermos, por exemplo, criar uma tabela com 3 linhas e 2 colunas, nosso código ficará assim:
<table>
<tr><td>
Linha 1, Coluna 1 </td><td>
Linha 1, Coluna 2 </td></tr>
<tr><td>
Linha 2, Coluna 1 </td><td>
Linha 2, Coluna 2 </td></tr>
<tr><td>
Linha 3, Coluna 1 </td><td>
Linha 3, Coluna 2 </td></tr>
</table>
Isso geraria a seguinte página:
As tags <tr>
e </tr>
determinaram o início e o fim da linha da tabela, enquanto a dupla <td> e </td>
ficaram responsáveis por cada célula da tabela.
Para delimitar claramente onde uma célula começa, podemos adicionar borda a nossa tabela, bastando inserir o parâmetro border="1" na tag <table>,
da seguinte forma:
<table border="1">
<tr><td>
Linha 1, Coluna 1 </td><td>
Linha 1, Coluna 2 </td></tr>
<tr><td>
Linha 2, Coluna 1 </td><td>
Linha 2, Coluna 2 </td></tr>
<tr><td>
Linha 3, Coluna 1 </td><td>
Linha 3, Coluna 2 </td></tr>
</table>
Dessa forma fica mais claro distinguir uma célula de outra, bem como as linhas da tabela.
O valor definido na propriedade border determinará, em pixels, a espessura da borda da tabela. Segue um exemplo com valor border=”10”:
Outro parâmetro interessante para ser usado nas tabelas é o rowspan, que pode unir linhas de uma mesma coluna, conforme a página abaixo:
Para criá-la utilizei o seguinte código:
<table border="2">
<tr><td rowspan="4">
Coluna 1, Célula 1 </td>
<td>
Coluna 2, Célula 1 </td>
</tr>
<tr>
<td>
Coluna 2, Célula 2 </td>
</tr>
<tr>
<td>
Coluna 2, Célula 3 </td>
</tr>
<tr>
<td>
Coluna 2, Célula 4 </td>
</tr>
</table>
Percebam que defini, no parâmetro rowspan, dentro da primeira coluna, a quantidade de linhas que gostaria de unir. Então, nas linhas seguintes criei apenas uma coluna.
Bem, essas são as tags responsáveis pela criação de tabelas. Lembre-se que <tr>
inicia uma linha e <td>
uma célula. É possível, inclusive, criar tabelas aninhadas, ou seja, uma tabela dentro de outra. É só verificar sua necessidade e implementar o código.