o Site | Básico | Avançado  

  

Home
Estrutura Básica
Cabeçalho
Formatação de Texto
Formatação Parágrafos
Linhas Horizontais
Imagem
Listas
Tabelas
Links
Frames
Música
Refresh
Marquee
Mapas Clicáveis
Formulários
    

Tabelas

           O conceito mais simples de tabelas é que elos são formados por linhas e colunas e suas intersecções são chamadas de células. Você pode inserir em uma célula praticamen-te qualquer tipo de elemento html tais como links, imagens, listas e outras tabelas.
<table> </table> - estas marcas delimitam toda a tabela. Todas as outras marcas referentes a tabela devem estar entre estas marcas.
<caption> </caption> - este é um elemento opcional onde vamos definir o título da nossa tabela. Sem nenhum parâmetro, o título aparecerá acima da tabela e centraliza-do em relação a ela.
<tr> </tr> - define uma linha da tabela. O número de linhas da tabela corresponde ao número de <tr></tr>. As linhas são formadas de células, isto quer dizer que dentro das linhas devemos definir as células.
<td></td> - define o dado da tabela. Estas marcas devem estar entre as marcas de linha (<tr></tr>) e podem conter todos os elementos de um documento html. O alinhamento horizontal padrão é à esquerda e centralizado verticalmente.
<th></th> - define as células de cabeçalho. Seu uso é idêntico ao <td> mas com alinhamento horizontal centralizado e fonte em negrito.


           Agora, o exemplo de uma tabela com os elementos acima.

Exemplo: tabela.htm
<html>
<title>Tabela Simples.</title> <body>
<table>
<caption>1ºexemplo de tabela </caption>
<tr>
<th>-</th>
<th>coluna 1 </th>
<th>coluna 2</th> </tr>
<tr>
<th>Linha 1 </th>
<th>Célula 1-1 </th>
<th>Célula 1-2</th>
<tr>
<th>Linha 2 </th>
<th>Célula 2-1 </th>
<th>Célula 2-2 </th>
</tr>
<tr>
<th>Linha 3 </th>
<th>Célula 3-1 </th>
<th>Célula 3-2 </th>
</tr>
</table>
</body>
</html>

Veja o exemplo

Parâmetros para <table>:

· border - indica qual deve ser a espessura da borda (em pixels) de cada célula. Ex.: <table border = 2>.

· width - indica largura da tabela, podendo ser especificado em pixels ou porcenta-gem referente à largura da janela. Não sendo especificado, o tamanho da tabela se adapta ao tamanho do texto inserido nas células. Ex.: <table width = 50%>.

· cellspacing - define o espaçamento entre as células, ou seja, a largura das linhas de grade. Ex.: <table cellspacing = 3>.

· cellpadding - determina, em pixels, o espaço entre o conteúdo e as bordas da célula. Ex.: <table cellpadding = 5>.

· align - define o alinhamento horizontal da tabela com relação aos outros elemen-tos da página. Pode conter os valores center, left e right.

· bgcolor - define a cor de fundo da tabela.

           Agora o mesmo exemplo com esses parâmetros:
Exemplo: tabela2.html
<html>
<title>Tabela usando os parâmetros de TABLE</title>
<body>
<table border = 1 width = 50% cellpadding = 5 bgcolor skyblue>
<caption> 1º exemplo de tabela</caption>
<tr>
<th>-</th>
<th>coluna 1 </th>
<th>coluna 2 </th>
</tr>
<tr>
<th>Linha 1 </th>
<td>Célula 1-1 </td>
<td>Célula 1-2 </td>
<tr>
<th>Linha 2</th>
<td>Célula 2-1 </td>
<td>Célula 2-2 </td>
</tr>
<tr>
<th>Linha 3 </th>
<td>Célula 3-1 </td>
<td>Célula 3-2 </td>
</table>
</body>
</html>

Veja o exemplo

Parâmetros para <tr>:
· align - faz o alinhamento horizontal das células contidas na linha, O padrão, se omitido, é o alinhamento à esquerda para <td> e centralizado para <th>.

· valign - faz o alinhamento vertical dos elementos contidos na célula da linha. Pode conter os valores top, middle e bottom. O padrão é ao meio (middle).

· bgcolor - define a cor de fundo da linha.

Parâmetros para <td> e <th>
· align - define o alinhamento horizontal do conteúdo da célula.

· valign - define o alinhamento vertical do conteúdo da célula. Pode ter os valores top, middle e bottom.

· width - define a largura da célula. Seu valor pode ser em pixels ou porcentagem.

· bgcolor - Define a cor de fundo da célula.

· nowrap - A célula que conter este parâmetro não vai permitir a quebra de linha do texto contido nela.

· colspan - Especifica o número de colunas de uma tabela a ser ocupado por uma celula. Sua funçao e expandir uma célula horizontalmente. Atribuir colspan = 2 a uma célula ela ocupará seu espaço e mais o espaço da célula a sua direita.

· rowspan - define o número de linhas que uma célula ocupará. Expande a célula verticalmente. Seu funcionamento é igual a colspan.

Exemplo: tabela3.html
<htmf>
<title>Tabela Completa </títle>
<body text = red bgcolor = black>
<table width = 50% border = 0 cellspacing = 0 cellpadding = 5 bgcolor = skyblue>
<caption> lº exemplo de tabela </caption>
<tr align = center>
<td colspan = 3 align = center>
<i><font size = +2>Tabela Completa <hr size = 5></font></i>
</td>
<td> </td>
<td> </td>
</tr>
<th>-</th>
<th>Coluna 1 </th>
<th>Coluna 2 </th>
</tr>
<tr align = center>
<th>Linha 1 </th>
<td bgcolor = lightgreen>Célula 1-1 </td>
<td bgcolor = lightgreen>Célula 1- 2 </td>
</tr>
<tr align = center>
<th>Linha 2</th>
<td bgcolor = lightgreen>Célula 2-1 </td>
<td bgcolor = lightgreen>Célula 2-2 </td>
</tr>
<tr align = center>
<th>Linha 3</th>
<td bgcolor = lightgreen>Célula 3-1 </td>
<td bgcolor = Iightgreen>Célula 3-2 </td>
</tr>
</table>
</body>
</html>

Veja o exemplo


Topo