design
Tableless
Web
Designer
42
locaweb
<html>
<body>
<table border="0" cellspacing="0"
width="600px">
<tr>
<td colspan="3" style="background-
color:#EEEEEE;text-align:center;">
<h1 style="margin-bottom:
0;">Bem vindo...</h1>
</td>
</td>
<tr cellpadding="20" style=
"vertical-align: top;">
<td style="width: 130px;">Entradas</
br>Pratos quentes</br>Petiscos</td>
<td style="background-color:#EEEEEE;
vertical-align: top; height: 200px;">
Conteúdo do site aqui.</td>
<td style="width: 130px;">Cervejas
belgas</br>Vinhos italianos</br>
Uísques escoceses</td>
</tr>
<tr>
<td colspan="3"
style="background-
color:#EEEEEE;clear:both; text-align:center;font-
weight:bold;">Pé do site</td>
</td>
</table>
</body>
</html>
Agora, há um layout bem simples e
também algumas poucas informações
de formatação. Infelizmente, essa
maneira de organizar o site possui
diversos problemas. O problema mais
óbvio é que usando essa organização
é muito mais difícil manter o site.
Para fazer uma simples mudança na
posição dos menus, seria necessário
reestruturar toda a tabela.
Além disso, se quiser um efeito mais
bonito, com sobreposição de elementos,
por exemplo, seria necessário criar
uma tabela ainda mais complicada.
Alguns desenvolvedores e profissionais
de internet chegam a usar uma tabela
para posicionar várias imagens,
algumas vezes imagens de um único
pixel, tudo isso para alcançar o efeito
desejado. Tais improvisos não são mais
necessários com o CSS.
Interface do site Tableless.com.br:
trata-se de um dos principais pontos de
encontro digitais a respeito do
desenvolvimento sem tabelas
Bem, agora vamos aprender a
consertar o site que acabamos de fazer.
A primeira tag que devemos aprender
a usar é a tag div, que serve para criar
um elemento que representa um bloco
de informação. Assim, consegue-se
agrupar e classificar informações que
estão de alguma forma relacionadas.
O atributo da tag div que se
precisa aprender a usar é o class.
Com ele, informa-se qual é a classe da
informação e consegue-se tratar todas
as informações da mesma classe de
maneira semelhante.
Algumas pessoas se confundem
e pensam que, ao seguir a
filosofia tableless web design,
não se deve usar tabelas nunca.
Mas há informações que são
melhores organizadas em
tabelas e é importante aprender
a identificá-las.
TABELAS
SÃOAMIGAS
