Diegodg3

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.

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

Caixa curiosa com HTML

Este é o interior da caixa. Esperamos que seja elegante... é muito simples.

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

Caixa curiosa com HTML

Este é o interior da caixa. Esperamos que pareça elegante... é muito simples.

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

Caixa curiosa com HTML

+ Opção um + Outra opção com texto em várias linhas + O que você quiser destacar... + Última opção

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.
para mudar as cores click aqui para escolher a cor de sua preferencia