a tabela é um recurso bastante utilizado para a organização visual dos dados
de um documento html.
a tag <table> é utilizada para a representação de dados tabulares. os
elementos <table> e </table> determinam o início e o fim de uma tabela.
dentro dessas tags, encontram-se outros subconjuntos que definem
elementos específicos.
título da tabela - tag caption
a tag <caption> define o título de uma tabela. quando utilizada, deve estar
logo após a tag que define o início da tabela.
por exemplo:
<table> <caption>título<caption> ...
cabeçalho da tabela - tag th
a tag <th> é usada para especificar as células de cabeçalho da tabela. essas
células são diferenciadas, pois seu conteúdo aparece centralizado e em
negrito.
quando o elemento th é apresentado sem conteúdo algum, corresponde a
uma célula em branco.
as tabelas podem ainda conter mais de um th para uma dada coluna, ou
linha, ou simplesmente não conter nenhum elemento th, isto é, não conter
nenhuma célula em destaque.
por exemplo:
<table> <th>cabeçalho<th> ...
linha da tabela - tag tr
a tag <tr> indica o início e o fim de uma linha na tabela. cada linha da tabela
pode conter várias células, e portanto, é necessário que se faça uso de uma
marcação que indique exatamente o ponto de quebra de uma linha e início de
outra.
toda linha deve terminar com um </tr>, com exceção da última linha da
tabela, que dispensa o tr porque o uso da própria marcação de fim de tabela
</table> torna implícito o fim da linha.
dados da tabela - tag td
a tag <td> define as células que irão compor cada linha da tabela. por se
tratar de dados comuns (e não cabeçalhos), essas células possuem seu
conteúdo escrito em fonte normal, sem nenhum destaque e alinhado à
esquerda.
dentro de uma célula é possível inserir textos, imagens, arquivos, links, ou
até mesmo outras tabelas (todos com suas opções e elementos).
assim como o <th>, pode-se construir células em branco, usando o elemento
<td>, como no exemplo a seguir:
<td>dados da tabela<td>
observação: a tag de terminação, </td>, também é opcional.
atributos das tabelas
as marcações das tabelas podem apresentar resultados diferentes, se
acompanhadas de alguns atributos que complementam a tag <table>. os
principais atributos são:
· border: indica a largura das bordas de uma tabela. se o valor atribuído for
0 (zero), o border funciona exatamente como no caso padrão, sem o
border. dessa maneira, é possível colocar tabelas em maior destaque,
atribuindo um valor maior que 1 para o border;
· align: define o alinhamento horizontal dentro dos elementos da tabela.
possui os valores left (à esquerda), center (no centro) e right (à direita).
este atributo pode ser aplicado a <th>, <td> ou <tr> e controla o
alinhamento horizontal do conteúdo em relação as bordas laterais; aplicado a
<td>, define o alinhamento de cada célula em separado; aplicado a
<table>, define o alinhamento de toda a tabela dentro do conteúdo da
página;
· valign: define o alinhamento vertical dentro dos elementos da tabela.
possui os valores top (ao alto), middle (no meio) e bottom (embaixo). este
atributo pode ser aplicado a <th>, <td> ou <tr> e controla o alinhamento
do conteúdo com relação as bordas superior e inferior; aplicado a <td>,
define o alinhamento de cada célula em separado; aplicado a <table>, define
o alinhamento de toda a tabela dentro do conteúdo da página;
· background: permite que sejam usadas figuras de fundo dentro da tabela.
aplicável na tag <table>.
· bgcolor: permite definir uma cor de fundo para a tabela. linha ou célula.
aplicável nas tags <table>, <tr> ou <td>. vale lembrar que este abributo é
"cumulativo", ou seja, você pode atribuir uma cor de fundo à toda a tabela,
posicionando o bgcolor na tag <table> e ao mesmo tempo usar um bgcolor
diferenciado para uma célula em especial, posicionando-o também na tag
<td>;
· cellspacing: é a distância formada por um "vão" que divide as linhas
gráficas que formam as linhas da tabela;
· rowspan: parâmetro usado para aumentar as células verticalmente,
mesclando-as com a célula de baixo, o valor é expresso em números e define
o número de células que serão envolvidas na mesclagem. aplica-se apenas à
tag <td>;
· colspan: parâmetro usado para aumentar as células horizontalmente,
mesclando-as com a célula vizinha, o valor é expresso em números e define o
número de células que serão envolvidas na mesclagem. aplica-se apenas à
tag <td>;
· height: define a altura da linha ou da célula em pixels, de acordo com a
tag onde é aplicada, respectivamente <tr> ou <td>;
· width: define a largura da linha ou da célula em pixels, de acordo com a
tag onde é aplicada, respectivamente <tr> ou <td>;
de um documento html.
a tag <table> é utilizada para a representação de dados tabulares. os
elementos <table> e </table> determinam o início e o fim de uma tabela.
dentro dessas tags, encontram-se outros subconjuntos que definem
elementos específicos.
título da tabela - tag caption
a tag <caption> define o título de uma tabela. quando utilizada, deve estar
logo após a tag que define o início da tabela.
por exemplo:
<table> <caption>título<caption> ...
cabeçalho da tabela - tag th
a tag <th> é usada para especificar as células de cabeçalho da tabela. essas
células são diferenciadas, pois seu conteúdo aparece centralizado e em
negrito.
quando o elemento th é apresentado sem conteúdo algum, corresponde a
uma célula em branco.
as tabelas podem ainda conter mais de um th para uma dada coluna, ou
linha, ou simplesmente não conter nenhum elemento th, isto é, não conter
nenhuma célula em destaque.
por exemplo:
<table> <th>cabeçalho<th> ...
linha da tabela - tag tr
a tag <tr> indica o início e o fim de uma linha na tabela. cada linha da tabela
pode conter várias células, e portanto, é necessário que se faça uso de uma
marcação que indique exatamente o ponto de quebra de uma linha e início de
outra.
toda linha deve terminar com um </tr>, com exceção da última linha da
tabela, que dispensa o tr porque o uso da própria marcação de fim de tabela
</table> torna implícito o fim da linha.
dados da tabela - tag td
a tag <td> define as células que irão compor cada linha da tabela. por se
tratar de dados comuns (e não cabeçalhos), essas células possuem seu
conteúdo escrito em fonte normal, sem nenhum destaque e alinhado à
esquerda.
dentro de uma célula é possível inserir textos, imagens, arquivos, links, ou
até mesmo outras tabelas (todos com suas opções e elementos).
assim como o <th>, pode-se construir células em branco, usando o elemento
<td>, como no exemplo a seguir:
<td>dados da tabela<td>
observação: a tag de terminação, </td>, também é opcional.
atributos das tabelas
as marcações das tabelas podem apresentar resultados diferentes, se
acompanhadas de alguns atributos que complementam a tag <table>. os
principais atributos são:
· border: indica a largura das bordas de uma tabela. se o valor atribuído for
0 (zero), o border funciona exatamente como no caso padrão, sem o
border. dessa maneira, é possível colocar tabelas em maior destaque,
atribuindo um valor maior que 1 para o border;
· align: define o alinhamento horizontal dentro dos elementos da tabela.
possui os valores left (à esquerda), center (no centro) e right (à direita).
este atributo pode ser aplicado a <th>, <td> ou <tr> e controla o
alinhamento horizontal do conteúdo em relação as bordas laterais; aplicado a
<td>, define o alinhamento de cada célula em separado; aplicado a
<table>, define o alinhamento de toda a tabela dentro do conteúdo da
página;
· valign: define o alinhamento vertical dentro dos elementos da tabela.
possui os valores top (ao alto), middle (no meio) e bottom (embaixo). este
atributo pode ser aplicado a <th>, <td> ou <tr> e controla o alinhamento
do conteúdo com relação as bordas superior e inferior; aplicado a <td>,
define o alinhamento de cada célula em separado; aplicado a <table>, define
o alinhamento de toda a tabela dentro do conteúdo da página;
· background: permite que sejam usadas figuras de fundo dentro da tabela.
aplicável na tag <table>.
· bgcolor: permite definir uma cor de fundo para a tabela. linha ou célula.
aplicável nas tags <table>, <tr> ou <td>. vale lembrar que este abributo é
"cumulativo", ou seja, você pode atribuir uma cor de fundo à toda a tabela,
posicionando o bgcolor na tag <table> e ao mesmo tempo usar um bgcolor
diferenciado para uma célula em especial, posicionando-o também na tag
<td>;
· cellspacing: é a distância formada por um "vão" que divide as linhas
gráficas que formam as linhas da tabela;
· rowspan: parâmetro usado para aumentar as células verticalmente,
mesclando-as com a célula de baixo, o valor é expresso em números e define
o número de células que serão envolvidas na mesclagem. aplica-se apenas à
tag <td>;
· colspan: parâmetro usado para aumentar as células horizontalmente,
mesclando-as com a célula vizinha, o valor é expresso em números e define o
número de células que serão envolvidas na mesclagem. aplica-se apenas à
tag <td>;
· height: define a altura da linha ou da célula em pixels, de acordo com a
tag onde é aplicada, respectivamente <tr> ou <td>;
· width: define a largura da linha ou da célula em pixels, de acordo com a
tag onde é aplicada, respectivamente <tr> ou <td>;
