Podemos traduzir “Tableless” como “Sem Tabelas” ou “Menos Tabelas”. Não se trata de tecnologia, mas de uma prática. Sem tabelas ou menos tabelas, porque assim recomenda o W3C – órgão responsável por padrões na Web – para a diagramação de páginas de sites. A diagramação com tabelas, como se praticou no passado, não é de fácil execução; e tabelas não foram feitas para diagramar, criar leiautes, mas para armazenar dados ou componentes que, de modo adjacente, se arranjam melhor dentro de uma tabela, como coleções de imagens ou componentes de formulário; ou para organizar dados em linhas e colunas, formando registros, seja de modo estático ou dinâmico. O recurso fundamental para a prática de Tableless é a aplicação de CSS (sigla para Cascading Style Sheets – Folhas de Estilo em Cascata). Através dessa linguagem é possível formatar e posicionar elementos em uma página.
Segue, como exemplo, uma diagramação simples sem imagens e sem tabelas e seu código. Este post serve de apoio às aulas de Web com Dreamweaver. Uma análise do código no Dreamweaver servirá de bom auxílio ao aprendizado.
► Código
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Leiaute</title>
<style type=”text/css”>
<!–
body {
font-family: Arial, Helvetica, sans-serif;
color: #003366;
background-color: #666666;
text-align: center;
}
#conteudo {
background-color: #999999;
border: 1px solid #FFFFFF;
margin-right: auto;
margin-left: auto;
width: 900px;
overflow: visible;
height: 620px;
text-align: center;
}
#topo {
background-color: #CCCCCC;
height: 100px;
width: 880px;
margin-top: 10px;
margin-left: 10px;
}
#esquerdo {
background-color: #FFFFFF;
float: left;
height: 400px;
width: 400px;
margin-top: 20px;
margin-left: 10px;
}
#direito {
background-color: #FFFFFF;
height: 400px;
width: 400px;
float: right;
margin-top: 20px;
margin-right: 10px;
}
#rodape {
height: 50px;
width: 880px;
background-color: #66FFFF;
float: left;
margin-top: 30px;
clear: both;
margin-left: 10px;
}
–>
</style>
</head>
<body>
<div id=”conteudo”>
<div id=”topo”></div>
<div id=”esquerdo”></div>
<div id=”direito”></div>
<div id=”rodape”></div>
</div>
</body>
</html>
► Imagem
