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.