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 *