Tableless em CSS

Tableless em CSS é uma forma de desenvolvimento de sites que não utiliza tabelas para disposição de conteúdo na página sugerido pela W3C, pois defende que os códigos HTML deveriam ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados tabulares

. Para a disposição da página o recomendado seria usar CSS.

Para desenvolver um site usando tabelas muitas ferramentas e desenvolvedores abusam de recursos como criar tabelas com células possuindo elementos com Gifs com um único pixel transparente apenas para manter a célula visível e forçar o layout da página ficar visualmente elegante, porém o código torna-se totalmente incoerente se comparado com o conteúdo do site.

A W3C também não desaprova o uso de tabelas, desde que elas sejam utilizadas para tabular dados e não para formatar layout. Muitos navegadores travam ou exibem incorretamente formatações usando tabelas.

Vantagens ao substituir tabelas por arquivos CSS

» Adotar este padrão de desenvolvimento também facilita a separação da camada de apresentação da aplicação para o arquivo de estilo (CSS);

» Diminuição de banda. Os navegadores modernos armazenam arquivos de CSS e de JavaScript em cache, se a maneira que o site será visualizado é guardado em um CSS (padrão tableless) então o arquivo será cacheado após o primeiro acesso e todos os acessos seguintes não carregarão este arquivo, carregarão apenas o conteúdo (texto) do site.

Quando se usa tabela, a apresentação das tabelas (tags como “tr” e “td”, gifs vazios, atributos como “cellspacing” e “border”) são carregados todas as vezes que o usuário acessar o site;

» Manutenção. Estando o estilo separado do arquivo html, facilita quando o desenvolvedor deseja mudar algo relacionado ao conteúdo, pois o conteúdo do site deixa de ficar oculto dentro de tabelas e subtabelas para estarem dentro de divs (caixas de conteúdo) que não trazem nenhuma informação de aparência.

Caso ele deseje alterar o estilo, basta ir no arquivo CSS e não precisará procurá-lo entre códigos e conteúdos que não tem relação com a aparência e apresentação do site em geral.

Para desenvolver usando o padrão tableless é necessário um aprofundamento muito maior em renderização de páginas HTML, tags HTML, CSS e DOM.

Em geral os argumentos em favor do tableless e vantagens apresentadas não são fruto do não uso de tabelas em si, mas sim vantagens advindas da criação e do uso do CSS.

Adeptos do layout com tabelas também se beneficiam de todos os novos recursos do CSS moderno e argumentam que práticas como o uso de gifs para posicionar textos tinham como objetivo superar limitações tecnológicas de uma época sem CSS, e, são obsoletas hoje com o uso do CSS.

Os atributos de tabelas como “cellspacing” e “border” também foram depreciados em favor de propriedades que passaram a ser definidas via CSS.

O layout sem tabelas antes da criação do CSS também era confuso, pesado e fazia uso de truques para superar limitações. O CSS é quem muda isso e não o tableless em si.

Muitos layouts modernos feitos com tabelas são mais leves que layouts semelhantes feitos em tableless. O mesmo resultado atingido com técnicas tableless pesadas como a da faux column, que usa uma imagem no fundo de um DIV para criar colunas falsas, pode ser reproduzida de modo muito mais ágil e leve com o simples uso de uma tabela.

Layout utilizando DIVs (tableless):

     <div class="tudo">
    	<div class="logotipo">
       		<?php include ("../_topo.php"); ?>
    	</div>
		<header class="topo"> 
        	<h7><?php include ("../_menu-horizontal.php"); ?></h7>       		
		</header>
		<nav class="navegacao" aria-haspopup="true">
			<?php include ("../_menu-principal.php"); ?>
		</nav>
	    <main class="main-page cf">
        	<!-- TemplateBeginEditable name="principal" -->
        	corpo
			<!-- TemplateEndEditable -->  
			<aside class="auxiliar">
				<?php include ("../_menu-secundario.php"); ?>
			</aside>
		</main>
		<footer class="rodape">
			<?php include ("../_rodape.php"); ?>
		</footer>
	</div>

Viewport em CSS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: css | html | tableless