7. Tabelas em html

A TAG <table> é o elemento principal na definição de uma tabela, e também na definição de outros atributos específicos, que servem para dar maior controle sobre como deve ser apresentada uma tabela numa página HTML.

Os demais elementos de tabela são ignorados se não estiverem entre os tags <table> e </table>.

Uma tabela é constituída por:

<tr> Representa uma linha (table row)

<td> Representa uma célula, ou seja, representa dados (table data)

<table border="0" cellpadding="3px" cellspacing="3px">

  <tr>

    <td bgcolor="#FFFF00" style="border:#333333 1px solid" >coluna1</td>

    <td bgcolor="#FFCC00" style="border:#333333 1px solid" >coluna2</td>

    <td bgcolor="#FF9900" style="border:#333333 1px solid" >coluna3</td>

  </tr>

  <tr>

    <td bgcolor="#FFFF00" style="border:#333333 1px solid" >coluna1</td>

    <td colspan="2" bgcolor="#FFCC00" style="border:#333333 1px solid">coluna2</td>

  </tr>

  <tr>

    <td colspan="2" bgcolor="#FFFF00" style="border:#333333 1px solid" >coluna1</td>

    <td bgcolor="#FF9900" style="border:#333333 1px solid" >coluna3</td>

  </tr>

</table>

Atributos da tag <table>

BORDER="valor”

define os bordos de uma tabela.

CELLSPACING="valor”

O atributo CELLSPACING define a quantidade de espaço inserido entre células individuais da tabela. Seu valor padrão é de 2.

CELLPADDING="valor”

O atributo CELLPADDING define a quantidade de espaço em branco entre as bordas da tabela e o conteúdo de cada célula (texto ou imagem). O valor padrão é igual a 1.

Exemplo: 

<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0> 

dá uma representação da tabela com o formato o mais compacto possível.

WIDTH="valor ou percentagem"

Se utilizado, tal atributo pode especificar ou o tamanho exato da largura da tabela, medida em pixels, ou a largura da tabela como uma percentagem da largura atual da janela do browser.

HEIGHT="valor ou percentagem”

Se utilizado, tal atributo pode especificar ou o tamanho exato da altura da tabela, medida em pixels, ou a altura da tabela como uma porcentagem da altura atual da janela do browser.

ALIGN="left|right"

O atributo ALIGN, permite que a tabela seja alinhada à esquerda|direita, respectivamente, da página, o que permite que porções de texto possam envolver a tabela (tal como no tag <IMG>).

VALIGN="top|bottom"

Tal atributo especifica o alinhamento vertical do texto, e das imagens, que é mostrado dentro das células. O padrão, que é usado em caso de não definição do atributo VALIGN, é o alinhamento centrado.

BGCOLOR="#rrggbb|nome_da_cor"

Esse atributo permite que se especifique a cor de fundo da tabela. Para tal pode-se dar uma tripla em hexadecimal (ex.: FF0000 para o vermelho) ou dar o nome da cor desejada.

BORDERCOLOR="#rrggbb|nome_da_cor"

Permite definir a cor em que o bordo deverá ser mostrado pelos browsers. Para que o atributo BORDERCOLOR funcione é necessária a presença do atributo BORDER no tag <TABLE>.

BACKGROUND="URL_da_imagem"

Permite a colocação de uma imagem como fundo da tabela. Também permite que, em conjunção com os tags <TD> e <TH>, sejam inseridas figuras como fundo de algumas células da tabela.

A TAG <tr>

A tag <tr> cria uma linha na tabela. 

O número de linhas numa tabela é exata e unicamente especificada por quantos tags <tr> são contidos dentro da mesma. 

Atributos da tag <tr>

ALIGN="left | center | right"

Controle se o texto dentro das células é alinhado à esquerda, centrado, ou alinhado à direita.

VALIGN="top | middle | bottom | baseline"

O atributo VALIGN controla o alinhamento vertical do texto (ou imagem) dentro da célula, fazendo-o alinhado ao topo, centralizado, ou alinhado à parte inferior da célula. Se o valor baseline for colocado, o atributo fará com que todas as células, numa mesma linha, sejam alinhadas com sua linha base.

BGCOLOR="#rrggbb | nome_da_cor"

Esse atributo permite que se especifique a cor de fundo da célula. Para tal pode-se dar uma tripla em hexadecimal (ex.: FF0000 para o vermelho) ou dar o nome da cor desejada.

A TAG <td>

A tag <td> especifica uma célula da tabela. 

Células td devem aparecer apenas dentro de linhas da Tabela (<td>). 

As linhas de uma tabela podem possuir um número diferente de células.

Uma linha especificada com menos células que outras será apresentada com elementos (células) em branco à sua direita. Uma célula pode conter qualquer elemento normalmente presente no corpo de uma página HTML.

Atributos da tag <td>

ALIGN="left | center | right"

Este atributo controla o alinhamento do texto (ou da imagem), fazendo-o à esquerda, centrado, ou à direita, respectivamente.

VALIGN="top|middle|bottom|baseline"

O atributo VALIGN controla o alinhamento vertical do texto (ou imagem) dentro da célula, fazendo-o alinhado ao topo, centrado, ou alinhado à parte inferior da célula. Se o valor baseline for colocado, o atributo fará com que todas as células, numa mesma linha, sejam alinhadas com a sua linha base.

WIDTH="valor ou percentagem"

Se usado, este atributo permite especificar a largura exata da célula, seja em pixels, seja em uma percentagem da largura da tabela sendo mostrada. Uma única célula pode definir a largura de toda a coluna, assim é recomendado que se especifique todas as células numa mesma coluna como tendo a mesma largura.

HEIGHT="valor ou percentagem"

Se usado, este atributo permite especificar a altura exata da célula, seja em pixels, seja em uma percentagem da altura da tabela sendo mostrada. Uma única célula deve definir a altura de toda a linha de células da tabela.

NOWRAP

Se este atributo aparece em qualquer célula da tabela isto significa que as linhas de texto, dentro dessa célula, não poderão ser quebradas para caberem dentro da largura definida para ela. Muita cautela ao usar tal atributo, pois células de elevadas larguras poderão resultar dessa atribuição.

COLSPAN="valor"

Este atributo pode aparecer em qualquer célula da tabela e especifica que uma célula deve se expandir por mais de uma coluna de largura. O padrão para o atributo COLSPAN é igual a 1.

ROWSPAN="valor"

Este atributo pode aparecer em qualquer célula da tabela e especifica que uma célula se deve expandir por mais de uma linha de altura. O padrão para o atributo ROWSPAN é igual a 1. Uma expansão que for maior que o número de linhas definidas por um tag <TR> será truncada.

BGCOLOR="#rrggbb|nome_da_cor"

Este atributo permite que se especifique a cor de fundo da célula. Para tal pode-se dar uma tripla em hexadecimal (ex.: FF0000 para o vermelho) ou dar o nome da cor desejada.

BORDERCOLOR="#rrggbb|nome_da_cor”

Permite definir a cor em que o bordo deverá ser mostrada pelos browsers. Para que o atributo BORDERCOLOR funcione é necessária a presença do atributo BORDER no tag <TABLE>.

BACKGROUND="URL_da_imagem"

Permite a colocação de uma imagem como fundo da célula (elemento <TD>).