Apesar de existirem atualmente muitos softwares que geram todo o código HTML

a partir da montagem visual de uma página web, como por exemplo é feito com o
uso do Dreamweaver ou Front Page, sempre ressalto a importância do design
conhecer os códigos gerados por estes softwares.

Como técnicos em Informática para Internet temos por obrigação conhecer o

HTML de forma a podermos prestarmos manutenção com maior conhecimento
de “causa” e também não ficarmos muito dependentes de softwares, como se
fossem “muletas”. O bom profissional deve ser inclusive capaz de trabalhar, em
uma emergência, até mesmo com o “Bloco de Notas”!

Neste artigo irei falar sobre tabelas. Criar tabelas em HTML é um dos
conhecimentos básicos que todo Webdesign deve ter. Através das tabelas
podemos organizar dados de forma tabulares como por exemplo,um quadro de
horário, um calendário ou mesmo uma tabela periódica.

Apesar de não ser o objetivo para o qual foi criada, com “TABLE” é possível
organizarmos os conteúdos de um site e desta maneira criamos diversos tipos de
layout, ou seja, estruturamos o site em cabeçalho, menu, rodapé etc. Ao contrário
do que muitos podem pensar ainda há muitos sites na Internet feitos em tabelas
e também há os construídos por “DIV”, com o uso de CSS que é um conceito mais
avançado.

Como todos sabem, uma tabela é composta por linhas e colunas. A intersecção
ou o cruzamento de uma linha com uma coluna define o que chamamos de
“célula”. Estes são conceitos que aprendemos não apenas no HTML, mas também
em softwares como o Microsoft Excel e Word, por trabalharem com o mesmo
recurso.

Em HTML a linha de uma tabela é denominada TR, que quer dizer “table row” ou
linha da tabela, em português. Já a célula é denominada TD, que por sua vez quer
dizer “table data” ou dados da tabela.

Quando você monta em HTML uma linha com dois TDs, um seguido do outro,
você terá automaticamente o “design” de uma linha com duas colunas. Para ficar
mais claro veja o a tabela abaixo (uma tabela composta por quatro linhas e quatro

colunas):
Se desejarmos criar esta tabela em HTML, teremos de utilizar do seguinte
código:
<table width=”200″ border=”1″>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td>L</td>
<td>M</td>
</tr>
<tr>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
</tr>
</table>

Primeira observação: utilizando o atributo width=”200″ de forma a definirmos

uma largura de 200 pixels para a nossa tabela. Também é importante ressaltar o
uso do atributo border=”1″ de forma a deixarmos as bordas de nossa tabela
visíveis com uma linha de 1 pixel.

Segunda observação: se atente à “endentação”, ou seja, à estrutura do código, pois

os TR estão alinhados mais à direita de TABLE e os TDs mais à direita dos TR,
formando uma estrutura “lógica”.

Observe que temos neste código quatro séries de “TR”, que definem as quatro
linhas e que por sua vez cada linha tem quatro série de “TD” que irão formar
respectivamente quatro “células” seqüenciais, compondo quatro colunas.

Agora que já entendemos o método para definirmos linhas e colunas em HTML

observe o “layout” da tabela abaixo:

Neste caso temos uma “mesclagem”, ou seja, uma mistura de todas as células que
compunham as colunas da primeira linha. Para fazermos isto utilizamos
do COLSPAN, onde “COL” nos remete à palavra coluna e SPAN podemos
entender como mesclar, ou seja, COLSPAN significa “mesclar colunas”. Então se
definirmos para a primeira célula o atributo COLSPAN=”4”, teremos o efeito de
mesclagem das respectivas quatro colunas, conforme podemos observar no
código da tabela:

<table width=”200″ border=”1″>

<tr>
<td colspan=”4″>A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>

Para finalizar este artigo observe o “layout” da seguinte tabela:

Neste caso observa-se que realizamos a mesclagem de células nas linhas da tabela
e não nas colunas, como realizado no exemplo anterior. Para se mesclar linhas
utilizamos do atributo ROWSPAN, onde “row” quer dizer linha, significando
portanto mesclagem de linhas. Para este caso deveremos utilizar do atributo
ROWSPAN = “3”, pois são 3 a quantia de linhas mescladas. Veja o código HTML
desta tabela:

<table width=”200″ border=”1″>

<tr>
<td rowspan=”3″>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
<tr>
 <td>H</td>
<td>I</td>
<td>J</td>
</tr>
</table>

Observem que as colunas B, C e D fazem parte da primeira linha que compõe a

coluna A que foi mesclada, portanto no código estará tudo dentro do mesmo TR
(o primeiro TR). É assim que trabalhamos tabelas em HTML.

Agora, imaginando um layout simples de um site, pense e crie o código HTML

que permitirá a exibição da seguinte tabela: