Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

brcontainer

tabela com DIV e CSS sem Hack

Por , em Desenvolvimento frontend

Recommended Posts

brcontainer    16

brcontainer
Postado

SOLUÇÃO PARA QUEM PROCURA FAZER TABELAS COM DIV+CSS (NÃO RECOMENDO MAS POR ENCONTRAR MUITOS PEDIDOS NO MEU SITE E DE PESSOAS QUE ME ADICIONARAM NO MSN RESOLVI FAZER ESSE EXEMPLO)

Por bastante tempo procurei uma maneira de criar colunas e linhas sem TABELAS <table>, <tr>, <th> e <td>

com DIV's sem usar posicionamento "POSITION:ABSOULUTE;" ou sem usar HACKS <!--if IE --><![endif]-->

 

Essa foi a solucao que eu arrumei... espero que ajude

 

Css

*{		margin:2; /*Defin a a separacao das colunas aqui*/		padding:0;	}	.linha{		padding:0;		clear:both;	}	.coluna{			height:25px;		border: 1px solid #000000;		width:120;	  		float:left;	}
HTML

<div class="linha">	<div class="coluna"> TABELA 1</div>	<div class="coluna"> TABELA 2</div>	<div class="coluna"> TABELA 3</div>	<div class="coluna"> TABELA 4</div></div><div class="linha">	<div class="coluna"> TABELA 1</div>	<div class="coluna"> TABELA 2</div>	<div class="coluna"> TABELA 3</div>	<div class="coluna"> TABELA 4</div></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Primeiramente eu naum confundi nada...

aki o que postei foi uma solucao para evitar posicionamento e HACKS

 

eu sei muito bem o que é tabelas e tds

e sei do

DISPLAY: TABLE;

DISPLAY: TABLE-ROW;

DISPLAY: TABLE-CELL;

 

Se você procurar em varios lugares há pessoas pedindo maneiras de se usar DIVs em lugar de tabela...

 

E leornado acho que você não sabe o que são DIVs e o quento andam comentando deles né??

entaum pesquise e você saberá por que postei isso aki

 

o que estou fazendo é substituir TABELAS por CSS e DIVs

 

beleza ;)

leia tudo que você irá entender...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leonardo P    0

Leonardo P
Postado

bom se você pesquisar sobre divmania como o gio sugeriu você vai ver que substituir um monte de tabelas por um monte de divs não resolve nada.vai ver também que as tabelas têm sua função no html assim como as divs, por isso substituir uma pela outra não faz sentido e sim utilizá-la do modo correto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Um monte de gente procura isso pois não sabe que pode usar tabelas, contanto que seja para dados tabulares, o valor semântico delas...[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

bom se você pesquisar sobre divmania como o gio sugeriu você vai ver que substituir um monte de tabelas por um monte de divs não resolve nada.vai ver também que as tabelas têm sua função no html assim como as divs, por isso substituir uma pela outra não faz sentido e sim utilizá-la do modo correto.

Kara eu num uso DIVs 100% uso TABELA tbm...mas é para umas pessoas q querem isso...DIVS entende??se você for nos meus sites eu uso 55% DIVs(ou tags complacentes) e 40% TABELAS...eu num to apoiando DIVs estou apenas mostrando meios alternativos de fazer tabelasentende

Um monte de gente procura isso pois não sabe que pode usar tabelas, contanto que seja para dados tabulares, o valor semântico delas...

E isso que você falow num tem muitra coerencia, por que quase todas pessoas que eu falei ou que vi falando sobre esse assuntosão experientesTABELAS são muito mais faceis que DIV+CSS acho que se o cara num souber TABELA DIV+CSS ele vai saber menos ainda...aki é uma maneira alternativa e para o defensores dos DIVs(eu num sou um)é apenas um jeito de se organiza o site...não confundam o que eu disseobrigado por lerem

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Desculpe, mas pelo código que você passou a impressão é de confusão sim.

Como o #INSIDE# falou, tabelas são para dados tabulares. Se o que você quer fazer é uma tabela, faça com tabela e pronto.

Primeiramente eu naum confundi nada...

aki o que postei foi uma solucao para evitar posicionamento e HACKS

Quando é para usar div, use.

Quando for para usar tabelas, use.

 

Cada item citado tem sua utilidade.

Se você procurar em varios lugares há pessoas pedindo maneiras de se usar DIVs em lugar de tabela...

Desculpe, mas essa nem eu sei, pode nos dizer?

E leornado acho que você não sabe o que são DIVs e o quento andam comentando deles né??

entaum pesquise e você saberá por que postei isso aki

Pessoal, por favor, vamos evitar discussões, ok?

silverfox, nos diga exatamente o que queres fazer para que possamos, tentar, ajudar.

 

Abraço! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Desculpe, mas pelo código que você passou a impressão é de confusão sim.

Como o #INSIDE# falou, tabelas são para dados tabulares. Se o que você quer fazer é uma tabela, faça com tabela e pronto.

Primeiramente eu naum confundi nada...

aki o que postei foi uma solucao para evitar posicionamento e HACKS

Quando é para usar div, use.

Quando for para usar tabelas, use.

 

Cada item citado tem sua utilidade.

Se você procurar em varios lugares há pessoas pedindo maneiras de se usar DIVs em lugar de tabela...

Desculpe, mas essa nem eu sei, pode nos dizer?

E leornado acho que você não sabe o que são DIVs e o quento andam comentando deles né??

entaum pesquise e você saberá por que postei isso aki

Pessoal, por favor, vamos evitar discussões, ok?

silverfox, nos diga exatamente o que queres fazer para que possamos, tentar, ajudar.

 

Abraço! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Obrigado gio! mas num quero ajuda pelo contrario é uma solucao...hehe

mas obrigado por ajudar mesmo assim ^^

 

AFF cara eu sei muito bem usar TABELAS e sua hora a intenção aki desse topico num é gerar discussão e muito menos falar que DIVs são melhores que TABELAS se você visitar meus sites verá que quase não uso divs...

 

acho que quem está confundindo é você...

 

Não é pra ser usado 100% é só uma solucao...para um problema que varias pessoas que jah vi na NET

ou em outros lugares vivem querendo resolver...

 

minha intenção foi boa ...

 

Espero que desta vez tenha sido claro pra vcs

 

Malz pela confusão que gerei e pela discusão a intesão naum era essa

falow

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Tudo bem que o intuito não é gerar nenhuma discussão e tals, mas meu caro silverfox, entenda uma coisa: aqui no fórum o que fazemos é ajudar os demais com soluções corretas... Entenda que aqui é um fórum onde abordamos questões relacionadas às Webstandards, e usar tabelas para estruturar uma página ou ainda, para piorar, simular uma tabela, isso não está de acordo com nossos objetivos...

 

Quem não conhece esse negócio de Webstandards, ao ler um tópico como esse aqui pode ficar mais confuso do que já está... Entenda: se você já sabe como se usa tabela corretamente, o que deveria fazer é ajudar àqueles que ainda não sabem a entender isso também, e não criar uma "alternativa" utilizando CSS para simular uma tabela...

 

Se a pessoa quer estruturar uma página corretamente com CSS, mas ainda não consegue se livrar do "pensamento tabelista" (é, quando se está acostumado a desenvolver com tabelas é muito difícil migrar para o semântico) o que ela tem que fazer é primeiro aprender o que é semântica, depois aprender os comandos CSS e entender para que serve cada um deles...

 

Não devemos abolir as tabelas, muito pelo contrário, como você já sabe, tudo bem, mas quem não sabe, tabelas devem ser usadas sim, quando necessárias...

 

Uma dica nesse caso: se alguém estiver com alguma dificuldade em estruturar uma página corretamente com CSS, no Laboratório de Scripts (WS) temos tutoriais que irão auxiliá-lo nessa tarefa...

 

Agora, criar uma alternativa para simular uma tabela... Só me diga onde está a vantagem nisso? <_<

 

Bom, espero que isso realmente páre por aqui, e quem acessar esse tópico consiga perceber o porque de nossa "indignação" (por parte da Moderação) e que tudo o que dissemos deve ser pensado (e muito bem pensado)...

 

Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

simular uma tabela, isso não está de acordo com nossos objetivos...

pode não ser o objetivo de vcs mas é o de muitos webdesigners...na minha opnião

Não devemos abolir as tabelas, muito pelo contrário, como você já sabe, tudo bem, mas quem não sabe, tabelas devem ser usadas sim, quando necessárias...

eu não falei nada de abolir...onde você leu isso ...?

Agora, criar uma alternativa para simular uma tabela... Só me diga onde está a vantagem nisso?

não estou falando que é vantagem...da onde você tioru isso??

Quem não conhece esse negócio de Webstandards, ao ler um tópico como esse aqui pode ficar mais confuso do que já está... Entenda: se você já sabe como se usa tabela corretamente, o que deveria fazer é ajudar àqueles que ainda não sabem a entender isso também, e não criar uma "alternativa" utilizando CSS para simular uma tabela...

há pessoas que só entendem de javascript simples e quando vem algo mais complicado por acaso não passam pela mesma situação??Acho que vcs se focaram no lado ruim da coisa ao inves de procurar entender QUAL O OBJETIVO DO TOPICOGaranto que se num tivesse ouvido essa pergunta tantas vezes "COMO USAR DIVS EM LUGAR DE TABELAS"eu nem teria postado esse topico...e se você ler eu escrevi no meu primeiro post desse topico "não recomendo..."Bem pra ser menos chato o que eu quero com isso vou mostrar uma utilidade(fiquei tão desanimado que tah mais pra inutilidade kkk)criar um menu basico
<div class="menu">	<div>home</div>	<div>recados</div>	<div>fotos</div>	<div>ajuda</div></div>
CSS
*{		margin:2; /*Defin a a separacao das colunas aqui*/		padding:0;	}	.menu{		padding:0;		clear:both;	}	.menu div{		background:url('botao.gif');		height:8px;		width:120;	  		float:left;	}
obrigado pela atenção

Compartilhar este post

Link para o post
Compartilhar em outros sites

Xogum    0

Xogum
Postado

Agora fiquei com uma dúvida.. hauaha

 

Tem alguma diferença em montar os links de um menu com div:

<div class="menu">	<div>home</div>	<div>recados</div>	<div>fotos</div>	<div>ajuda</div></div>

e usar o <ul> e <li>?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

naum nessa tuto q eu passei você pode usar isso: .menu div{ background:url('botao.gif'); height:8px; width:120; float:left; }com qualquer TAG troque o DIV po LI entende?assim .menu li{ background:url('botao.gif'); height:8px; width:120; float:left; }fica mesma coisa ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Pessoal tenham em atenção que isso aí é div mania. Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

ta bom vou explicar uma coisa que é o seguinte ...

 

Quando criamos DIVs ou TAGS complacentes(que tem o mesmo efeito)

elas quebram de linham

 

para que eu pudesse tirar essa quebra no firefox e opera eu usava display:table; e display:table-cell;

e no IE isso não funcionava ainda havia quebra de linha entaum eu tinha que usar display:inline;

porem o INLINE no FIREFOX e OPERA fazia com que comandos como width e height não funcionacem

tipo não podia redimensionar

 

entaum tive de fazer um HACK

 

ficou +ou- assim:

<style type="text/css">.AllBox{		   display:table;/*Esse é só utilizado no firefox e opera*/}.nobreak{			 width:200px;			 height:200px;			 display:table-cell;}</style><!--[if IE]><style type="text/css">.nobreak{			 width:200px;			 height:200px;			 display:inline;}</style><![endif]-->
beleza isso era um tipo de hack :P

 

hehe mas ae eu pensei tem de haver uma maneira de fazer tudo só em uma coisa

ae até que percebi que o float:left; faria isso hehehe

 

ae conclui minha pesquisa algo que funciona-se igual em todos browsers que eu utilizo sem serem codigos diferentes...

 

pronto a intenção era essa tirar a quebra de linha ufa acho que acabei abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

A "solução" aqui proposta está equivocada. Quem pede para simular tabelas com div não sabe nem o que está fazendo.

Perde tempo fazendo um monte de coisas desnecessárias.

 

Aqui no fórum de Webstandards tentamos mostrar o que é correto.

E, repetindo pela "n" vez, tabelas são para dados tabulares não para estuturar layout's.

Mas por que trabalhar com tabelas não está certo?

Leia o seguinte link: Porque utilizar tabelas para layout é estupidez

 

Ainda não sei trabalhar com as css, o que posso fazer?

A sequencia de links a seguir vai ajudar você, mas tem que ler. Tem que estudar e por em prática aos poucos o que está vendo na tela.

http://forum.imasters.com.br/index.php?s=&...st&p=536888

No início parece complicado, mas depois você percebe que é muito mais fácil.

 

Fica ai a dica do que estudar (e até onde está o material) para você poder fazer as coisas corretamente.

Se quiser fazer o site inteiro com tabelas, tudo bem, vai da sua cabeça, as vezes para quem não tem experiência e tem um período curto para entregar o material é melhor, mas saiba que, a longo prazo, está se excluindo do mercado.

 

O tópico será fechado, pois como disse a "solução" não é correta, mas fica ai para quem quiser utilizar.

 

Qualquer dúvida, por favor, entrem em contato comigo.

 

Att,

Giovani

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito