Curso de HTML – Parte 6

Um dos elementos que causa mais dúvidas na criação de sites em html são as tabelas.

Então nessa última aula do curso básico de html do blog Fazer o meu site iremos aprender como se cria tabela para sites em html.

Se vocĂŞ nĂŁo acompanhou nosso curso desde o inĂ­cio, por favor veja as aulas que ainda nĂŁo viu:

Curso de HTML – Introdução

Curso de HTML – Parte 1

Curso de HTML – Parte 2

Curso de HTML – Parte 3

Curso de HTML – Parte 4

Curso de HTML – Parte 5

TABELAS HTML

As tabelas possuem cinco tags diferentes, entĂŁo as conheceremos logo, com seus respectivos atributos.

<table>

Atributo -  align (alinhamento da tabela com relação à página)
Valores – center, left, right

Atributo – background(caminho de onde virá a imagem, que cobrirá o fundo da tabela)
Valores – http://, ftp://, C:\alguma_pasta, ..\alguma_pasta

Atributo -  bgcolor (cor que cobrirá o fundo da tabela)
Valores – cor

Atributo -  border (espessura da borda da tabela)
Valores – pixel

Atributo -   bordercolor (cor da borda da tabela)
Valores – cor

Atributo -   bordercolordark (cor da borda do lado direito da tabela)
Valores – cor

Atributo -   bordercolorlight (cor da borda do lado esquerdo da tabela)
Valores – cor

Atributo -   cellpadding (espaço criado dentro das células da tabela)
Valores – pixel

Atributo -   cellspacing (espaço criado entre as células da tabela)
Valores – pixel

Atributo -   height (altura inicial da tabela)
Valores – pixel

Atributo -   width (largura da tabela)
Valores – pixel

<tr>

Atributo -  bgcolor (cor que cobrirá o fundo da linha)
Valores – cor

Atributo -  align (alinhamento horizontal do texto ou elemento com relação à linha)
Valores – center, char, justify, left, right

Atributo -  valign (alinhamento vertical do texto ou elemento com relação à linha)
Valores – baseline, bottom, middle, top

Atributo -   bordercolor (cor da borda da linha)
Valores – cor

Atributo -   bordercolordark (cor da borda do lado direito da linha)
Valores – cor

Atributo -   bordercolorlight (cor da borda do lado esquerdo da linha)
Valores – cor

Atributo – nowrap (nĂŁo permitir quebra de linha)
Valores – nenhum(nowrap por si só já é uma instrução)

<td> 

Atributo – background(caminho de onde virá a imagem, que cobrirá o fundo da cĂ©lula)
Valores – http://, ftp://, C:\alguma_pasta, ..\alguma_pasta

Atributo -  bgcolor (cor que cobrirá o fundo da célula)
Valores – cor

Atributo -  align (alinhamento horizontal do texto ou elemento com relação à célula)
Valores – center, char, justify, left, right

Atributo -  valign (alinhamento vertical do texto ou elemento com relação à linha)
Valores – baseline, bottom, middle, top

Atributo -   bordercolor (cor da borda da linha)
Valores – cor

Atributo -   bordercolordark (cor da borda do lado direito da linha)
Valores – cor

Atributo -   bordercolorlight (cor da borda do lado esquerdo da linha)
Valores – cor

Atributo – nowrap (nĂŁo permitir quebra de linha)
Valores – nenhum(nowrap por si só já é uma instrução)

Atributo – colspan (expande a coluna no nĂşmero determinado)
Valores – numĂ©rico

Atributo – rowspan (expande a linha no nĂşmero determinado)
Valores – numĂ©rico

<th> 

Atributo – background(caminho de onde virá a imagem, que cobrirá o fundo da cĂ©lula)
Valores – http://, ftp://, C:\alguma_pasta, ..\alguma_pasta

Atributo -  bgcolor (cor que cobrirá o fundo da célula)
Valores – cor

Atributo -  align (alinhamento horizontal do texto ou elemento com relação à célula)
Valores – center, char, justify, left, right

Atributo -  valign (alinhamento vertical do texto ou elemento com relação à linha)
Valores – baseline, bottom, middle, top

Atributo -   bordercolor (cor da borda da linha)
Valores – cor

Atributo -   bordercolordark (cor da borda do lado direito da linha)
Valores – cor

Atributo -   bordercolorlight (cor da borda do lado esquerdo da linha)
Valores – cor

Atributo – nowrap (nĂŁo permitir quebra de linha)
Valores – nenhum(nowrap por si só já é uma instrução)

Atributo – colspan (expande a coluna no nĂşmero determinado)
Valores – numérico

Atributo – rowspan (expande a linha no nĂşmero determinado)
Valores – numĂ©rico

<caption> 

Atributo -  align (alinhamento horizontal do texto ou elemento com relação à tabela)
Valores – center, char, justify, left, right

Atributo -  valing (Define se o texto irá ficar acima ou abaixo da tabela)
Valores – bottom, top

Tabelas são um dos assuntos mais avançados do HTML, não que seja difícil, mas requer muito cuidado na sua criação, aqui as endentações já faladas bem anteriormente se tornam bastante necessárias, pois poderemos ter uma tabela dentro de outra, que por sua vez pode conter outras tabelas, tornando cada vez mais complicado enxergar quem está dentro de quem. O melhor artifício para isso são as endentações.

Vamos comentar sobre as cinco tags que fazem parte de uma tabela.

Primeiro teremos a tag  <table> que é a tag que delimita a tabela, todas as outras tags que por ventura estejam dentro desta, fará parte da própria. A tabela pode ter vários atributos(veja definições acima) o atributo HEIGHT na verdade define a altura original da tabela, por exemplo podemos definir uma tabela como 100% então inicialmente ela ocupará a altura total da definição de tela de cada monitor, pode ser definida também em pixel, mas será um tamanho inicial fixo, por exemplo: se em um monitor a altura está definido em 600px e definimos a altura inicial da tabela em 600px, nesse monitor ela ocupará a altura toda, já em um monitor de 768px irá sobrar 168px. Mas quando definimos 100%, então será a altura total  em pixels para  qualquer monitor,  não importa o sua definição. É bom entendermos que estamos falando da altura inicial da tabela, pois esta não será respeitada, caso o texto ou elemento possua uma altura maior do que a definida. Já a largura (WIDTH) será respeitada, com uma ressalva: se você colocar por exemplo um seqüência de letras sem espaço ex: wwwwwwwwwwwwwwwwwwwwww  e ultrapassar a largura definida, a célula se expandirá além do tamanho previsto; mas se houver um espaço que seja ex: wwwwwwwwwwwwwwwww  wwwwwwwwwwww e ultrapassar o tamanha, então haverá uma quebra de linha.

A tag “<table>” nĂŁo pode ser usada sozinha, entĂŁo veremos  as outras.

A tag “<tr>”. Essa tag Ă© que define as linhas de uma tabela

Tabela html com duas linhas:

1
2
3
4
5
6
7

<table>
<tr> tags td que representam as céllas da tabela </tr>
<tr> tags td que representam as céllas da tabela </tr>
</table>

Perceba que cada conjunto de tags tr (abertura e fechamento) marcam uma linha.

No exemplo acima ainda não teriamos uma tabela, pois para isso são necessárias pelo menos um conjunto de tags td. Então para que esse exemplo funcionasse teria que, no mínimo ter a seguinte configuração:

1
2
3
4
5
6
7

<table border="1">
<tr> <td>Primeira célula</td> </tr>
<tr> <td>Segunda célula</td> </tr>
</table>

O resultado prático seria:

Observe que foi usado o atributo border na tag table para criar as bordas.

Para colocar duas células por linha bastava fazer assim:

1
2
3
4
5
6
7

<table border="1">
<tr> <td>Primeira célula</td> <td>Segunda célula</td> </tr>
<tr> <td>Terceira célula</td> <td>Quarta célula</td> </tr>
</table>

O resultado seria esse:

O atributo colspan expende uma célula ocupando o espaço de outras no número que foi determinado.

No exemplo acima nos poderíamos fazer com que a primeira linha contivesse apenas uma célula que ocuparia todo o espaço horizontal, vejamos como seria.

1
2
3
4
5
6
7

<table border="1">
<tr> <td colspan="2" align="center">Primeira célula</td></tr>
<tr> <td>Terceira célula</td> <td>Quarta célula</td> </tr>
</table>

O resultado seria:

Observe que a segunda cĂ©lula sumiu, o seu lugar foi preenchido pela primeira com expansĂŁo de coluna “2″ e a segunda linha continua com duas colunas que abrigam respectivamente as cĂ©lulas 3 e 4. Veja tambĂ©m que foi usado o atributo “align” na td que foi expandida, para centralizar o texto.

Bom, e se a opção fosse por expansão de linha e não de coluna?
ou seja, a primeira célula expandiria verticalmente, ocupando o lugar da terceira.

EntĂŁo usarĂ­amos o atributo rowspan com o valor 2, o cĂłdigo ficaria assim:

1
2
3
4
5
6
7
8
9

<table border="1">
<tr>
<td rowspan="2" valign="middle">Primeira célula</td> <td>Segunda célula</td> </tr>
<tr> <td>Quarta célula</td> </tr>
</table>

Os espaços que eu deixo no código, no lugar das células que foram retiradas, não precisam existir, só os deixo para você poder visualizar onde era o lugar da célula em questão

Agora o resultado seria este:

A primeira célula expandiu-se ocupando o lugar da terceira.

Observe tambĂ©m que dessa vĂŞz usamos o atributo valign com o valor “middle” para alinhar o texto verticalmente, no meio da cĂ©lula expandida.

Nos tambĂ©m temos a tag “th” ela Ă© uma tag de tĂ­tulo, funciona basicamente como uma “td” sĂł que configura o texto de maneira diferente. entĂŁo se na primeira cĂ©lula ao invĂ©s de td usássemos th.

1
2
3
4
5
6
7

<table border="1">
<tr> <th rowspan="2" valign="middle">Primeira célula</th> <td>Segunda célula</td> </tr>
<tr> <td>Quarta célula</td> </tr>
</table>

O resultado seria como esse:

Veja que o texto da primeira célula ficou destacado em negrito, pois agora é considerado como um título.

VocĂŞ ainda tem a tag “caption” que cria uma legenda, os atributos podem ser “align” e “valign” para alinhamento horizontai e vertical.

1
2
3
4
5
6
7
8
9

<table border="1">
<caption align="center" valign="top">Nossa Legenda</caption>
<tr> <th rowspan="2" valign="middle">Primeira célula</th> <td>Segunda célula</td> </tr>
<tr> <td>Quarta célula</td> </tr>
</table>

O resultado seria esse:

Podemos ainda, colocar uma tabela dentro de outra, vamos usar tabelas bem simples para uma compreensão mais fácil.

Vou criar uma tabela com apenas uma linha e duas células e dentro da primeira célula eu irei colocar outra tabela com duas linhas e uma célula apenas em cada.

Dessa vez usaremos uma escrita vertical para o cĂłdigo ficar mais claro, ou seja, ao invĂ©s de colocarmos as tags “td” em sentido horizontal

1

<tr><td>Blog</td> <td>Fazer o meu site</td></tr>

Colocaremos assim:

1
2
3
4
5
6
7

<tr>
<td>Blog</td>
<td>Fazer o meu site</td>
</tr>

Isso em nada irá interferir no resultado visual da nossa tabela.

Vamos ao nosso cĂłdigo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<table border="1" width="250" height="250">
<tr>
<td>
<!-- Tabela interna -->
<table border="1" width="100%" height="100%">
<tr>
<td>CĂ©lula 1A</td>
</tr>
<tr>
<td>CĂ©lula 1B</td>
</tr>
</table>
<!-- Fim Tabela interna -->
</td>
<td>
CĂ©lula 2
</td>
</tr>
</table>

Vamos analisar alguns detalhes do nosso cĂłdigo.

Veja que eu coloquei na tabela principal, uma largura e altura de 250px e na tabela interna eu coloquei em porcentagem de 100%, entĂŁo a tabela interna sempre irá assumir a largura e altura total da cĂ©lula onde ela se encontra, mas observe que nĂŁo Ă© 250px pois a tabela externa divide a altura e largura para duas cĂ©lulas, ficando cada cĂ©lula com a metade das dimensões “125px” e sĂŁo essas as dimensões que a tabela interna terá.

VocĂŞ pode perceber tambĂ©m uma tag de comentário abrindo e fechando a tabela interna: <!– Tabela interna –>, as tags de comentário nĂŁo aparecem e nem tem efeito nenhum no cĂłdigo, serve apenas para esclarecimentos e marcações. No nosso caso vocĂŞ pode visualizar rapidamente a tabela interna, porque ela está entre duas tags de comentário

O resultado do cĂłdigo:

E Ă© isso, chegamos ao fim do nosso curso básico de HTML, deixando claro que esse curso nĂŁo tem nenhuma pretensĂŁo de deixar ninguĂ©m expert em HTML. É apenas para dar um conhecimento básico que todo mundo que tem um blog ou site precisa ter, mesmo os que usam sistemas de gerenciamento de conteĂşdo como o WordPress, Blogger, precisam ter, mesmo que vocĂŞ nĂŁo mexa diretamente com o cĂłdigo, acredite, mais cedo ou mais tarde sentirá essa necessidade, nem que seja uma pequena mudança ou inclusĂŁo de algum plug-in que exija isso, e nesse momento, quando abrir o cĂłdigo, pelo menos nĂŁo se sentirá um peixe totalmente fora d’água.