Tabelas
Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser apresentada em linhas e colunas, de forma lógica.É difícil?
Criar tabelas em HTML pode parecer complicado, mas se você ficar frio e acompanhar passo a passo a explicação, verá que tudo é evidente - tal como acontece com tudo no HTML.Exemplo 1:
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
| Célula 1 | Célula 2 |
| Célula 3 | Célula 4 |
Qual a diferença entre <tr> e <td>?
Como você deve ter visto no exemplo acima, este foi o código HTML mais complicado que escrevemos até agora. Vamos analisar isto por partes e explicar as diferentes tags:3 tags básicas são usadas para inserir tabelas:
<table>começa e termina uma tabela. Evidente.<tr>significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela. Também evidente.<td>significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela. Tudo simples e evidente.
<table>, segue-se uma <tr>, que indica o início de uma nova linha. Duas células são então inseridas na linha: <td>Célula 1</td> e <td>Célula 2</td>. A linha termina com </tr> e uma nova linha <tr> começa imediatamente a seguir. A nova linha também contém duas células. A tabela termina com </table>.Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células:
| Célula 1 | Célula 2 |
| Célula 3 | Célula 4 |
No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número ilimitado de linhas e colunas.
Exemplo 2:
<table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
<tr>
<td>Célula 5</td>
<td>Célula 6</td>
<td>Célula 7</td>
<td>Célula 8</td>
</tr>
<tr>
<td>Célula 9</td>
<td>Célula 10</td>
<td>Célula 11</td>
<td>Célula 12</td>
</tr>
</table>
| Célula 1 | Célula 2 | Célula 3 | Célula 4 |
| Célula 5 | Célula 6 | Célula 7 | Célula 8 |
| Célula 9 | Célula 10 | Célula 11 | Célula 12 |
Existem atributos?
Claro! existem atributos. Por exemplo, o atributo border que é usado para definir a espessura de uma borda em volta da tabela:Exemplo 3:
<table border="1">
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
| Célula 1 | Célula 2 |
| Célula 3 | Célula 4 |
Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela - ou alternativamente em percentagem da tela:
Exemplo 4:
<table border="1" width="30%">
Mais atributos?
Existe uma grande quantidade de atributos para tabelas. A seguir mais dois:- align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma célula. Por exemplo, left, center ou right (à esquerda, no centro ou à direita).
- valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle ou bottom (em cima, no meio ou em baixo).
<td align="right" valign="top">Célula 1</td>
O que posso inserir em tabelas?
Teoricamente você pode inserir qualquer coisa em uma tabela: texto, links e imagens... MAS, tabelas destinam-se a apresentar dados tabulares (isto é, dados que por sua natureza devam ser apresentados em linhas e colunas) então abstenha-se de colocar coisas dentro de tabela simplesmente porque você deseja que elas estejam próximas umas às outras.Nos primórdios da Internet - isto é, há poucos anos atrás - tabelas eram usadas como ferramenta para construir layout. Se você quer controlar a apresentação de textos e imagens, existe uma maneira bem mais racional (dica:CSS). Adiante veremos isto.
Agora, coloque em prática tudo que você aprendeu e crie várias tabelas de diferentes tamanhos, usando diferentes atributos e conteúdos. Isto irá ocupar você por horas.
O que mais existe?
Os dois atributoscolspan e rowspan são usados para criar tabelas singulares.Colspan é a abreviação para "column span". Colspan é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula.Exemplo 1:
<table border="1">
<tr>
<td colspan="3">Célula 1</td>
</tr>
<tr>
<td>Célula 2</td>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table>
| Célula 1 | ||
| Célula 2 | Célula 3 | Célula 4 |
colspan em "3", a célula na primeira linha conterá três colunas. Se você definir colspan em "2", a célula conterá duas colunas e assim será necessário inserir mais uma célula na primeira linha para que tenhamos na primeira linha as colunas em acordo com as da segunda linha.Exemplo 2:
<table border="1">
<tr>
<td colspan="2">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
<td>Célula 5</td>
</tr>
</table>
| Célula 1 | Célula 2 | |
| Célula 3 | Célula 4 | Célula 5 |
Que tal rowspan?
Como você já deve ter concluido,rowspan especifica quantas linhas estarão contidas em uma célula:Exemplo 3:
<table border="1">
<tr>
<td rowspan="3">Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
</tr>
<tr>
<td>Célula 4</td>
</tr>
</table>
| Célula 1 | Célula 2 |
| Célula 3 | |
| Célula 4 |
rowspan é definido em "3" na Célula 1. Isto especifica que uma célula deve conter 3 linhas. Célula 1 e Célula 2 estão na mesma linha, enquanto Célula 3 e Célula 4 formam duas linhas independentes.Confuso? Bem, isto na verdade não é descomplicado e você pode se perder. Assim, é sempre uma boa idéia, desenhar a tabela em uma folha de papel antes de começar a codificação HTML.
Não está confuso? Então vá em frente e crie algumas tabela com uso de
colspan e rowspan.
