Tabela com as esquinas arredondadas, tipo 2

Outro exemplo de tabela com as esquinas arredondadas, neste caso com uma borda de um pixel, também arredondada.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 09/12/05
Valorize este artigo:
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.

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...

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>





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato