E-mail para esta seção: [email protected]

Principais Marcações

Atributos de Tabelas

Outros Elementos de Controle

Principais Marcações

Segue abaixo o conjunto de marcações essenciais para desenhar tabelas em HTML. Alguns atributos podem ser definidos para cada uma dessas marcações. Falaremos desses atributos mais adiante.

<TABLE></TABLE>

Toda tabela deve ser iniciada com a marcação <table> e encerrada com </table>.

ATENÇÃO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e células.

Para que a tabela apareça com bordas simples, defina dessa forma <table border></table>. Antes e depois de uma tabela, acontece sempre uma quebra de linha.

<TR></TR>

Cada linha de uma tabela deve sempre aparecer entre as marcações <tr> e </tr>. ( TR = Table Row ).

<TD></TD>

Esta é a marcação que define cada célula de uma tabela. As células de uma tabela devem sempre aparecer entre as marcações de linhas (<tr> e </tr>). Como padrão, o texto nas células é alinhado a esquerda.

<TH></TH>

Dessa forma são definidos os títulos de uma tabela. Estes podem ser posicionados em qualquer célula. A diferença entre a marcação de célula e título de célula é que o título aparece em negrito.

Vamos ver então o exemplo de uma tabela utilizando essas marcações básicas.

<table border>

<tr>

<td>Itens/Mês</td>

<th>Janeiro</th><th>Fevereiro</th><th>Março</th>

</tr>

<tr>

<th>Usuarios</th><td>80</td><td>93</td><td>120</td>

</tr>

<tr>

<th>Linhas</th><td>3</td><td>3</td><td>5</td>

</tr>

</table>

Vai aparecer dessa forma:

Itens/Mês	Janeiro	Fevereiro	Março
Usuarios	80	93	120
Linhas	3	3	5

Atributos

As marcações das tabelas, podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Vamos ver os principais:

<BORDER>

Esse atributo aparece junto a marcação TABLE. Caso esse atributo não apareça, a tabela não terá bordas.

Ou seja, como já vimos, para obter uma tabela com bordas, ela deve ser delimitada pelas marcações <tabel border></table>.

<Align>

Este atributo pode ser aplicado a TR, TH e TD, e controla como será o alinhamento do texto dentro de uma célula, com relação às bordas laterais.

Aceita os valores left, center, right, respectivamente para alinhas a esquerda, centralizar ou alinhar a direita.

Veja o exemplo:

<table border>

<tr>

<td>Primeira célula</td><td>Segunda célula</td><td>Terceira célula</td>

</tr>

<tr>

<td align=center>centro</td>

<td align=left>esquerda</td>

<td align=right>direita</td>

</tr>

</table>

Aparece assim:

Primeira célula	Segunda célula	Terceira célula
centro	esquerda	direita

<VALING>

Pode ser aplicado a TR, TH e TD, e define o alinhamento do texto nas células com relação a borda superior e inferior.

Aceita os valores top, middle e bottom.

<table border>

<tr>

<td>Teste para alinhamento<br>

com relação a bordas<br>

inferior e superior<br>

</td>

<td valign=top>TOP</td>

<td valign=middle>MIDDLE</td>

<td valign=bottom>BOTTOM</td>

</tr>

</table>

Aparece assim:

Teste para alinhamento com relação a bordas inferior e superior

TOP

MIDDLE

BOTTOM

<NOWRAP>

Este atributo evita que haja uma quebra de linha dentro de uma célula. Cautela ao utilizá-lo, para não produzir células muito largar.

<COLSPAN>

Pode ser aplicado a TH ou TD. Define quantas colunas uma célula poderá abranger. Por padrão cada ce´lula corresponde a uma coluna, ou seja COLSPAN=1.

Vejamos um exemplo

<table border>

<tr>

<td colspan=3>3colunas</td><td>normal</td><td>normal</td>

</tr>

<tr>

<td>col 1</td><td>col 2</td><td>col 3</td><td>col 4</td><td>col 5</td>

</tr>

</table>

Que fica assim:

3colunas			normal	normal
col 1	col 2	col 3	col 4	col 5

<ROWSPAN>

Este atributo pode ser aplicado a células (TH e TD) e define quantas linhas uma mesma célula pode abranger. Assim como na marcação anterior, o padrão é uma célula corresponder a uma linha.

Novamente, vamos ver exemplos:

<table border>

<tr>

<td rowspan=3>3linhas</td>

<td>col2</td><td>col3</td><td>col4</td><td>col5</td></tr>

<tr>

<td>col 2</td><td>col 3</td><td>col 4</td><td>col 5</td>

</tr>

<tr>

<td>col 2</td><td>col 3</td><td>col 4</td><td>col 5</td>

</tr>

</table>

Apresenta-se dessa forma:

3linhas	col2	col3	col4	col5
	col 2	col 3	col 4	col 5
	col 2	col 3	col 4	col 5

Mais elementos de controle

Vamos ver agora mais um conunto de extensões que permitem maior controle sobre tabelas.

Estas são especialmente úteis na criação de múltiplas tabelas intercaladas.

BORDER=<value>

Acrescentando um valor ao atributo BORDER é possível colocar tabelas em maior destaque:

<table border=5>

<tr>

<td>teste1<td> <td>teste2</td> <td>teste3</td>

</tr>

<tr>

<td>teste4<td> <td>teste5</td> <td>teste6</td>

</tr>

<table>

teste1	teste2	teste3
teste4	teste5	teste6

CELLSPACING=<value>

Este atributo é aplicável à marcação TABLE. Como padrão, o Internet Explorer 5.0 utiliza espaço 2 entre as células. Este atributo define o espaço entre cada célula na tabela.

<table border cellspacing=5>

<tr>

<td>teste1<td> <td>teste2</td> <td>teste3</td>

</tr>

<tr>

<td>teste4<td> <td>teste5</td> <td>teste6</td>

</tr>

<table>

teste1	teste2	teste3
teste4	teste5	teste6

CELLPADDING=<velue>

Este atributo é aplicado também à marcação TABLE e define a distância entre o texto e a borda de cada célula.

Veja exemplo:

<table border cellpadding=8>

<tr>

<td>teste1<td> <td>teste2</td> <td>teste3</td>

</tr>

<tr>

<td>teste4<td> <td>teste5</td> <td>teste6</td>

</tr>

<table>

teste1	teste2	teste3
teste4	teste5	teste6

A tabela mais compacta possível seria definida como: <table border=0 cellspacing=0 cellpadding=0>

WIDTH=<value or percent>

Este atributo pode ser aplicado tanto a TABLE como a TH e TD. A ele tanto pode ser associado um valor em "pixels" (ponto em tela gráfica), como um valor percentual. Ou seja, determina o quanto da tela uma tabela ou célula da tabela deverá ocupar.

Vamos ver os exemplos:

<table border width=50%>

<tr>

<td>segunda<td>

<td>Terça</td>

<td>Quarta</td>

</tr>

<tr>

<td>Quinta<td>

<td>Sexta</td>

<td>Sábado</td>

</tr>

<table>