Como criar Tabelas em HTML, usando estilo CSS

Por | Atualizado em 2014-05-18

Quando tentamos otimizar o nosso Website para os motores de busca (SEO), é bastante comum sugerirem várias sugestões indicando que devemos substituir as tabelas HTML por CSS.

Dessa forma você obterá um código mais “limpo” e atualizado. Em termos visuais, você obterá o mesmo layout.

Exemplo de uma tabela criada com CSS:

Código HTML + CSS utilizado:

<!DOCTYPE html>
<html>
	<head>
		
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
		<style>
table,th,td
{
border:1px dotted black;
width:180px;
}
</style>
		
		<style type="text/css">.ts-1 {
	border: none;
	height: 77px;
	text-align: left;
	width: 180px;
}
.ts-1-1 {
	border: 1px dotted black;
	display: inline;
	float: left;
	height: 18px;
	line-height: 18px;
	margin-left: 2px;
	margin-top: 2px;
	padding: 1px;
	text-align: center;
	width: 170px;
}
.ts-1-2, .ts-1-3 {
	border: 1px dotted black;
	display: inline;
	float: left;
	height: 18px;
	line-height: 18px;
	margin-left: 2px;
	margin-top: 2px;
	padding: 1px;
	width: 170px;
}

.gen-1 {
	clear: both;
}
</style>
	</head>
	
	<body>
		
		<div class="ts-1">
			<div class="ts-1-1">nome</div>
			<div class="ts-1-2">Montar um Blog</div>
			<div class="ts-1-3">www.montarumblog.com</div>
			<div class="gen-1"></div>
		</div>
		
	</body>
</html>

Criar tabelas usando CSS


Para o ajudar na criação da tabela, você poderá utilizar o programa Table2CSS (gratuito para testar, 30 utilizações).

Após instalar o programa, clique no botão “Add File / URL” ou “Add Folder” e adicione o arquivo HTML (ou pasta) que possui a tabela HTML.

Em “Output folder”, defina o diretório onde será guardado o arquivo convertido. No separador “CSS”, você encontrará várias opções interessantes para otimizar o resultado final.

Como criar Tabelas em HTML, usando estilo CSS

Por fim, clique no botão “Convert” e visualize o resultado final.

Dica: Antes de aplicar o novo código às suas páginas, é recomendável criar um backup do seu template.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *