Caixa elegante e simples com HTML

Como fazer com HTML, de maneira simples e prática, uma caixa para destacar parte do conteúdo de uma página web.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 05/1/06
Valorize este artigo:
Ao construir uma página web com HTML, é muito habitual querer destacar um pedaço de texto que se deseja remarcar. Muitas vezes utilizamos tabelas e lhe damos uma borda ou um fundo para destacar seu conteúdo, mas nem sempre ficam muito atraentes. Neste simples workshop apto para principiantes, vamos mostrar a maneira de fazer uma caixa bonita com poucos recursos.

Trata-se de utilizar tabelas, mas vamos decorá-las de uma maneira simples, mas que pode ser nova para os menos experientes. À princípio, o melhor será darmos uma olhada nos exemplos que vamos construir.

Como pode ser visto no exemplo, vamos construir três caixas diferentes, embora muito parecidas. Estas caixas têm uma caixa de 1 píxel e cores diferentes para o fundo da célula com o cabeçalho e o corpo da caixa. As pautas de construção são as seguintes:

  • Criar uma tabela com uma cor de fundo como desejarmos e com espaço entre células de 1 píxel e espaço entre a borda da célula e seu conteúdo de 3 pixel (estes últimos atributos são cellspacing="1" cellpadding="3")
  • A tabela terá duas células. Uma com o cabeçalho da tabela, onde colocaremos o título da caixa e a outra, com o conteúdo propriamente dito. Ambas células terão estilos próprios. O título deve estar mais destacado, sendo colocado em negrito ou em uma cor que contraste bem com o texto e o corpo com uma cor mais tênue, para ajudar na leitura do texto.
As cores de fundo das células devem ser atribuídas tal como quisermos que apareça na tabela. Assim, o fundo da tabela somente poderá ser visto no espaço que há entre células, que havíamos indicado que era um píxel.

Primeira tabela

A primeira tabela tem este código:

<table width="280" cellspacing="1" cellpadding="3" border="0" bgcolor="#1E679A">
<tr>
   <td><font color="#FFFFFF" face="arial, verdana, helvetica">
<b>Caixa curiosa com HTML</b>
   </font></td>
</tr>
<tr>
   <td bgcolor="#ffffcc">
   <font face="arial, verdana, helvetica">
   Este é o interior da caixa. Esperamos que seja elegante... é muito simples.
   </font>
   </td>
</tr>
</table>


A cor do texto da célula com o titular é branco, para que contraste com a cor de fundo da célula, que é neste caso, a mesma que a da tabela, pois não foi indicada nenhuma cor na célula.

A célula com o corpo da tabela foi colocada de cor amarelo pálido.

Segunda tabela

A segunda tabela que realizamos simplesmente tem uma mudança no tipo de letra utilizada para os textos, que fizemos menor. Ademais, foi atribuída uma cor de fundo para o cabeçalho com o titular da tabela, para que seja diferente do fundo atribuído para toda a tabela.

O código da segunda tabela é o seguinte:

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#165480">
<tr>
   <td bgcolor="#5FA6D7">
<font size=1 face="verdana, arial, helvetica">
<b>Caixa curiosa com HTML</b>
</font>
   </td>
</tr>
<tr>
    <td bgcolor="#ffffcc">
   <font face="verdana, arial, helvetica" size=1>
   Este é o interior da caixa. Esperamos que pareça elegante... é muito simples.
   </font>
   </td>
</tr>
</table>


Terceira tabela

Para complicar um pouco o exercício pensamos que o corpo da caixa destacada poderia ser um conjunto de opções. Colocaremos as opções dentro de uma tabela, mas dado que a tabela com as opções deve ter estilo diferente que a tabela geral, colocamos uma tabela dentro da outra, ou seja, fizemos uma junção de tabelas.

<table width="200" cellspacing="1" cellpadding="3" border="0" bgcolor="#80A93E">
<tr>
   <td bgcolor="#B7F259"><font size=1 face="verdana, arial, helvetica"><b>Caixa curiosa com HTML</b></font></td>
</tr>
<tr>
   <td bgcolor="#F5ECB9">

    <table width="95%" cellspacing="1" cellpadding="1" border="0" align="center">
<tr>
   <td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
   <td><font face="verdana, arial, helvetica" size=1>

Opção um

      </font></td>
   </tr>
   <tr>
      <td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
   <td><font face="verdana, arial, helvetica" size=1>

Outra opção com texto em várias linhas

      </font></td>
   </tr>
   <tr>
      <td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
      <td><font face="verdana, arial, helvetica" size=1>

O que você quiser destacar...

      </font></td>
   </tr>
   <tr>
      <td valign=top><font face="verdana, arial, helvetica" size=1>+</font></td>
      <td><font face="verdana, arial, helvetica" size=1>

Última opção

      </font></td>
   </tr>
   </table>

   </td>
</tr>
</table>


Como pode ser visto, esta tabela não difere muito com a segunda tabela. Simplesmente o corpo da tabela é outra tabela. É um exemplo de junção de tabelas interessante para praticar HTML.

Pode-se ver as tabelas geradas com estes códigos em uma página a parte.





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