Mais tabelas
O título “Mais tabelas” pode sugerir uma lição enfadonha. Mas, veja as coisas pelo lado positivo, depois que você se tornar um mestre em tabelas nada mais do HTML poderá desafiá-lo.
O que mais existe?
Os dois atributos colspan 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> Será renderizado no navegador assim:
| Célula 1 | ||
| Célula 2 | Célula 3 | Célula 4 |
Definindo 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> Será renderizado no navegador assim:
| 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> Será renderizado no navegador assim:
| Célula 1 | Célula 2 |
| Célula 3 | |
| Célula 4 |
No exemplo acima 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.