Texto ao redor de uma tabela

[©JOÃO GABRIEL MARQUES]

Olá mestres! Preciso de um help de vocês!

Seguinte: eu estou fazendo a seção de notícias do meu site, pelo Dreamweaver, e estou fazendo agora a página que será responsável por exibir o texto completo da notícia. Nessa página e em algumas notícias eu precisarei colocar uma tabela com uma imagem relacionada à notícia, e a imagem tem que estar dentro de uma tabela porque a imagem terá que ter os créditos e a legenda (isso será de forma dinâmica, isto é, PHP) e eu gostaria de saber como eu faço para que o texto da notícia "contorne" a tabela, isto é, a tabela da imagem deve ter um espaçamento de uns 3 px em relação ao texto da notícia.

Cito como exemplo o site da Folha Online. Acessem o seguinte endereço e vejam o que eu quero fazer: http://www1.folha.uol.com.br/folha/mundo/ult94u356516.shtml

Nesse caso, o texto contorna o banner publicitário e a tabela que contém a imagem, ambos os elementos na mesma página.

Como eu faço isso? Será que eu tenho que usar camadas ao invés de tabelas??

Obrigado!

[Notax]

Po cara... num sei se entendi direito... mas me permitam ousar responder...

Tipo... acho que pode fazer tanto com tabela como com div... mas acho div sempre mais negócio... (opinião pessoal)... de qualquer. forma acho que da pra resolver isso sem usar nenhum dos dois... tipo tenta colocar isso aqui na tag onde tu quiseres que o texto "contorne":

style="float: left"

não sei se era isso que tu queria... mas é um palpite pelo que eu entendi da tua explicação...

qualquer. coisa posta aí denovo!

[]'s Notax

[hipnos na area]

Notax acho que é isso mesmo ele quer:

Exemplo do Notax aplicado:

<style>
#conteudo{
width:600px;
background:#f0f0f0;
height:auto;
display:table;
}
#conteudo p{
margin:5px;
padding:0px;
text-align:justify;
}
.classes{
margin:10px;
float:right;
}
</style>
<div id="conteudo">
<img src="banner.jpg" alt="titulo" class="classes"/>
<p>
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
abc abc abc abc abc abc abc abc abc abc abc abc abc abc 
 </p>
</div>

o <img> é o banner vocÊ pode aplicar tambem a Animações em flash

tanto quantos outros elementos

;)

Editado Dezembro 20, 2007 por hipnos na area

[flavio]

João,

O alinhamento de tabelas pode ser feito na própria tag TABLE. Definir um alinhamento à esquerda, por exemplo, fará a tabela ficar à esquerda e o texto a seu redor. Os valores aceitos são left | center | right

<table align="left"> ... </table>

Agora pra definir precisamente (a seu gosto) a distancia do texto até a tabela você deve usar CSS. Mais especificamente a propriedade margin. Se você olhar o código da FolhaOnline você verá que foi exatamente isso que eles fizeram. Veja que eles definiram que a distancia do texto até a parte de baixo da tabela deve ser de 10px, o mesmo acontece para a distância do texto até a lateral direita da tabela.:

<table class="fe330"> ... imagem e legenda ... </table>


#articleNew table.fe330 {
   width: 330px;
   margin: 0 10px 10px 0;
   float: left;
   border-collapse: collapse;
   border-spacing: 0 0;
}