| T A B E L A S |
 |
| <table></table> forma geral: |
|
| <table> <tr> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| A propriedade “border” define a expessura da borda de uma tabela, sempre use o valor 1 quando desenvolver uma página HTML com uma tabela complexa, quando terminar e estiver tudo certo configure o valor para 0: |
|
| <table border=1> <tr> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| <table border=1> <tr> <td> <font face=verdana size=2> conteúdo a exibir<br> conteúdo a exibir </font> </td> </tr> </table> |
|
| A tag <tr> é chamada de cédula. Uma cédula define uma coluna numa nova linha, é o equivalente ao <br> só que pra tabelas |
|
| <table border=1> <tr> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> <tr> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| A tag <td> adiciona uma nova coluna na mesma linha, é chamada de … coluna: |
|
| <table border=1> <tr> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| Veja o que acontece quando uma tabela é definida com duas colunas na primeira linha e apenas uma na segunda linha: |
|
| <table border=1> <tr> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> <tr> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| Largura e altura também podem ser definidos, a propriedade “height” não é reconhecida pelo NETSCAPE: |
|
| <table border=1 width=500 height=300> <tr> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| Por padrão o alinhamento do conteúdo dentro de uma tabela é à esquerda e no meio, mas isso pode ser configurado: |
|
| <table border=1 width=500 height=300> <tr> <td align=center valign=top> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| Veja este modelo mais avançado: |
|
| <table border=1 width=500 height=300><tr> <td align=left valign=top> <font face=verdana size=2> conteúdo a exibir </font> </td> <td align=center valign=top> <font face=verdana size=2> conteúdo a exibir </font> </td> <td align=right valign=top> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> <tr> <tr> </table> |
|
| Algo muito útil é o uso do “colspan” e “rowspan”, a seguir um exemplo de uma tabela com duas colunas na primeira linha e apenas uma coluna na segunda, mas com o atributo “colspan=2” essa coluna ocupará o equivalente a 2 colunas: |
|
| <table border=1><tr> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> <tr> </table> |
|
| Tabela com duas colunas na primeira linha e apenas uma coluna na segunda, mas o atributo “rowspan=2” na primeira coluna da primeira linha indica que essa coluna ocupará 2 linhas: |
|
| <table border=1><tr> <td rowspan=2> <font face=verdana size=2> rowspan=2 </font> </td> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> <tr> </table> |
|
| Outros attributos simples podem configurar uma tabela: |
|
| <table border=1 bordercolor=ff0000><tr> <td align=center> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| “bordercolor” limita-se aos atributos das tags <table> e <tr>: |
|
| <table border=1 bordercolor=ff0000><tr bordercolor=ffffff> <td align=center> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| Use “cellpadding” e “cellspacing” para definir a diferença de espaço entre cédulas (<tr></tr>) e células (<td></td>), respectivamente: |
|
| <table border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0><tr bordercolor=ffffff> <td align=center> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| “bgcolor” pode ser usado em todas as tags de uma tabela: |
|
| <table bgcolor=000000 border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0> <tr bordercolor=ffffff> <td align=center> <font face=verdana size=2 color=ffffff> conteúdo a exibir </font> </td> </tr> </table> |
|
| <table border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0> <tr bordercolor=ffffff bgcolor=000000> <td align=center> <font face=verdana size=2 color=ffffff> conteúdo a exibir </font> </td> </tr> </table> |
|
| <table border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0> <tr bordercolor=ffffff> <td align=center bgcolor=000000> <font face=verdana size=2 color=ffffff> conteúdo a exibir </font> </td> </tr> </table> |
|
| <table border=1 width=500 height=300> <tr> <td align=left valign=top bgcolor=ffff00> <font face=verdana size=2 color=000000> conteúdo a exibir </font> </td> <td align=center valign=top> <font face=verdana size=2 color=000000> conteúdo a exibir </font> </td> <td align=right valign=top bgcolor=ff0000> <font face=verdana size=2 color=000000> conteúdo a exibir </font> </td> </tr><tr> <td align=left valign=middle bgcolor=ebc79e> <font face=verdana size=2 color=000000> conteúdo a exibir </font> </td> <td align=center valign=middle bgcolor=000000> <font face=verdana size=2 color=ffffff> conteúdo a exibir </font> </td> <td align=right valign=middle bgcolor=0000ff> <font face=verdana size=2 color=ffffff> conteúdo a exibir </font> </td> </tr> <tr> </table> |
|
| “background” também pode ser usado em todas as tags de uma tabela: |
|
| <table width=130 height=60 background=imagens/briga.gif border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0> <tr bordercolor=ffffff> <td align=center> <font face=verdana size=2 color=ffffff> conteúdo a exibir </font> </td> </tr> </table> |
|
| Por padrão a figura de fundo se mutiplica quando a tabela é maior que suas dimensões: |
|
| <table width=260 height=120 background=imagens/briga.gif border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0> <tr bordercolor=ffffff> <td align=center> <font face=verdana size=2 color=ffffff> conteúdo a exibir </font> </td> </tr> </table> |
|
| Usando um simples Estilo CSS vc pode configurar as propriedades do background: |
|
| <table width=260 height=120 style=”background-repeat:no-repeat;“ background=imagens/briga.gif border=1 bordercolor=ff0000 cellspacing=0 cellpadding=0> <tr bordercolor=ffffff> <td align=center> <font face=verdana size=2 color=ffffff> conteúdo a exibir </font> </td> </tr> </table> |
|
| Usando backgrounds diferentes numa mesma tabela: |
|
| <table width=130 height=100 border=1 style=”background-repeat:no-repeat;”> <tr> <td background=imagens/briga.gif> <font face=verdana size=2> conteúdo a exibir </font> </td> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> <td background=imagens/guitarrista.gif> <font face=verdana size=2> conteúdo a exibir </font> </td> </tr> </table> |
|
| <table width=400 height=120 border=1 background=imagens/hempa.gif> <tr> <td width=130 bgcolor=000000 background=imagens/briga.gif style=”background-repeat:no-repeat;”> </td> <td> <font face=verdana size=2> conteúdo a exibir </font> </td> <td width=130 background=imagens/guitarrista2.gif style=”background-repeat:no-repeat;”> </td> </tr> </table> |
|
| Em algumas situações talvez você precise usar o atributo no ou , por padrão as tabelas são configuradas como ““. NOWRAP indica ao browser que um texto dentro de uma tabela não deve ser automaticamente quebrado quando exceder o tamanho indicado em “width”, a não ser que exista um <br>. |
|
| <table width=100 height=120 border=1> <tr> <td> texto dentro de uma tabela normal com valor padrão WRAP </td> </tr> </table> |
|
| <table width=100 height=120 border=1> <tr> <td no> texto dentro de uma tabela normal com valor padrão WRAP </td> </tr> </table> |
|
| esse atributo pertence apenas à tag <td> |
|
| Para inciantes isso parece um bicho de sete cabeças.. seria mais simples e prático usar o Dreamweaver para criar tabelas complexas apenas clicando “aqui e ali” mas o bicho vai pegar quando você precisar criar uma tabela e não tiver nenhum editor HTML do tipo Front Page ou Dreamweaver, pior ainda quando você precisar desenvolver um sistema em HTML gerado por scripts de linguagens dinâmicas (ASP, PHP, JSP, PERL..). Quando você dominar e desenvolver técnicas de formatação de tabelas, pode-se considerar um programador HTML de nível intermediário FONTE: http://paraiso.etfto.gov.br/biblioteca/material/info/des_web/tutorial/html_tutorial/arquivos/04.html |