.

terça-feira

Textual description of firstImageUrl

Criar Uma Tabela Apenas Usando Técnicas HTML e CSS

ACESSOS:
Deixe seu comentário


Nesta postagem compartilho com vocês mais uma dica interessante para você que tem um blog de variedades e deseja usar uma tabela em seus artigos a fim de organizar melhor a postagem, para isso existe aqui uma ótima técnica.


Veja também: Tabela CSS Personalizada Com Miniaturas de Imagens Para Vídeos




Veja uma demonstração ABAIXO:

DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot
DicasHotDicasHot

Como você pode ver na demonstração ACIMA, a tabela é muito bem estruturada e elegante.

O código da tabela é o seguinte:

<div align="center" style="background-color: white; color: #444444; font-family: Quattrocento, 'Trebuchet MS', Helvetica, sans-serif; font-size: 16.6000003814697px; line-height: 29.8800010681152px;">
<table align="center" border="1" cellpadding="3" cellspacing="0" style="border: 1px solid rgb(204, 204, 204); margin: 10px 0px 0px; padding: 0px; width: 400px;"><tbody>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
<tr><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td><td style="background: rgb(249, 249, 249); border-top-color: rgb(223, 223, 223); border-top-style: solid; border-top-width: 1px; padding: 2px 8px;" valign="top" width="200">DicasHot</td></tr>
</tbody></table>
</div>
<div align="left" style="background-color: white; color: #444444; font-family: Quattrocento, 'Trebuchet MS', Helvetica, sans-serif; font-size: 16.6000003814697px; line-height: 29.8800010681152px;">
</div>
<div>
</div>

Se você preferir, pode colocar links em cada palavra para deixar a tabela ainda melhor.


RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}