Corpo da tabela Aqui poderemos escrever o que desejarmos, que a tabela crescerá o suficiente para conter todo o texto que colocarmos, inclusive imagens. Espero que pareça um desenho interessante, embora certamente há melhores...

Vamos ver como realizar com HTML uma tabela com as esquinas arredondadas e com uma pequena borda de um pixel. É um exemplo de tabela com as bordas arredondadas como qualquer outra, de fato, já vimos um exemplo sobre este assunto em nosso anterior artigo Tabela com esquinas arredondadas. Como sempre, o melhor para se dar conta do que pretendemos construir é vê-lo num exemplo e ao lado destas mesmas linhas podemos vê-lo.

Neste caso, utilizaremos as seguintes imagens, que podemos salvar clicando sobre elas com o botão direito do mouse e selecionando "Salvar imagem como...".


Criação da tabela

Vamos ver o código HTML necessário para criar este exemplo. Temos que levar em conta que o código poderia haver sido criado de várias maneiras, embora nós apresentamos a que consideramos mais versátil.

Construímos a tabela com as correspondentes etiquetas de tabelas de HTML. Como consideração cabe assinalar que as etiquetas das imagens que são colocadas dentro das células têm que estar junto da etiqueta </TD>, que se utiliza para fechar a tabela. Se não for assim, nosso exemplo pode ficar desenquadrado.

O tamanho da tabela em largura pode ser definido perfeitamente no atributo width da etiqueta <TABLE>. A altura será a suficiente para que caibam todos os conteúdos da tabela.

Este é o código em questão:

<TABLE WIDTH=300 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="images/tabela_01.gif" WIDTH=6 HEIGHT=6></TD>
<TD background="images/tabela_02.gif">
<IMG SRC="espaco.gif" WIDTH=1 HEIGHT=6></TD>
<TD>
<IMG SRC="images/tabela_03.gif" WIDTH=6 HEIGHT=6></TD>
</TR>
<TR>
<TD background="images/tabela_04.gif">
<IMG SRC="espaco.gif" WIDTH=6 HEIGHT=1></TD>
<TD bgcolor=E8E8E8 valign=top>
Corpo isto é o Corpo isto é o Corpo isto é o Corpo...
</TD>
<TD background="images/tabela_06.gif">
<IMG SRC="espaco.gif" WIDTH=6 HEIGHT=1></TD>
</TR>
<TR>
<TD>
<IMG SRC="images/tabela_07.gif" WIDTH=6 HEIGHT=6></TD>
<TD align=center background="images/tabela_08.gif">
<IMG SRC="espaco.gif" WIDTH=1 HEIGHT=6></TD>
<TD>
<IMG SRC="images/tabela_09.gif" WIDTH=6 HEIGHT=6></TD>
</TR>
</TABLE>