Power Duckets
Olá,Caro Visitante!
quer ter a permissão de ver Link's Fazer Tutoriais
e Saber mas sobre o fórum? Registre-se Já O melhor conteúdo encontra-se aqui

Já é um Membro?
Logue-se e faça parte do nosso Mundo de Lazer.

Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Administrador
Administrador
Localização Localização : Chiado
Ver perfil do usuáriohttp://power-duckets.forumfacil.net

Lição 11: Mais tabelas

em Dom Jul 07, 2013 2:56 am
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> (sem aspa) para indicar quantas colunas estarão contidas em uma célula.

Exemplo 1:


Código:
<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:

Código:
<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:


Código:
<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.


seta Olá Usuário,primeiro de Tudo leia Nossas Regras

seta Precisa de ajuda vá em Ajuda e Suporte

seta Acesse nosso Formulário Staff

-----------------------------------------------------------

Sign


     
               
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum